Skip to content

Commit 0cce527

Browse files
benfdkingbenfdking
committed
feat(vscode): allow users to turn off/on columns in graph
1 parent db38562 commit 0cce527

5 files changed

Lines changed: 66 additions & 28 deletions

File tree

‎vscode/react/src/components/graph/CogIcon.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import * as React from 'react'
2+
3+
/**
4+
* CogIcon as taken from https://heroicons.com/. Slightly modified to remove fill color.
5+
*
6+
* @param props - SVG props
7+
* @returns SVG element
8+
*/
9+
export function CogIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element {
10+
return (
11+
<svg
12+
xmlns="http://www.w3.org/2000/svg"
13+
aria-hidden="true"
14+
className="h-6 w-6"
15+
data-slot="icon"
16+
viewBox="0 0 24 24"
17+
{...props}
18+
>
19+
<path d="M17.004 10.407c.138.435-.216.842-.672.842h-3.465a.75.75 0 0 1-.65-.375l-1.732-3c-.229-.396-.053-.907.393-1.004a5.252 5.252 0 0 1 6.126 3.537ZM8.12 8.464c.307-.338.838-.235 1.066.16l1.732 3a.75.75 0 0 1 0 .75l-1.732 3c-.229.397-.76.5-1.067.161A5.23 5.23 0 0 1 6.75 12a5.23 5.23 0 0 1 1.37-3.536Zm2.758 8.666c-.447-.098-.623-.608-.394-1.004l1.733-3.002a.75.75 0 0 1 .65-.375h3.465c.457 0 .81.407.672.842a5.252 5.252 0 0 1-6.126 3.539Z" />
20+
<path
21+
fillRule="evenodd"
22+
d="M21 12.75a.75.75 0 1 0 0-1.5h-.783a8.22 8.22 0 0 0-.237-1.357l.734-.267a.75.75 0 1 0-.513-1.41l-.735.268a8.24 8.24 0 0 0-.689-1.192l.6-.503a.75.75 0 1 0-.964-1.149l-.6.504a8.3 8.3 0 0 0-1.054-.885l.391-.678a.75.75 0 1 0-1.299-.75l-.39.676a8.188 8.188 0 0 0-1.295-.47l.136-.77a.75.75 0 0 0-1.477-.26l-.136.77a8.36 8.36 0 0 0-1.377 0l-.136-.77a.75.75 0 1 0-1.477.26l.136.77c-.448.121-.88.28-1.294.47l-.39-.676a.75.75 0 0 0-1.3.75l.392.678a8.29 8.29 0 0 0-1.054.885l-.6-.504a.75.75 0 1 0-.965 1.149l.6.503a8.243 8.243 0 0 0-.689 1.192L3.8 8.216a.75.75 0 1 0-.513 1.41l.735.267a8.222 8.222 0 0 0-.238 1.356h-.783a.75.75 0 0 0 0 1.5h.783c.042.464.122.917.238 1.356l-.735.268a.75.75 0 0 0 .513 1.41l.735-.268c.197.417.428.816.69 1.191l-.6.504a.75.75 0 0 0 .963 1.15l.601-.505c.326.323.679.62 1.054.885l-.392.68a.75.75 0 0 0 1.3.75l.39-.679c.414.192.847.35 1.294.471l-.136.77a.75.75 0 0 0 1.477.261l.137-.772a8.332 8.332 0 0 0 1.376 0l.136.772a.75.75 0 1 0 1.477-.26l-.136-.771a8.19 8.19 0 0 0 1.294-.47l.391.677a.75.75 0 0 0 1.3-.75l-.393-.679a8.29 8.29 0 0 0 1.054-.885l.601.504a.75.75 0 0 0 .964-1.15l-.6-.503c.261-.375.492-.774.69-1.191l.735.267a.75.75 0 1 0 .512-1.41l-.734-.267c.115-.439.195-.892.237-1.356h.784Zm-2.657-3.06a6.744 6.744 0 0 0-1.19-2.053 6.784 6.784 0 0 0-1.82-1.51A6.705 6.705 0 0 0 12 5.25a6.8 6.8 0 0 0-1.225.11 6.7 6.7 0 0 0-2.15.793 6.784 6.784 0 0 0-2.952 3.489.76.76 0 0 1-.036.098A6.74 6.74 0 0 0 5.251 12a6.74 6.74 0 0 0 3.366 5.842l.009.005a6.704 6.704 0 0 0 2.18.798l.022.003a6.792 6.792 0 0 0 2.368-.004 6.704 6.704 0 0 0 2.205-.811 6.785 6.785 0 0 0 1.762-1.484l.009-.01.009-.01a6.743 6.743 0 0 0 1.18-2.066c.253-.707.39-1.469.39-2.263a6.74 6.74 0 0 0-.408-2.309Z"
23+
clipRule="evenodd"
24+
/>
25+
</svg>
26+
)
27+
}

‎vscode/react/src/components/graph/Graph.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ react-flow__attribution {
2929
box-shadow: none;
3030
border: var(--vscode-button-border);
3131
background: var(--vscode-button-background);
32+
color: var(--vscode-foreground);
3233
}
3334
.react-flow__controls-button:hover {
3435
background: var(--vscode-button-hoverBackground);

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

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ import { Popover } from '@headlessui/react'
3636
import ModelLineageDetails from './ModelLineageDetails'
3737
import { Divider } from '@/components/divider/Divider'
3838
import { type ModelLineageApiLineageModelNameGet200 } from '@/api/client'
39-
import { SettingsControl } from './SettingsControl'
39+
import { SettingsControl } from '@/components/graph/SettingsControl'
4040
import './Graph.css'
4141

4242
const WITH_COLUMNS_LIMIT = 30
@@ -390,14 +390,8 @@ function ModelColumnLineage(): JSX.Element {
390390
showInteractive={false}
391391
>
392392
<SettingsControl
393-
settings={{
394-
showColumns: withColumns,
395-
}}
396-
onSettingChange={(setting, value) => {
397-
if (setting === 'showColumns') {
398-
setWithColumns(value)
399-
}
400-
}}
393+
showColumns={withColumns}
394+
onWithColumnsChange={setWithColumns}
401395
/>
402396
</Controls>
403397
<Background

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ export default function ModelNode({
141141
const isModelExternal = nodeType === EnumLineageNodeModelType.external
142142
const isModelSeed = nodeType === EnumLineageNodeModelType.seed
143143
const isModelUnknown = nodeType === EnumLineageNodeModelType.unknown
144-
const showColumns = isArrayNotEmpty(columns) && isFalse(hasHighlightedNodes)
144+
const showColumns = nodeData.withColumns && isArrayNotEmpty(columns) && isFalse(hasHighlightedNodes)
145145
const isActiveNode =
146146
selectedNodes.size > 0 || activeNodes.size > 0 || withConnected
147147
? isSelected ||

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

Lines changed: 34 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,37 @@
1-
import { Fragment, useState } from 'react'
2-
import { Menu, Transition } from '@headlessui/react'
3-
import { CogIcon } from '@heroicons/react/24/solid'
1+
import { Fragment } from 'react'
2+
import {
3+
Menu,
4+
Button,
5+
Transition,
6+
MenuItems,
7+
MenuItem,
8+
} from '@headlessui/react'
49
import { CheckIcon } from '@heroicons/react/24/outline'
10+
import { CogIcon } from '@/components/graph/CogIcon'
511
import clsx from 'clsx'
612

713
interface SettingsControlProps {
8-
settings: {
9-
showColumns: boolean
10-
}
11-
onSettingChange: (setting: string, value: boolean) => void
14+
showColumns: boolean
15+
onWithColumnsChange: (value: boolean) => void
1216
}
1317

1418
export function SettingsControl({
15-
settings,
16-
onSettingChange,
19+
showColumns,
20+
onWithColumnsChange,
1721
}: SettingsControlProps): JSX.Element {
1822
return (
19-
<Menu as="div" className="relative">
20-
<Menu.Button className="react-flow__controls-button" title="Settings">
21-
<CogIcon className="h-3 w-3" aria-hidden="true" />
23+
<Menu
24+
as="div"
25+
className="relative"
26+
>
27+
<Menu.Button
28+
className="react-flow__controls-button"
29+
title="Settings"
30+
>
31+
<CogIcon
32+
className="h-3 w-3"
33+
aria-hidden="true"
34+
/>
2235
</Menu.Button>
2336
<Transition
2437
as={Fragment}
@@ -29,7 +42,7 @@ export function SettingsControl({
2942
leaveFrom="transform opacity-100 scale-100"
3043
leaveTo="transform opacity-0 scale-95"
3144
>
32-
<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">
45+
<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">
3346
<div className="px-1 py-1">
3447
<Menu.Item>
3548
{({ active }) => (
@@ -38,13 +51,16 @@ export function SettingsControl({
3851
'group flex w-full items-center rounded-md px-2 py-2 text-sm',
3952
active
4053
? 'bg-primary-10 text-primary-500'
41-
: 'text-neutral-700 dark:text-neutral-300'
54+
: 'text-neutral-700 dark:text-neutral-300',
4255
)}
43-
onClick={() => onSettingChange('showColumns', !settings.showColumns)}
56+
onClick={() => onWithColumnsChange(!showColumns)}
4457
>
4558
<span className="flex-1 text-left">Show Columns</span>
46-
{settings.showColumns && (
47-
<CheckIcon className="h-4 w-4 text-primary-500" aria-hidden="true" />
59+
{showColumns && (
60+
<CheckIcon
61+
className="h-4 w-4 text-primary-500"
62+
aria-hidden="true"
63+
/>
4864
)}
4965
</button>
5066
)}
@@ -54,4 +70,4 @@ export function SettingsControl({
5470
</Transition>
5571
</Menu>
5672
)
57-
}
73+
}

0 commit comments

Comments
 (0)