Added highlights for selected columns

Author: makaroni4

src/Visualizer/components/TableNode.tsx

@@ -2,7 +2,7 @@ import { useState, FC, useEffect } from "react";
 import { Handle, Position, NodeProps } from "reactflow";
 import { KeyIcon } from "../components";
 import { markdown } from "../helpers";
-import { isTableHighlighted, isColumnHighlighted } from "../helpers/tableHighlights";
+import { tableHighlightsPresent, isTableHighlighted, isColumnHighlighted } from "../helpers/tableHighlights";
 
 import "@reactflow/node-resizer/dist/style.css";
 
@@ -34,6 +34,8 @@ export const TableNode: FC<NodeProps> = ({ data }) => {
 
     if (isColumnHighlighted({ schema: data.schema, tableName: data.name, columnName })) {
       classes.push("column-name--highlighted")
+    } else if (tableHighlightsPresent()) {
+      classes.push("column-name--dimmed")
     }
 
     return classes.join(" ")
@@ -43,7 +45,7 @@ export const TableNode: FC<NodeProps> = ({ data }) => {
     <div
       className={`table ${isTableHighlighted({ schema: data.schema, tableName: data.name }) ? 'table--highlighted' : ''}`}>
       <div
-        style={{ backgroundColor: data.schemaColor }}
+        style={isTableHighlighted({ schema: data.schema, tableName: data.name }) ? {} : { backgroundColor: data.schemaColor }}
         className="table__name"
         onMouseEnter={() => {
           if(descriptionOnHoverActive) {

src/Visualizer/helpers/tableHighlights.ts

@@ -10,6 +10,10 @@ const highlights = (urlParams.get("highlights") || "").split(";").reduce((acc: {
   return acc;
 }, {} as { [key: string]: string[] });
 
+export const tableHighlightsPresent = () => {
+  return Object.keys(highlights).length > 0
+}
+
 export const isTableHighlighted = ({ schema, tableName }: { schema: string | undefined, tableName: string }) => {
   const fullTableName = schema ? `${schema}.${tableName}` : tableName
 

src/Visualizer/style/column-name.scss

@@ -62,10 +62,6 @@
 
       content: "";
     }
-
-    #{$root}--selected & {
-      display: block;
-    }
   }
 
   &__inner {
@@ -83,5 +79,25 @@
 
   &:hover {
     background-color: #EFEFEF;
+
+    opacity: 1;
+  }
+
+  &--highlighted {
+    border-color: #FADB5F;
+
+    background-color: #FADB5F;
+  }
+
+  &--dimmed {
+    opacity: 0.4;
+  }
+
+  &--selected {
+    #{$root}__description {
+      display: block;
+
+      opacity: 1;
+    }
   }
 }

src/Visualizer/style/table.scss

@@ -1,4 +1,6 @@
 .table {
+  $root: &;
+
   background-color: #FFF;
 
   &__name {
@@ -66,4 +68,17 @@
       display: block;
     }
   }
+
+  &--highlighted {
+    #{$root}__name {
+      background-color: #FADB5F;
+    }
+
+    #{$root}__columns {
+      border-color: #FADB5F;
+      border-style: dashed;
+      border-width: 2px;
+      border-top: 0;
+    }
+  }
 }