[CHORE] Reuse shared text and unsaved-change helpers

Author: JamesPeck

src/lib/components/explorer/advanced/AdvancedFilteringPage.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
-  import { resolve } from '$app/paths';
-  import { goto, beforeNavigate } from '$app/navigation';
   import { onMount, onDestroy } from 'svelte';
   import { config } from '$lib/configuration.svelte';
   import Content from '$lib/components/Content.svelte';
   import Modal from '$lib/components/Modal.svelte';
   import AdvancedFiltering from '$lib/components/explorer/advanced/AdvancedFiltering.svelte';
   import { panelOpen } from '$lib/stores/SidePanel';
+  import { createUnsavedGuard } from '$lib/utilities/UnsavedGuard.svelte';
 
   interface Props {
     backUrl: string;
@@ -16,8 +15,7 @@
   const { backUrl, backTitle }: Props = $props();
 
   let advancedFilteringRef: ReturnType<typeof AdvancedFiltering>;
-  let showUnsavedModal = $state(false);
-  let bypassGuard = false;
+  const guard = createUnsavedGuard(() => advancedFilteringRef?.hasUnsavedChanges() ?? false);
 
   onMount(() => {
     $panelOpen = false;
@@ -27,46 +25,30 @@
     $panelOpen = true;
   });
 
-  beforeNavigate(({ cancel }) => {
-    if (!bypassGuard && advancedFilteringRef?.hasUnsavedChanges()) {
-      cancel();
-      showUnsavedModal = true;
-    }
-  });
-
   function applyChanges() {
     advancedFilteringRef?.applyChanges();
   }
 
   function handleCancel() {
-    showUnsavedModal = false;
+    guard.take();
   }
 
   function handleDiscard() {
-    showUnsavedModal = false;
-    bypassGuard = true;
-    goto(resolve(backUrl as '/'));
+    guard.take();
+    guard.navigate(backUrl);
   }
 
   function handleModalApply() {
-    showUnsavedModal = false;
+    guard.take();
     advancedFilteringRef?.applyChanges();
   }
-
-  function handleBeforeUnload(event: BeforeUnloadEvent) {
-    if (advancedFilteringRef?.hasUnsavedChanges()) {
-      event.preventDefault();
-    }
-  }
 </script>
 
-<svelte:window onbeforeunload={handleBeforeUnload} />
-
 <svelte:head>
   <title>{config.branding.applicationName} | Advanced Query Builder</title>
 </svelte:head>
 
-<Modal bind:open={showUnsavedModal} title="Unsaved Changes" closeable={true} onclose={handleCancel}>
+<Modal bind:open={guard.open} title="Unsaved Changes" closeable={true} onclose={handleCancel}>
   <p class="mb-6">You have unsaved changes to your filters. What would you like to do?</p>
   <footer class="flex justify-end gap-2">
     <button class="btn border preset-tonal-error" onclick={handleDiscard}>Discard Changes</button>

src/lib/utilities/Plotly.ts

@@ -1,5 +1,6 @@
 import type { PlotlyHTMLElement, Root, Data, Config, Layout } from 'plotly.js-basic-dist-min';
 import { config } from '$lib/configuration.svelte';
+import { truncate } from '$lib/utilities/Strings';
 
 const MAX_TITLE_LENGTH = 60;
 
@@ -84,7 +85,7 @@ function getSubTitle(inData: CategoricalPlotData | ContinuousPlotData) {
 }
 
 function shortenTitle(title: string) {
-  return title.length > MAX_TITLE_LENGTH ? title.substring(0, MAX_TITLE_LENGTH - 3) + '...' : title;
+  return truncate(title, MAX_TITLE_LENGTH);
 }
 
 export function normalizeCount(value: CountValue): ObfuscatedCount {