fix(dblm-ext): should highlight fields in relation ends only when line arrow clicked

Author: herzadinata

packages/json-table-schema-visualizer/src/components/Column/ColumnWrapper.tsx

@@ -22,7 +22,7 @@ const ColumnWrapper = ({
   highlightColor,
   columnName,
 }: ColumnWrapperProps) => {
-  const { hoveredTableName, highlightedColumn } = useTablesInfo();
+  const { hoveredTableName, highlightedColumns } = useTablesInfo();
   const [hovered, setHovered] = useState(false);
   const tablePreferredWidth = useTableWidth();
 
@@ -38,7 +38,7 @@ const ColumnWrapper = ({
     hovered,
     tableName,
     hoveredTableName,
-    highlightedColumn,
+    highlightedColumns,
     columnName,
     relationalTables,
   );

packages/json-table-schema-visualizer/src/components/DiagramViewer/DiagramWrapper.tsx

@@ -35,8 +35,8 @@ const DiagramWrapper = ({ children }: DiagramWrapperProps) => {
   const {
     hoveredTableName,
     setHoveredTableName,
-    highlightedColumn,
-    setHighlightedColumn,
+    highlightedColumns,
+    setHighlightedColumns,
   } = useTablesInfo();
 
   // repositioning the stage only once
@@ -110,10 +110,14 @@ const DiagramWrapper = ({ children }: DiagramWrapperProps) => {
   const handleStagePointerDown = (
     e: KonvaEventObject<MouseEvent | TouchEvent>,
   ) => {
-    if (hoveredTableName == null && highlightedColumn == null) return;
+    if (
+      hoveredTableName == null &&
+      (highlightedColumns == null || highlightedColumns.length === 0)
+    )
+      return;
     if (nodeBelongsToTable(e.target)) return;
     setHoveredTableName(null);
-    setHighlightedColumn(null);
+    setHighlightedColumns([]);
   };
 
   const fitToView = () => {

packages/json-table-schema-visualizer/src/components/RelationConnection/ConnectionPath.tsx

@@ -27,6 +27,8 @@ interface ConnectionPathProps {
   sourceTableName: string;
   targetTableName: string;
   relationOwner: string;
+  sourceFieldNames: string[];
+  targetFieldNames: string[];
 }
 
 const ARROW_ANGLE_OFFSET = 90;
@@ -39,10 +41,13 @@ const ConnectionPath = ({
   sourceTableName,
   targetTableName,
   relationOwner,
+  sourceFieldNames,
+  targetFieldNames,
 }: ConnectionPathProps) => {
   const themeColors = useThemeColors();
   const tablesInfo = useTablesInfo();
-  const { hoveredTableName, setHoveredTableName } = tablesInfo;
+  const { hoveredTableName, setHoveredTableName, setHighlightedColumns } =
+    tablesInfo;
   const sourceTableColors = useTableColor(relationOwner);
   const srcWidth = useTableWidthStoredValue(sourceTableName);
   const tgtWidth = useTableWidthStoredValue(targetTableName);
@@ -75,6 +80,23 @@ const ConnectionPath = ({
   const srcHeight = TABLE_HEADER_HEIGHT + COLUMN_HEIGHT * sourceFieldsCount;
   const tgtHeight = TABLE_HEADER_HEIGHT + COLUMN_HEIGHT * targetFieldsCount;
 
+  const relationColumnKeys = useMemo(() => {
+    const keys = new Set<string>();
+    const addKeys = (tableName: string, fields: string[]) => {
+      fields
+        .filter(
+          (fieldName) =>
+            typeof fieldName === "string" && fieldName.trim() !== "",
+        )
+        .forEach((fieldName) => {
+          keys.add(`${tableName}.${fieldName}`);
+        });
+    };
+    addKeys(sourceTableName, sourceFieldNames);
+    addKeys(targetTableName, targetFieldNames);
+    return Array.from(keys);
+  }, [sourceFieldNames, targetFieldNames, sourceTableName, targetTableName]);
+
   interface TableBounds {
     left: number;
     right: number;
@@ -270,6 +292,7 @@ const ConnectionPath = ({
   };
 
   const handleBtnClick = () => {
+    setHighlightedColumns(relationColumnKeys);
     // Recompute the intended target using the stored stage-position of the button
     const srcCoords = tableCoordsStore.getCoords(sourceTableName);
     const tgtCoords = tableCoordsStore.getCoords(targetTableName);
@@ -282,7 +305,7 @@ const ConnectionPath = ({
 
     if (targetToUse == null || targetToUse.length === 0) return;
     try {
-      setHoveredTableName(targetToUse);
+      setHoveredTableName(null);
     } catch (e) {
       // Ignore
     }

packages/json-table-schema-visualizer/src/components/RelationConnection/RelationConnection.tsx

@@ -40,6 +40,8 @@ const RelationConnection = ({ source, target }: RelationConnectionProps) => {
         sourceTableName={source.tableName}
         targetTableName={target.tableName}
         relationOwner={relationOwner}
+        sourceFieldNames={source.fieldNames ?? []}
+        targetFieldNames={target.fieldNames ?? []}
       />
     </>
   );

packages/json-table-schema-visualizer/src/components/Search/Search.tsx

@@ -21,11 +21,11 @@ interface SearchProps {
 const Search = ({ tables }: SearchProps) => {
   const [search, setSearch] = useState("");
   const [isOpen, setIsOpen] = useState(false);
-  const { setHoveredTableName, setHighlightedColumn } = useTablesInfo();
+  const { setHoveredTableName, setHighlightedColumns } = useTablesInfo();
   const dropdownRef = useRef<HTMLDivElement>(null);
 
   const searchResults = useMemo(() => {
-    if (search === "") return [];
+    if (search.length < 2) return [];
 
     const results: SearchResult[] = [];
     const searchLower = search.toLowerCase();
@@ -58,9 +58,9 @@ const Search = ({ tables }: SearchProps) => {
   const handleSelect = (result: SearchResult) => {
     setHoveredTableName(null);
     if (result.type === "column") {
-      setHighlightedColumn(`${result.tableName}.${result.name}`);
+      setHighlightedColumns([`${result.tableName}.${result.name}`]);
     } else {
-      setHighlightedColumn(null);
+      setHighlightedColumns([]);
     }
     // Center the diagram on the selected table and ask the table to highlight itself
     eventEmitter.emit("table:center", { tableName: result.tableName });

packages/json-table-schema-visualizer/src/providers/TablesInfoProvider.tsx

@@ -17,9 +17,7 @@ interface TablesInfoProviderProps {
 
 const TablesInfoProvider = ({ children, tables }: TablesInfoProviderProps) => {
   const [hoveredTableName, setHoveredTableName] = useState<string | null>(null);
-  const [highlightedColumn, setHighlightedColumn] = useState<string | null>(
-    null,
-  );
+  const [highlightedColumns, setHighlightedColumns] = useState<string[]>([]);
   const { detailLevel } = useTableDetailLevel();
   const colsIndexes = computeColIndexes(tables, detailLevel);
 
@@ -29,8 +27,8 @@ const TablesInfoProvider = ({ children, tables }: TablesInfoProviderProps) => {
         colsIndexes,
         hoveredTableName,
         setHoveredTableName,
-        highlightedColumn,
-        setHighlightedColumn,
+        highlightedColumns,
+        setHighlightedColumns,
       }}
     >
       {children}

packages/json-table-schema-visualizer/src/types/tablesInfoProviderValue.ts

@@ -4,6 +4,6 @@ export interface TablesInfoProviderValue {
   colsIndexes: ColsIndexesMap;
   hoveredTableName: string | null;
   setHoveredTableName: (tableName: string | null) => void;
-  highlightedColumn: string | null;
-  setHighlightedColumn: (columnKey: string | null) => void;
+  highlightedColumns: string[];
+  setHighlightedColumns: (columnKeys: string[]) => void;
 }

packages/json-table-schema-visualizer/src/utils/shouldHighLightCol.ts

@@ -3,7 +3,7 @@ export const shouldHighLightCol = (
   hovered: boolean,
   tableName: string | null,
   hoveredTable: string | null,
-  highlightedColumn: string | null,
+  highlightedColumns: string[],
   columnName: string | null,
   relationalTables?: string[] | null,
 ): boolean => {
@@ -17,13 +17,19 @@ export const shouldHighLightCol = (
       : null;
 
   if (
-    highlightedColumn != null &&
     columnKey != null &&
-    highlightedColumn === columnKey
+    highlightedColumns?.some((key) => key === columnKey)
   ) {
     return true;
   }
 
+  const hasExplicitHighlights =
+    Array.isArray(highlightedColumns) && highlightedColumns.length > 0;
+
+  if (hasExplicitHighlights && hoveredTable == null) {
+    return false;
+  }
+
   if (hoveredTable === tableName && !!relationalTables) {
     return true;
   }