Fix a bug with spans not showi showing metadata when the span is cut

lilacai · Jul 19, 2023 · f160071 · f160071
1 parent 0dcd375
commit f160071
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 7 deletions.
diff --git a/web/blueprint/src/lib/components/datasetView/SpanHover.ts b/web/blueprint/src/lib/components/datasetView/SpanHover.ts
@@ -1,4 +1,4 @@
-import {deserializePath, pathIsMatching} from '$lilac';
+import {deserializePath, pathIsEqual} from '$lilac';
 import type {SvelteComponent} from 'svelte';
 import SpanHoverTooltip, {type SpanHoverNamedValue} from './SpanHoverTooltip.svelte';
 
@@ -17,9 +17,15 @@ export function spanHover(element: HTMLSpanElement, spanHoverInfo: SpanHoverInfo
   }
   function showSpan() {
     const namedValues = curSpanHoverInfo.namedValues.filter(namedValue =>
-      Array.from(curSpanHoverInfo.spansHovered).some(path =>
-        pathIsMatching(namedValue.info.spanPath, deserializePath(path))
-      )
+      Array.from(curSpanHoverInfo.spansHovered).some(path => {
+        const spanHoveredPath = deserializePath(path);
+        // The specific path may point to metadata under the hovered span, so we cut it to the
+        // length of the hovered span to check if they match.
+        return pathIsEqual(
+          namedValue.specificPath.slice(0, spanHoveredPath.length),
+          spanHoveredPath
+        );
+      })
     );
     if (curSpanHoverInfo.itemScrollContainer != null) {
       curSpanHoverInfo.itemScrollContainer.addEventListener('scroll', itemScrollListener);

diff --git a/web/blueprint/src/lib/components/datasetView/SpanHoverTooltip.svelte b/web/blueprint/src/lib/components/datasetView/SpanHoverTooltip.svelte
@@ -2,11 +2,12 @@
   export interface SpanHoverNamedValue {
     info: SpanValueInfo;
     value: DataTypeCasted;
+    specificPath: Path;
   }
 </script>
 
 <script lang="ts">
-  import {isNumeric, type DataTypeCasted} from '$lilac';
+  import {isNumeric, type DataTypeCasted, type Path} from '$lilac';
   import {colorFromScore} from './colors';
   import type {SpanValueInfo} from './spanHighlight';
 

diff --git a/web/blueprint/src/lib/components/datasetView/spanHighlight.ts b/web/blueprint/src/lib/components/datasetView/spanHighlight.ts
@@ -68,7 +68,11 @@ export function getRenderSpans(
       pathsProcessed.add(mergedSpanPath);
     }
 
+    // The named values only when the path is first seen (to power the hover tooltip).
+    const firstNamedValues: SpanHoverNamedValue[] = [];
+    // All named values.
     const namedValues: SpanHoverNamedValue[] = [];
+
     // Compute the maximum score for all original spans matching this render span to choose the
     // color.
     let maxScore = -Infinity;
@@ -98,9 +102,11 @@ export function getRenderSpans(
           const originalPath = serializePath(L.path(originalSpan as LilacValueNode)!);
           const pathSeen = !newPaths.includes(originalPath);
 
+          const namedValue = {value, info: valueInfo, specificPath: L.path(valueNode)!};
           if (!pathSeen) {
-            namedValues.push({value, info: valueInfo});
+            firstNamedValues.push(namedValue);
           }
+          namedValues.push(namedValue);
           if (valueInfo.type === 'concept_score' || valueInfo.type === 'semantic_similarity') {
             if ((value as number) > 0.5) {
               isShownSnippet = true;
@@ -132,7 +138,7 @@ export function getRenderSpans(
       isHighlightBolded: isLabeled,
       isShownSnippet,
       snippetScore: maxScore,
-      namedValues,
+      namedValues: firstNamedValues,
       paths: mergedSpan.paths,
       text: mergedSpan.text,
       snippetText: mergedSpan.text,