feat(vscode): allow users to turn off/on columns in graph

Author: benfdking

vscode/react/src/components/graph/ModelLineage.tsx

@@ -390,14 +390,8 @@ function ModelColumnLineage(): JSX.Element {
           showInteractive={false}
         >
           <SettingsControl
-            settings={{
-              showColumns: withColumns,
-            }}
-            onSettingChange={(setting, value) => {
-              if (setting === 'showColumns') {
-                setWithColumns(value)
-              }
-            }}
+            showColumns={withColumns}
+            onWithColumnsChange={setWithColumns}
           />
         </Controls>
         <Background

vscode/react/src/components/graph/ModelNode.tsx

@@ -141,7 +141,7 @@ export default function ModelNode({
   const isModelExternal = nodeType === EnumLineageNodeModelType.external
   const isModelSeed = nodeType === EnumLineageNodeModelType.seed
   const isModelUnknown = nodeType === EnumLineageNodeModelType.unknown
-  const showColumns = isArrayNotEmpty(columns) && isFalse(hasHighlightedNodes)
+  const showColumns = nodeData.withColumns && isArrayNotEmpty(columns) && isFalse(hasHighlightedNodes)
   const isActiveNode =
     selectedNodes.size > 0 || activeNodes.size > 0 || withConnected
       ? isSelected ||

vscode/react/src/components/graph/SettingsControl.tsx

@@ -5,15 +5,13 @@ import { CheckIcon } from '@heroicons/react/24/outline'
 import clsx from 'clsx'
 
 interface SettingsControlProps {
-  settings: {
-    showColumns: boolean
-  }
-  onSettingChange: (setting: string, value: boolean) => void
+  showColumns: boolean
+  onWithColumnsChange: (value: boolean) => void
 }
 
 export function SettingsControl({
-  settings,
-  onSettingChange,
+  showColumns,
+  onWithColumnsChange,
 }: SettingsControlProps): JSX.Element {
   return (
     <Menu as="div" className="relative">
@@ -29,7 +27,7 @@ export function SettingsControl({
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute bottom-full mb-2 right-0 w-56 origin-bottom-right divide-y divide-neutral-100 dark:divide-neutral-800 rounded-md bg-theme shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-50">
+        <Menu.Items className="absolute bottom-full mb-2 left-0 w-56 origin-bottom-left divide-y divide-neutral-100 dark:divide-neutral-800 rounded-md bg-theme shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-50">
           <div className="px-1 py-1">
             <Menu.Item>
               {({ active }) => (
@@ -40,10 +38,10 @@ export function SettingsControl({
                       ? 'bg-primary-10 text-primary-500'
                       : 'text-neutral-700 dark:text-neutral-300'
                   )}
-                  onClick={() => onSettingChange('showColumns', !settings.showColumns)}
+                  onClick={() => onWithColumnsChange(!showColumns)}
                 >
                   <span className="flex-1 text-left">Show Columns</span>
-                  {settings.showColumns && (
+                  {showColumns && (
                     <CheckIcon className="h-4 w-4 text-primary-500" aria-hidden="true" />
                   )}
                 </button>