Function definition editor widget #11655
Conversation
Frizi
requested review from
farmaazon,
vitvakatu,
kazcw and
AdRiley
as code owners
🧪 Storybook is successfully deployed!📊 Dashboard:
|
| /** | ||
| * Find smallest index at which two arrays differ. Returns an index past the array (i.e. array length) when both arrays are equal. | ||
| */ | ||
| export function findDifferenceIndex<T>( |
There was a problem hiding this comment.
This could use some tests, like expect(findDifferenceIndex([null], [null])).toBe(1)
| margin: 4px 8px; | ||
| padding: 4px; | ||
|
|
||
| /* TODO */ |
There was a problem hiding this comment.
Oh. I completely forgot about it. I'm not sure what to do about it though at this point, since we don't have a known output type that would be used to color the node. I will just expand the comment here for now, explaining the issue.
There was a problem hiding this comment.
Actually ended up looking for defined group or output node's color, if available. I think this will be complete enough for current implementation.
| @@ -80,6 +72,7 @@ const innerInput = computed(() => { | |||
| * handling deletions of arguments and rewriting the applications to named as appropriate. | |||
| */ | |||
| function handleArgUpdate(update: WidgetUpdate): boolean { | |||
| console.log('handleArgUpdate', update) | |||
There was a problem hiding this comment.
Leftover logging (here and in other files)
| @@ -745,8 +745,8 @@ config.setToolbar( | |||
| overflow: hidden; | |||
| } | |||
| .TableVisualization > .ag-theme-alpine > :deep(.ag-root-wrapper.ag-layout-normal) { | |||
| border-radius: 0 0 var(--radius-default) var(--radius-default); | |||
| .TableVisualization:deep(.ag-root-wrapper) { | |||
There was a problem hiding this comment.
Does this still need a :deep selector?
There was a problem hiding this comment.
Yes, the .ag-root-wrapper is generated outside of vue's context, so it doesn't logically belong to a component. That makes :deep necessary.
There was a problem hiding this comment.
I meant the deep selector, :deep(.ag-root-wrapper). Not just the :deep pseudoclass part of the selector.
| @@ -12,9 +12,7 @@ export type WidgetComponent<T extends WidgetInput> = Component<WidgetProps<T>> | |||
|
|
|||
| export namespace WidgetInput { | |||
| /** Returns widget-input data for the given AST expression or token. */ | |||
There was a problem hiding this comment.
Docs are outdated, here and below
| ] as const satisfies TabButton[] | ||
| const isFullscreen = ref(false) | ||
|
|
||
| const mainMarkdownDocs = new Y.Doc().getText() // TODO |
|
|
||
| const props = defineProps<{ aiMode: boolean }>() | ||
|
|
||
| // type Tabs = (typeof tabButtons)[number]['tab'] |
| const width = toRef(persisted, 'graphRightDockWidth') | ||
|
|
||
| const cbVisible = ref(true) | ||
| const cbTab = ref('help') |
There was a problem hiding this comment.
The tab names seem to be magic strings, which risks bugs if we change the available tabs in the future.
Pull Request Description
Fixes #11406
Also refactored the right panel state into its own store, so it is less coupled with the graph editor.
The function definition widget tree displays the icon, name and all arguments. The name is editable, everything else right now is just read-only. The icons next to the arguments are just placeholders intended to be replaced with a "drag handle" icon.
Also fixed issues with missing rounded corners on the ag-grid widget.
