Show only top 100 strongest preview lines dynamically

src/App.svelte

@@ -455,6 +455,7 @@
   }
 
   function logEvent(event) {
+    if (!event) return;
     event.timestamp = new Date().toString();
     $interactionHistory = [...$interactionHistory, event];
   }

src/visualization/SynchronizedScatterplot.svelte

@@ -327,7 +327,11 @@
     previewInfo={!!data && previewFrame >= 0 && previewFrame != frame
       ? data.previewInfo(frame, previewFrame)
       : null}
-    idsOfInterest={alignedIDs.length > 0 ? getFilterPoints(alignedIDs) : []}
+    idsOfInterest={alignedIDs.length > 0
+      ? getFilterPoints(alignedIDs)
+      : clickedIDs.length > 0
+      ? getFilterPoints(clickedIDs)
+      : []}
     bind:previewProgress
     bind:clickedIDs
     bind:hoveredID

src/visualization/models/frames.js

@@ -1,4 +1,4 @@
-import { transformPoint, distance2 } from '../utils/helpers.js';
+import { transformPoint, distance2, shuffle } from '../utils/helpers.js';
 import { kdTree } from '../utils/kdTree.js';
 
 /**
@@ -210,16 +210,40 @@ export class FramePreview {
   frame;
   previewFrame;
   lineData;
+  _sortedByAlpha;
 
   constructor(frame, previewFrame, dataFn = null) {
     this.frame = frame;
     this.previewFrame = previewFrame;
     this.lineData = new ColumnarData(
       PREVIEW_LINE_SCHEMA,
-      !!dataFn ? this.frame.getIDs().map(dataFn) : {}
+      !!dataFn
+        ? Object.fromEntries(this.frame.getIDs().map((id) => [id, dataFn(id)]))
+        : {}
     );
   }
 
+  /**
+   * Returns the top k IDs with the highest alpha values, optionally filtering
+   * to the given set of IDs.
+   */
+  getTopK(k, inSet = null) {
+    if (this._sortedByAlpha == null) {
+      let ids = this.frame.getIDs();
+      this._sortedByAlpha = shuffle([...Array(ids.length).keys()]);
+      let alphas = this.lineData.getField('lineAlpha');
+      this._sortedByAlpha.sort((a, b) => alphas[b] - alphas[a]);
+    }
+
+    let result = [];
+    this._sortedByAlpha.some((id) => {
+      if (inSet != null && !inSet.has(id)) return false;
+      result.push(id);
+      return result.length >= k;
+    });
+    return result;
+  }
+
   get(id) {
     return this.lineData.byID(id) || { lineAlpha: 0, lineWidth: 0 };
   }

src/visualization/pixi/Scatterplot.svelte

@@ -653,7 +653,6 @@
     xScale={!!viewportManager ? (x) => viewportManager.scaleX(x) : null}
     yScale={!!viewportManager ? (y) => viewportManager.scaleY(y) : null}
     highlightFocusedPoints={!performanceMode}
-    showPreviewLines={!performanceMode}
     bind:marks
     bind:filterIDs
     bind:hoveredID

src/visualization/state/ScatterplotState.svelte

@@ -59,6 +59,7 @@
   // set this to false to disable showing preview lines when displaying lots
   // of data
   export let showPreviewLines = true;
+  export let numPreviewPoints = 100;
 
   // Constants
 
@@ -130,7 +131,7 @@
   let highlightedPoints = new Set();
 
   let previewLinePoints = new Set();
-  $: previewLinePoints = new Set(idsOfInterest);
+  let strongestPreviewPoints = [];
 
   function _getX(mark) {
     let id = mark.id;
@@ -232,7 +233,7 @@
   let previousFrame = null;
   $: if (!!marks && previousFrame !== frame) {
     setFrame(previousFrame, frame, !thumbnail && previousFrame != null);
-    if (!thumbnail) updatePreviewLines();
+    if (!thumbnail) updatePreviewLines(filter, idsOfInterest, previewInfo);
     previousFrame = frame;
   }
 
@@ -313,12 +314,31 @@
     oldPreviewFrame = previewFrame;
   }
 
-  $: if (!!data && !!marks && !!previewLinePool)
-    updatePreviewLines(previewInfo);
+  $: if (!!data && !!marks && !!previewLinePool) {
+    updatePreviewLines(filter, idsOfInterest, previewInfo);
+  }
 
-  function updatePreviewLines(info) {
+  function updateStrongestPreviewPoints(filterSet, prevInfo) {
+    if (!prevInfo) {
+      strongestPreviewPoints = [];
+      return;
+    }
+
+    strongestPreviewPoints = prevInfo.getTopK(
+      numPreviewPoints,
+      filterSet.size > 0 ? filterSet : null
+    );
+  }
+
+  function updatePreviewLines(filterSet, interestIDs, info) {
     if (!marks || !previewLinePool) return;
 
+    if (interestIDs.size > 0) previewLinePoints = new Set(interestIDs);
+    else {
+      updateStrongestPreviewPoints(filterSet, info);
+      previewLinePoints = new Set(strongestPreviewPoints);
+    }
+
     if (!!info && showPreviewLines) {
       marks.forEach((mark) => {
         if (_getLineAlpha(mark) <= 0.01) {
@@ -365,7 +385,7 @@
       }
     }
     if (previewInfo != null) {
-      updatePreviewLines(previewInfo);
+      updatePreviewLines(filter, idsOfInterest, previewInfo);
     }
     prevFilter = filter;
   }
@@ -473,7 +493,7 @@
 
   let oldShowPreviewLines = true;
   $: if (oldShowPreviewLines != showPreviewLines && !!previewInfo) {
-    updatePreviewLines(previewInfo);
+    updatePreviewLines(filter, idsOfInterest, previewInfo);
     oldShowPreviewLines = showPreviewLines;
   }
 

src/visualization/state/ScatterplotViewportState.svelte

@@ -41,14 +41,12 @@
   }
 
   $: if (!!scales && !!data && !thumbnail) {
-    console.log('updating scale bounds from original');
     updateScaleBounds(true);
   }
 
   let oldVisibleIDs = [];
   $: if (oldVisibleIDs !== visibleIDs) {
     if (!!scales && !!data) {
-      console.log('updating from filter', visibleIDs);
       updateScaleBounds();
       // updatePointDisplay();
     }