fix(dblm-ext): search: should highlight table border and selected column only

Author: herzadinata

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

@@ -51,6 +51,7 @@ const Column = ({
       relationalTables={relationalTables}
       offsetY={offsetY}
       tableName={tableName}
+      columnName={colName}
     >
       {(highlighted) => (
         <>

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

@@ -11,6 +11,7 @@ interface ColumnWrapperProps {
   tableName: string;
   relationalTables?: string[] | null;
   highlightColor: string;
+  columnName: string;
 }
 
 const ColumnWrapper = ({
@@ -19,8 +20,9 @@ const ColumnWrapper = ({
   tableName,
   relationalTables,
   highlightColor,
+  columnName,
 }: ColumnWrapperProps) => {
-  const { hoveredTableName } = useTablesInfo();
+  const { hoveredTableName, highlightedColumn } = useTablesInfo();
   const [hovered, setHovered] = useState(false);
   const tablePreferredWidth = useTableWidth();
 
@@ -36,6 +38,8 @@ const ColumnWrapper = ({
     hovered,
     tableName,
     hoveredTableName,
+    highlightedColumn,
+    columnName,
     relationalTables,
   );
 

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

@@ -32,7 +32,12 @@ const DiagramWrapper = ({ children }: DiagramWrapperProps) => {
     useCursorChanger("grabbing");
   const themeColors = useThemeColors();
   const stageRef = useRef<null | CoreStage>(null);
-  const { hoveredTableName, setHoveredTableName } = useTablesInfo();
+  const {
+    hoveredTableName,
+    setHoveredTableName,
+    highlightedColumn,
+    setHighlightedColumn,
+  } = useTablesInfo();
 
   // repositioning the stage only once
   const { scale: defaultStageScale, position: defaultStagePosition } =
@@ -105,9 +110,10 @@ const DiagramWrapper = ({ children }: DiagramWrapperProps) => {
   const handleStagePointerDown = (
     e: KonvaEventObject<MouseEvent | TouchEvent>,
   ) => {
-    if (hoveredTableName == null) return;
+    if (hoveredTableName == null && highlightedColumn == null) return;
     if (nodeBelongsToTable(e.target)) return;
     setHoveredTableName(null);
+    setHighlightedColumn(null);
   };
 
   const fitToView = () => {

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

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

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

@@ -17,12 +17,21 @@ interface TablesInfoProviderProps {
 
 const TablesInfoProvider = ({ children, tables }: TablesInfoProviderProps) => {
   const [hoveredTableName, setHoveredTableName] = useState<string | null>(null);
+  const [highlightedColumn, setHighlightedColumn] = useState<string | null>(
+    null,
+  );
   const { detailLevel } = useTableDetailLevel();
   const colsIndexes = computeColIndexes(tables, detailLevel);
 
   return (
     <TablesInfoContext.Provider
-      value={{ colsIndexes, hoveredTableName, setHoveredTableName }}
+      value={{
+        colsIndexes,
+        hoveredTableName,
+        setHoveredTableName,
+        highlightedColumn,
+        setHighlightedColumn,
+      }}
     >
       {children}
     </TablesInfoContext.Provider>

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

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

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

@@ -3,12 +3,27 @@ export const shouldHighLightCol = (
   hovered: boolean,
   tableName: string | null,
   hoveredTable: string | null,
+  highlightedColumn: string | null,
+  columnName: string | null,
   relationalTables?: string[] | null,
 ): boolean => {
   if (hovered) {
     return true;
   }
 
+  const columnKey =
+    tableName != null && columnName != null
+      ? `${tableName}.${columnName}`
+      : null;
+
+  if (
+    highlightedColumn != null &&
+    columnKey != null &&
+    highlightedColumn === columnKey
+  ) {
+    return true;
+  }
+
   if (hoveredTable === tableName && !!relationalTables) {
     return true;
   }