watson-developer-cloud · dorianmiller · Nov 8, 2023 · Jun 13, 2023 · Jun 22, 2023 · Jul 10, 2023
@@ -10,8 +10,8 @@ import { SkeletonText } from 'carbon-components-react';
 import Section, { OnFieldClickFn } from '../Section/Section';
 import VirtualScroll from '../VirtualScroll/VirtualScroll';
 import { defaultTheme, Theme } from 'utils/theme';
-import { SectionType, ItemMap, HighlightWithMeta } from 'components/CIDocument/types';
-import { FacetInfoMap } from '../../../DocumentPreview/types';
+import { SectionType, ItemMap, TextHighlightWithMeta } from 'components/CIDocument/types';
+import { FacetInfoMap, initOverlapMeta, OverlapMeta } from '../../../DocumentPreview/types';
 import { getId as getLocationId } from 'utils/document/idUtils';
 
 const baseClassName = `${settings.prefix}--ci-doc-content`;
@@ -31,11 +31,19 @@ export interface CIDocumentContentProps {
   theme?: Theme;
   documentId?: string;
   onItemClick?: OnFieldClickFn;
-  combinedHighlights?: HighlightWithMeta[];
+  combinedHighlights?: TextHighlightWithMeta[];
   facetInfoMap?: FacetInfoMap;
+  overlapMeta?: OverlapMeta;
   activeColor?: string | null;
 }
 
+// Explicit control of elements to accomplish mouse interaction with overlap
+// Enrichment with highest z-index is content of overlap tooltip
+// Fields are transparent, now on-top of text, makes debug in browser inspect easier.
+const ZINDEX_BASE = 10;
+const ZINDEX_OVERLAP = 20;
+const ZINDEX_ACTIVE = 30;
+
 const CIDocumentContent: FC<CIDocumentContentProps> = ({
   className,
   sections = [],
@@ -53,6 +61,7 @@ const CIDocumentContent: FC<CIDocumentContentProps> = ({
   onItemClick = (): void => {},
   combinedHighlights,
   facetInfoMap,
+  overlapMeta = initOverlapMeta(),
   activeColor
 }) => {
   const virtualScrollRef = useRef<any>();
@@ -83,19 +92,20 @@ const CIDocumentContent: FC<CIDocumentContentProps> = ({
             <style>
               {createStyleRules(highlightedIds, [
                 backgroundColorRule(theme.highlightBackground),
-                // Set z-index to -1 in order to push non-active fields back
-                zIndexRule(-1)
+                zIndexRule(ZINDEX_BASE)
               ])}
             </style>
           )}
           {activeIds && activeIds.length > 0 && (
             <>
               <style>
-                {/*Set z-index to 0 to pull active element in front of overlapping fields */}
+                {/*Set z-index to pull active element in front of overlapping fields */}
                 {createStyleRules(activeIds, [
                   backgroundColorRule(theme.activeHighlightBackground),
                   outlineRule(activeColor || theme.highlightBackground),
-                  zIndexRule(0)
+                  zIndexRule(ZINDEX_ACTIVE),
+                  activeEnrichmentInOverlapRule(activeIds, overlapMeta),
+                  opacityRule(100)
                 ])}
               </style>
             </>
@@ -132,6 +142,7 @@ const CIDocumentContent: FC<CIDocumentContentProps> = ({
                   section={sections[index]}
                   onFieldClick={onItemClick}
                   facetInfoMap={facetInfoMap}
+                  overlapMeta={overlapMeta}
                 />
               )}
             </VirtualScroll>
@@ -143,16 +154,21 @@ const CIDocumentContent: FC<CIDocumentContentProps> = ({
 };
 
 function createStyleRules(idList: string[], rules: string[]): string {
+  // remove empty strings
   return idList
+    .filter(item => item.localeCompare('') !== 0)
     .map(id => `.${baseClassName} .field[data-field-id="${id}"] > *`)
     .join(',')
     .concat(`{${rules.join(';')}}`);
 }
 
-function highlightColoringFullArray(combinedHighlightsWithMeta: HighlightWithMeta[]) {
-  return combinedHighlightsWithMeta.map(highlightWithMeta => {
-    const locationId = getHighlightLocationId(highlightWithMeta);
-    const rules = `.${baseClassName} .field[data-field-id="${locationId}"] > * {background-color: ${highlightWithMeta.color}; border: 2px solid ${highlightWithMeta.color};}`;
+function highlightColoringFullArray(combinedHighlightsWithMeta: TextHighlightWithMeta[]) {
+  return combinedHighlightsWithMeta.map(textHighlightWithMeta => {
+    const locationId = getHighlightLocationId(textHighlightWithMeta);
+    const zIndexValue = textHighlightWithMeta.isOverlap ? ZINDEX_OVERLAP : ZINDEX_BASE;
+    const rules = `.${baseClassName} .field[data-field-id="${locationId}"] > * {background-color: ${
+      textHighlightWithMeta.color
+    }; border: 2px solid ${textHighlightWithMeta.color}; ${zIndexRule(zIndexValue)};}`;
     return rules;
   });
 }
@@ -165,6 +181,20 @@ function zIndexRule(value: number): string {
   return `z-index: ${value}`;
 }
 
+function activeEnrichmentInOverlapRule(activeIds: string[], overlapMeta: OverlapMeta): string {
+  // Case: Enrichment in overlap, tooltip should show the overlap info.
+  // Enrichment element is on top to visually draw the border, but the mouse event must pass through.
+  if (activeIds.length > 0 && overlapMeta.fieldIdWithOverlap.has(activeIds[0])) {
+    return 'pointer-events: none';
+  } else {
+    return '';
+  }
+}
+
+function opacityRule(value: number): string {
+  return `opacity: ${value}`;
+}
+
 function outlineRule(color: string): string {
   return `border: ${color} solid 2px`;
 }
@@ -184,11 +214,12 @@ function scrollToActiveItem(
   );
 }
 
-function getHighlightLocationId(highlightWithMeta: HighlightWithMeta): string {
+function getHighlightLocationId(textHighlightWithMeta: TextHighlightWithMeta): string {
   return getLocationId({
+    facetId: textHighlightWithMeta.facetId,
     location: {
-      begin: highlightWithMeta.begin,
-      end: highlightWithMeta.end
+      begin: textHighlightWithMeta.begin,
+      end: textHighlightWithMeta.end
     }
   });
 }

@@ -45,7 +45,7 @@ describe('<MetadataPane />', () => {
           text_normalized: '2008-12-22'
         }
       ],
-      metadataId: '2533_2549',
+      metadataId: 'DEFAULT_F_2533_2549',
       metadataType: 'effective_dates'
     });
   });

@@ -22,7 +22,7 @@ import { createFieldRects, findOffsetInDOM } from 'utils/document/documentUtils'
 import { clearNodeChildren } from 'utils/dom';
 import elementFromPoint from 'components/CIDocument/utils/elementFromPoint';
 import { SectionType, Field, Item } from 'components/CIDocument/types';
-import { FacetInfoMap } from '../../../DocumentPreview/types';
+import { FacetInfoMap, initOverlapMeta, OverlapMeta } from '../../../DocumentPreview/types';
 import { TooltipAction, TooltipEvent, OnTooltipShowFn } from '../../../TooltipHighlight/types';
 import { TooltipHighlight, calcToolTipContent } from '../../../TooltipHighlight/TooltipHighlight';
 
@@ -31,22 +31,22 @@ export type OnFieldClickFn = (field: Field) => void;
 const baseClassName = `${settings.prefix}--ci-doc-section`;
 
 interface SectionProps {
-  /**
-   * Section to display in this component
-   */
+  // Section to display in this component
   section: SectionType;
-  /**
-   * Function to call when a field is clicked
-   */
+  // Function to call when a field is clicked
   onFieldClick?: OnFieldClickFn;
-
-  /**
-   * Meta-data on facets
-   */
+  // Meta-data on facets
   facetInfoMap?: FacetInfoMap;
+  // Overlap information used by tooltip
+  overlapMeta?: OverlapMeta;
 }
 
-export const Section: FC<SectionProps> = ({ section, onFieldClick, facetInfoMap = {} }) => {
+export const Section: FC<SectionProps> = ({
+  section,
+  onFieldClick,
+  facetInfoMap = {},
+  overlapMeta = initOverlapMeta()
+}) => {
   const { html } = section;
 
   const [hoveredField, setHoveredField] = useState<HTMLElement | null>(null);
@@ -57,7 +57,13 @@ export const Section: FC<SectionProps> = ({ section, onFieldClick, facetInfoMap
 
   const createSectionFields = (): void => {
     try {
-      renderSectionFields(section, sectionNode.current, contentNode.current, fieldsNode.current);
+      renderSectionFields(
+        section,
+        sectionNode.current,
+        contentNode.current,
+        fieldsNode.current,
+        facetInfoMap
+      );
     } catch (err) {
       // eslint-disable-next-line no-console
       console.error('Failed to create section fields:', err);
@@ -100,7 +106,13 @@ export const Section: FC<SectionProps> = ({ section, onFieldClick, facetInfoMap
     <div
       className={cx(`${baseClassName}`, { hasTable: hasTable(html) })}
       ref={sectionNode}
-      onMouseMove={mouseMoveListener(hoveredField, setHoveredField, onTooltipAction, facetInfoMap)}
+      onMouseMove={mouseMoveListener(
+        hoveredField,
+        setHoveredField,
+        onTooltipAction,
+        facetInfoMap,
+        overlapMeta
+      )}
       onMouseLeave={mouseLeaveListener(hoveredField, setHoveredField, onTooltipAction)}
       onClick={mouseClickListener(onFieldClick)}
     >
@@ -120,7 +132,8 @@ function mouseMoveListener(
   hoveredField: HTMLElement | null,
   setHoveredField: Dispatch<SetStateAction<HTMLElement | null>>,
   onTooltipShow: OnTooltipShowFn,
-  facetInfoMap: FacetInfoMap
+  facetInfoMap: FacetInfoMap,
+  overlapMeta: OverlapMeta
 ) {
   return function _mouseMoveListener(event: MouseEvent): void {
     const fieldRect = elementFromPoint(
@@ -149,8 +162,16 @@ function mouseMoveListener(
       if (fieldNode) {
         fieldNode.classList.add('hover');
         const enrichValue = fieldNode.getAttribute('data-field-value') || '';
+        // In the case of overlap, data-field-value is used for Overlap ID
+        const enrichFieldId = fieldNode.getAttribute('data-field-value') || '';
         const enrichFacetId = fieldNode.getAttribute('data-field-type') || '';
-        const tooltipContent = calcToolTipContent(facetInfoMap, enrichFacetId, enrichValue);
+        const tooltipContent = calcToolTipContent(
+          facetInfoMap,
+          overlapMeta,
+          enrichFacetId,
+          enrichValue,
+          enrichFieldId
+        );
         const fieldNodeContent = fieldNode?.firstElementChild;
         onTooltipShow({
           ...{
@@ -209,7 +230,8 @@ function renderSectionFields(
   section: SectionType,
   sectionNode: HTMLElement | null,
   contentNode: HTMLElement | null,
-  fieldsNode: HTMLElement | null
+  fieldsNode: HTMLElement | null,
+  facetInfoMap: FacetInfoMap
 ): void {
   if (!sectionNode || !contentNode || !fieldsNode) {
     return;
@@ -243,12 +265,19 @@ function renderSectionFields(
 
       const offsets = findOffsetInDOM(contentNode, begin, end);
 
+      // Field ID
+      // 1. W/O  Facets: regular ID
+      // 2: With Facets: __type is same as facetId and is included in ID to distiguish overlap
+      // Note: FacetID defaults to {}, otherwise facets enabled
+      const fieldForId =
+        Object.keys(facetInfoMap).length === 0 ? field : { ...field, facetId: fieldType };
+
       createFieldRects({
         fragment,
         parentRect: sectionRect as DOMRect,
         fieldType,
         fieldValue,
-        fieldId: getId(field as unknown as Item),
+        fieldId: getId(fieldForId as unknown as Item),
         ...offsets
       });
     } catch (err) {

@@ -16,8 +16,13 @@ export interface Location {
 }
 
 // TODO better name
+// Some code-flow to Item use either __type or facetId
+// facetId: Used when facets with colors are defined
+// __type: Used when raw data from discovery query is processed
 export interface Item {
   id?: string;
+  __type?: string;
+  facetId?: string;
   location: Location;
 }
 
@@ -109,10 +114,10 @@ export type HighlightFacetMentions = {
   className?: string;
 };
 
-export type HighlightWithMeta = {
-  facetIds: string[];
-  mentions: HighlightFacetMentions[];
+export type TextHighlightWithMeta = {
   begin: number;
   end: number;
+  facetId: string;
   color: string;
+  isOverlap: boolean;
 };
@@ -1,6 +1,6 @@
 import { QueryResultPassage, QueryTableResult } from 'ibm-watson/discovery/v2';
 import { ProcessedDoc } from 'utils/document';
-import { Location } from 'utils/document/processDoc';
+import { Location } from '../../../types';
 import { getHighlightedTable } from '../tables';
 import { isTable } from '../typeUtils';
 

@@ -11,14 +11,14 @@ import { QueryResult, QueryResultPassage, QueryTableResult } from 'ibm-watson/di
 import DOMPurify from 'dompurify';
 import get from 'lodash/get';
 import flatMap from 'lodash/flatMap';
-import { processDoc, ProcessedDoc, ProcessedBbox, Location } from 'utils/document/processDoc';
+import { processDoc, ProcessedDoc, ProcessedBbox } from 'utils/document/processDoc';
 import { findMatchingBbox } from 'components/DocumentPreview/utils/box';
 import { findOffsetInDOM, createFieldRects } from 'utils/document/documentUtils';
 import { clearNodeChildren } from 'utils/dom';
 import { getTextMappings } from 'components/DocumentPreview/utils/documentData';
 import { getPassagePageInfo } from '../Highlight/passages';
 import { isPassage } from '../Highlight/typeUtils';
-import { QueryResultWithOptionalMetadata } from 'components/DocumentPreview/types';
+import { QueryResultWithOptionalMetadata, Location } from 'components/DocumentPreview/types';
 
 interface Props extends HTMLAttributes<HTMLElement> {
   /**