feat: add index based highlighting

harikakondur · harikakondur · commit ac5b4bca8db2 · 2026-04-12T23:51:05.000-06:00
diff --git a/apps/google-docs/src/locations/Page/components/mainpage/ModalOrchestrator.tsx b/apps/google-docs/src/locations/Page/components/mainpage/ModalOrchestrator.tsx
@@ -172,6 +172,7 @@ export const ModalOrchestrator = forwardRef<ModalOrchestratorHandle, ModalOrches
         return;
       }
 
+      setFlowStep(null);
       onPreviewReady(workflowRun.googleDocPayload);
     };
 
diff --git a/apps/google-docs/src/locations/Page/components/review/DocumentOutline.tsx b/apps/google-docs/src/locations/Page/components/review/DocumentOutline.tsx
@@ -28,6 +28,12 @@ import type {
   NormalizedDocumentTable,
   NormalizedDocumentTablePart,
 } from '@types';
+import {
+  isBlockImageSourceRef,
+  isBlockSourceRef,
+  isTableImageSourceRef,
+  isTextSourceRef,
+} from '@types';
 import { FileTextIcon } from '@contentful/f36-icons';
 import { MappingCard, type MappingCardData } from './MappingCard';
 import { getAnchorIdForSourceRef, resolveMarkerOffsets } from './mappingCardPositioning';
@@ -95,11 +101,22 @@ function buildUsageIndexes(entryBlockGraph: EntryBlockGraph): {
           sourceRef,
         };
 
-        if (sourceRef.kind === 'blockText' || sourceRef.kind === 'blockImage') {
+        if (isBlockSourceRef(sourceRef)) {
           blockUsage[sourceRef.blockId] = [...(blockUsage[sourceRef.blockId] ?? []), usage];
           return;
         }
 
+        if (
+          !(
+            'tableId' in sourceRef &&
+            'rowId' in sourceRef &&
+            'cellId' in sourceRef &&
+            'partId' in sourceRef
+          )
+        ) {
+          return;
+        }
+
         const tablePartKey = [
           sourceRef.tableId,
           sourceRef.rowId,
@@ -134,20 +151,18 @@ function buildTextSegments(
   flattenedRuns: NormalizedDocumentFlattenedRun[],
   usage: Array<{ sourceRef: EntryBlockGraphSourceRef; mappingKey: string }>
 ): TextSegment[] {
-  console.log('flattenedRuns', flattenedRuns);
   if (!flattenedRuns.length) return [];
 
   const textUsage = usage.filter(
     (
       usageItem
     ): usageItem is {
-      sourceRef: Extract<EntryBlockGraphSourceRef, { kind: 'blockText' | 'tableText' }>;
+      sourceRef: isTextSourceRef;
       mappingKey: string;
-    } => usageItem.sourceRef.kind === 'blockText' || usageItem.sourceRef.kind === 'tableText'
+    } => isTextSourceRef(usageItem.sourceRef)
   );
 
-  const fullText = flattenedRuns.map((run) => run.text).join('');
-  const boundaries = new Set<number>([0, fullText.length]);
+  const boundaries = new Set<number>();
   flattenedRuns.forEach((run) => {
     boundaries.add(run.start);
     boundaries.add(run.end);
@@ -165,12 +180,16 @@ function buildTextSegments(
       return [];
     }
 
-    const text = fullText.slice(start, end);
+    const run = flattenedRuns.find((candidate) => start >= candidate.start && end <= candidate.end);
+    if (!run) {
+      return [];
+    }
+
+    const text = run.text.slice(start - run.start, end - run.start);
     if (!text) {
       return [];
     }
 
-    const run = flattenedRuns.find((r) => start >= r.start && end <= r.end);
     const mappingKeys = textUsage
       .filter(({ sourceRef }) => start >= sourceRef.start && end <= sourceRef.end)
       .map(({ mappingKey }) => mappingKey);
@@ -441,7 +460,6 @@ export const DocumentOutline = ({ payload, showChrome = true, onBack }: Document
       sourceRef: usage.sourceRef,
       mappingKey: getMappingCardKey(segmentId, usage),
     }));
-    console.log(block);
     const textSegments = buildTextSegments(block.flattenedTextRuns, textUsage);
     const listItemPresentation = block.type === 'listItem' ? listItemPresentations[block.id] : null;
     const setHoveredMappings = (mappingKeys: string[]) => setHoveredMappingKeys(mappingKeys);
@@ -495,12 +513,12 @@ export const DocumentOutline = ({ payload, showChrome = true, onBack }: Document
           const image = imageById[imageId];
           if (!image) return null;
           const highlighted = visibleRefs.some(
-            (ref) => ref.kind === 'blockImage' && ref.imageId === imageId
+            (ref) => isBlockImageSourceRef(ref) && ref.imageId === imageId
           );
           const mappingKeys = visibleUsage
             .filter(
               (usage) =>
-                usage.sourceRef.kind === 'blockImage' && usage.sourceRef.imageId === imageId
+                isBlockImageSourceRef(usage.sourceRef) && usage.sourceRef.imageId === imageId
             )
             .map((usage) => getMappingCardKey(segmentId, usage));
           const hovered = isMappingHovered(mappingKeys);
@@ -548,9 +566,9 @@ export const DocumentOutline = ({ payload, showChrome = true, onBack }: Document
 
     if (part.type === 'image') {
       const image = imageById[part.imageId];
-      const highlighted = visibleRefs.some((ref) => ref.kind === 'tableImage');
+      const highlighted = visibleRefs.some((ref) => isTableImageSourceRef(ref));
       const mappingKeys = visibleUsage
-        .filter((usage) => usage.sourceRef.kind === 'tableImage')
+        .filter((usage) => isTableImageSourceRef(usage.sourceRef))
         .map((usage) => getMappingCardKey(segmentId, usage));
       const hovered = isMappingHovered(mappingKeys);
 
diff --git a/apps/google-docs/src/locations/Page/components/review/mappingCardPositioning.ts b/apps/google-docs/src/locations/Page/components/review/mappingCardPositioning.ts
@@ -1,9 +1,9 @@
-import type { EntryBlockGraphSourceRef } from '@types';
+import { isBlockSourceRef, type EntryBlockGraphSourceRef } from '@types';
 
 const DEFAULT_CARD_GAP = 8;
 
 export const getAnchorIdForSourceRef = (sourceRef: EntryBlockGraphSourceRef): string =>
-  sourceRef.kind === 'blockText' || sourceRef.kind === 'blockImage'
+  isBlockSourceRef(sourceRef)
     ? `block:${sourceRef.blockId}`
     : `row:${sourceRef.tableId}:${sourceRef.rowId}`;
 
diff --git a/apps/google-docs/src/types/entryBlockGraph.ts b/apps/google-docs/src/types/entryBlockGraph.ts
@@ -1,42 +1,92 @@
 import type { NormalizedDocumentFlattenedRun } from './normalizedDocument';
 
-export type EntryBlockGraphTextSourceRef =
-  | {
-      kind: 'blockText';
-      blockId: string;
-      start: number;
-      end: number;
-      flattenedRuns: NormalizedDocumentFlattenedRun[];
-    }
-  | {
-      kind: 'tableText';
-      tableId: string;
-      rowId: string;
-      cellId: string;
-      partId: string;
-      start: number;
-      end: number;
-      flattenedRuns: NormalizedDocumentFlattenedRun[];
-    };
-
-export type EntryBlockGraphImageSourceRef =
-  | {
-      kind: 'blockImage';
-      blockId: string;
-      imageId: string;
-    }
-  | {
-      kind: 'tableImage';
-      tableId: string;
-      rowId: string;
-      cellId: string;
-      partId: string;
-      imageId: string;
-    };
-
-export type EntryBlockGraphSourceRef = EntryBlockGraphTextSourceRef | EntryBlockGraphImageSourceRef;
-
-export interface EntryBlockGraphFieldMapping {
+interface TextSourceRefBase {
+  start: number;
+  end: number;
+  flattenedRuns: NormalizedDocumentFlattenedRun[];
+  kind?: 'blockText' | 'tableText';
+  type?: string;
+}
+
+interface ImageSourceRefBase {
+  imageId: string;
+  kind?: 'blockImage' | 'tableImage';
+  type?: string;
+}
+
+export type BlockTextSourceRef = TextSourceRefBase & {
+  blockId: string;
+};
+
+export type TableTextSourceRef = TextSourceRefBase & {
+  tableId: string;
+  rowId: string;
+  cellId: string;
+  partId: string;
+};
+
+export type isTextSourceRef = BlockTextSourceRef | TableTextSourceRef;
+
+export type BlockImageSourceRef = ImageSourceRefBase & {
+  blockId: string;
+};
+
+export type TableImageSourceRef = ImageSourceRefBase & {
+  tableId: string;
+  rowId: string;
+  cellId: string;
+  partId: string;
+};
+
+export type ImageSourceRef = BlockImageSourceRef | TableImageSourceRef;
+
+export type EntryBlockGraphSourceRef = isTextSourceRef | ImageSourceRef;
+
+export const isTextSourceRef = (
+  sourceRef: EntryBlockGraphSourceRef
+): sourceRef is isTextSourceRef => {
+  return 'start' in sourceRef && 'end' in sourceRef && 'flattenedRuns' in sourceRef;
+};
+
+export const isBlockSourceRef = (
+  sourceRef: EntryBlockGraphSourceRef
+): sourceRef is BlockTextSourceRef | BlockImageSourceRef => {
+  return 'blockId' in sourceRef;
+};
+
+export const isTableSourceRef = (
+  sourceRef: EntryBlockGraphSourceRef
+): sourceRef is TableTextSourceRef | TableImageSourceRef => {
+  return (
+    'tableId' in sourceRef && 'rowId' in sourceRef && 'cellId' in sourceRef && 'partId' in sourceRef
+  );
+};
+
+export const isEntryBlockGraphBlockTextSourceRef = (
+  sourceRef: EntryBlockGraphSourceRef
+): sourceRef is BlockTextSourceRef => {
+  return isBlockSourceRef(sourceRef) && isTextSourceRef(sourceRef);
+};
+
+export const isTableTextSourceRef = (
+  sourceRef: EntryBlockGraphSourceRef
+): sourceRef is TableTextSourceRef => {
+  return isTableSourceRef(sourceRef) && isTextSourceRef(sourceRef);
+};
+
+export const isBlockImageSourceRef = (
+  sourceRef: EntryBlockGraphSourceRef
+): sourceRef is BlockImageSourceRef => {
+  return isBlockSourceRef(sourceRef) && 'imageId' in sourceRef;
+};
+
+export const isTableImageSourceRef = (
+  sourceRef: EntryBlockGraphSourceRef
+): sourceRef is TableImageSourceRef => {
+  return isTableSourceRef(sourceRef) && 'imageId' in sourceRef;
+};
+
+export interface FieldMapping {
   fieldId: string;
   fieldType: string;
   sourceRefs: EntryBlockGraphSourceRef[];
@@ -48,7 +98,7 @@ export interface EntryBlockGraphFieldMapping {
 export interface EntryBlockGraphEntry {
   contentTypeId: string;
   tempId?: string;
-  fieldMappings: EntryBlockGraphFieldMapping[];
+  fieldMappings: FieldMapping[];
 }
 
 export interface EntryBlockGraph {
diff --git a/apps/google-docs/test/locations/Page/Page.spec.tsx b/apps/google-docs/test/locations/Page/Page.spec.tsx
@@ -199,7 +199,11 @@ describe('Page component', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Mock from fixture' }));
 
     await waitFor(() => {
-      expect(screen.getByText('Review document "NRF Event Playbook"')).toBeTruthy();
+      expect(
+        screen.getByText(
+          'Review document "Pinterest Business Site Brief_Pinterest Top of Search ads"'
+        )
+      ).toBeTruthy();
       expect(screen.getByText('Mock fixture review')).toBeTruthy();
       expect(screen.queryByRole('heading', { name: 'Drive Integration' })).toBeNull();
     });
diff --git a/apps/google-docs/test/locations/Page/components/review/DocumentOutline.spec.tsx b/apps/google-docs/test/locations/Page/components/review/DocumentOutline.spec.tsx
@@ -318,6 +318,28 @@ describe('DocumentOutline', () => {
     expect(screen.getByText('paragraph')).toBeTruthy();
   });
 
+  it('renders mapping cards and highlights for block refs from the API shape', () => {
+    const fixture = buildFixture();
+
+    fixture.entryBlockGraph.entries[0].fieldMappings[0].sourceRefs = [
+      {
+        type: 'paragraph',
+        blockId: 'block-1',
+        start: 0,
+        end: 5,
+        flattenedRuns: [{ text: 'Body ', start: 0, end: 5, styles: {} }],
+      } as (typeof fixture.entryBlockGraph.entries)[number]['fieldMappings'][number]['sourceRefs'][number],
+    ];
+
+    render(<DocumentOutline payload={fixture} onBack={vi.fn()} />);
+
+    expect(screen.getByTestId('mapping-card-block-1-0-body')).toBeTruthy();
+    expect(screen.getByTestId('block-segment-block-1-0')).toHaveAttribute(
+      'data-highlighted',
+      'true'
+    );
+  });
+
   it('renders mixed table cell text and image highlights independently', () => {
     render(<DocumentOutline payload={buildFixture()} onBack={vi.fn()} />);
 
@@ -340,6 +362,42 @@ describe('DocumentOutline', () => {
     );
   });
 
+  it('highlights mapped offsets using flattened run coordinates', () => {
+    const fixture = buildFixture();
+
+    fixture.normalizedDocument.tables[0].rows[0].cells[1].parts[2] = {
+      id: 'table-0-row-0-cell-1-part-2',
+      type: 'text',
+      textRuns: [{ text: 'NoYes', styles: {} }],
+      flattenedTextRuns: [
+        { text: 'No', start: 0, end: 2, styles: {} },
+        { text: 'Yes', start: 6, end: 9, styles: {} },
+      ],
+    };
+    fixture.entryBlockGraph.entries[0].fieldMappings[2].sourceRefs = [
+      {
+        type: 'tableText',
+        tableId: 'table-0',
+        rowId: 'table-0-row-0',
+        cellId: 'table-0-row-0-cell-1',
+        partId: 'table-0-row-0-cell-1-part-2',
+        start: 6,
+        end: 9,
+        flattenedRuns: [{ text: 'Yes', start: 6, end: 9, styles: {} }],
+      } as (typeof fixture.entryBlockGraph.entries)[number]['fieldMappings'][number]['sourceRefs'][number],
+    ];
+
+    render(<DocumentOutline payload={fixture} onBack={vi.fn()} />);
+
+    expect(
+      screen.getByTestId('table-text-segment-table-0-row-0-cell-1-part-2-1')
+    ).toHaveTextContent('Yes');
+    expect(screen.getByTestId('table-text-segment-table-0-row-0-cell-1-part-2-1')).toHaveAttribute(
+      'data-highlighted',
+      'true'
+    );
+  });
+
   it('syncs hover styling between mapping cards and their highlights', () => {
     render(<DocumentOutline payload={buildFixture()} onBack={vi.fn()} />);
 
diff --git a/apps/google-docs/test/locations/Page/components/review/mappingCardPositioning.spec.ts b/apps/google-docs/test/locations/Page/components/review/mappingCardPositioning.spec.ts
@@ -9,12 +9,12 @@ describe('mappingCardPositioning', () => {
   it('derives block and table anchors from source refs', () => {
     expect(
       getAnchorIdForSourceRef({
-        kind: 'blockText',
+        type: 'paragraph',
         blockId: 'block-1',
         start: 0,
         end: 5,
         flattenedRuns: [],
-      })
+      } as Parameters<typeof getAnchorIdForSourceRef>[0])
     ).toBe('block:block-1');
 
     expect(

Original file line number	Diff line number	Diff line change
`@@ -172,6 +172,7 @@ export const ModalOrchestrator = forwardRef<ModalOrchestratorHandle, ModalOrches`
`172`	`172`	`return;`
`173`	`173`	`}`
`174`	`174`
	`175`	`+ setFlowStep(null);`
`175`	`176`	`onPreviewReady(workflowRun.googleDocPayload);`
`176`	`177`	`};`
`177`	`178`