Viewer fixups

frontend/viewer/package.json

@@ -55,6 +55,7 @@
     "@microsoft/signalr": "^8.0.0",
     "autoprefixer": "^10.4.19",
     "fast-json-patch": "^3.1.1",
+    "just-throttle": "^4.2.0",
     "postcss": "catalog:",
     "svelte-exmarkdown": "^3.0.5",
     "svelte-preprocess": "catalog:",

frontend/viewer/src/ProjectView.svelte

@@ -37,6 +37,7 @@
   import {useEventBus} from './lib/services/event-bus';
   import AboutDialog from './lib/about/AboutDialog.svelte';
   import { initProjectCommands, type NewEntryDialogOptions } from './lib/commands';
+  import throttle from 'just-throttle';
 
   export let loading = false;
 
@@ -196,11 +197,25 @@
     }
   }
 
+  function onEntryDeleted(event: CustomEvent<{entry: IEntry}>) {
+    const _entries = $entries!;
+    const deletedEntry = event.detail.entry;
+    const deletedIndex = _entries.findIndex(e => e.id === deletedEntry.id);
+    $selectedEntry = _entries[deletedIndex + 1];
+
+    if (deletedIndex >= 0 && deletedIndex < _entries.length) {
+      _entries.splice(deletedIndex, 1);
+      $entries = _entries;
+    }
+  }
+
   function navigateToEntry(entry: IEntry, searchText?: string) {
     // this is to ensure that the selected entry is in the list of entries, otherwise it won't be selected
     $search = searchText ?? '';
     $selectedIndexExemplar = null;
     $selectedEntry = entry;
+    // This just forces and flushes a refresh.
+    // todo: The refresh should only be necessary if $search or $selectedIndexExemplar were actually changed
     refreshEntries();
     pickedEntry = true;
   }
@@ -215,11 +230,11 @@
 
   let editorElem: HTMLElement | undefined;
   let spaceForEditorStyle: string = '';
-  const updateSpaceForEditor = makeDebouncer(() => {
+  const updateSpaceForEditor = throttle(() => {
     if (!editorElem) return;
     const availableHeight = getAvailableHeightForElement(editorElem);
     spaceForEditorStyle = `--space-for-editor: ${availableHeight}px`;
-  }, 30).debounce;
+  }, 20, { leading: false, trailing: true });
 
   $: editorElem && updateSpaceForEditor();
   onMount(() => {
@@ -344,10 +359,7 @@
               $selectedEntry = $selectedEntry;
               $entries = $entries;
             }}
-            on:delete={_ => {
-              $selectedEntry = undefined;
-              refreshEntries();
-            }} />
+            on:delete={onEntryDeleted} />
         {:else}
           <div class="w-full h-full z-10 bg-surface-100 flex flex-col gap-4 grow items-center justify-center text-2xl opacity-75">
             No entry selected

frontend/viewer/src/app.postcss

@@ -57,7 +57,7 @@
 
   .side-scroller {
     height: calc(var(--space-for-editor, 100vh) - 32px);
-    transition: height 0.1s ease-out, opacity 0.2s ease-out;
+    transition: height 0.05s ease-out, opacity 0.2s ease-out;
     position: sticky;
     top: 16px;
   }

frontend/viewer/src/lib/entry-editor/inputs/CrdtMultiOptionField.svelte

@@ -19,12 +19,27 @@
   let append: HTMLElement;
 
   $: sortedOptions = options.toSorted((a, b) => a.label.localeCompare(b.label));
+
+  function preserveSortOrder(unsortedValue: string[] | undefined): void {
+    unsortedValue?.sort((a, b) => {
+      let aIndex = value.findIndex(v => v === a);
+      if (aIndex < 0 ) aIndex = unsortedValue.findIndex(v => v === a) + unsortedValue.length; // it's new, so it should be after the existing ones
+      let bIndex = value.findIndex(v => v === b);
+      if (bIndex < 0) bIndex = unsortedValue.findIndex(v => v === b) + unsortedValue.length; // it's new, so it should be after the existing ones
+      return aIndex - bIndex;
+    });
+  }
 </script>
 
 <CrdtField on:change={(e) => dispatch('change', { value: e.detail.value})} bind:value bind:unsavedChanges let:editorValue let:onEditorValueChange viewMergeButtonPortal={append}>
   <MultiSelectField
-    on:change={(e) =>
-      onEditorValueChange(e.detail.value ?? [], true)}
+    on:change={(e) => {
+      const newValue = [...e.detail.value ?? []];
+      // on changes, the order of the value reverts to the order of the options (because they're sorted in the UI?),
+      // so we have to "undo" that
+      if (preserveOrder) preserveSortOrder(newValue);
+      onEditorValueChange(newValue ?? [], true)
+    }}
     value={editorValue}
     disabled={readonly}
     options={sortedOptions}
@@ -34,7 +49,7 @@
       // sorted by order of selection
       ? value?.map(v => options.find(o => o.value === v)?.label).filter(label => !!label).join(', ')
       // sorted according to the order of options (e.g. alphabetical or by semantic domain)
-      : options.map(o => o.label).join(', ')) || 'None';
+      : options.map(o => o.label).join(', ')) ?? 'None';
     }}
     infiniteScroll
     clearSearchOnOpen={false}

frontend/viewer/src/lib/layout/EntryList.svelte

@@ -17,22 +17,26 @@
   export let search: string;
   export let expand: boolean;
 
+  const selectedEntry = getContext<Writable<IEntry | undefined>>('selectedEntry');
+  let lastScrolledTo: string | undefined = undefined;
+
   $: {
-    entries;
+    const selectedId = $selectedEntry?.id;
+    const selectedDifferentEntry = selectedId && selectedId !== lastScrolledTo;
+
     // wait until the new entries have been rendered
     setTimeout(() => {
-      const selected = scrollContainerElem?.querySelector('.selected-entry');
-      selected?.scrollIntoView({block: 'nearest'});
+      const selectedEntryElem = scrollContainerElem?.querySelector('.selected-entry');
+      if (selectedEntryElem) {
+        if (selectedDifferentEntry) {
+          lastScrolledTo = selectedId;
+          selectedEntryElem?.scrollIntoView({block: 'nearest'});
+        }
+      }
     });
   }
 
-  const selectedEntry = getContext<Writable<IEntry | undefined>>('selectedEntry');
-
   let scrollContainerElem: HTMLDivElement;
-  $: {
-    entries;
-    if (scrollContainerElem) scrollContainerElem.scrollTop = 0;
-  }
 
   const standardPageSize = 50;
   $: perPage = (!$selectedEntry || !entries)