From f9c75c95ce6ebe7d0ec65f1557fda618481fd6ce Mon Sep 17 00:00:00 2001 From: Ruben Fiszel Date: Mon, 23 Oct 2023 15:08:31 +0200 Subject: [PATCH] fix circular dependencies frontend --- .../src/lib/components/FlowBuilder.svelte | 5 +- .../copilot/FlowCopilotDrawer.svelte | 6 +- frontend/src/lib/components/copilot/flow.ts | 6 +- .../flows/pickers/PickHubScript.svelte | 8 +- .../svelvet/collapsible/controllers/util.ts | 136 -------- .../svelvet/collapsible/models/Collapsible.ts | 26 -- .../graph/svelvet/collapsible/types/types.ts | 8 - .../container/controllers/middleware.ts | 16 +- .../svelvet/container/views/GraphView.svelte | 2 +- .../svelvet/container/views/Svelvet.svelte | 9 +- .../graph/svelvet/edges/models/Edge.ts | 2 +- .../svelvet/edges/views/Edges/BaseEdge.svelte | 2 +- .../edges/views/Edges/SimpleBezierEdge.svelte | 2 +- .../edges/views/Edges/SmoothStepEdge.svelte | 319 ++++++++---------- .../graph/svelvet/nodes/views/Node.svelte | 2 +- .../svelvet/store/controllers/storeApi.ts | 13 +- .../svelvet/store/controllers/userApi.ts | 2 +- .../graph/svelvet/store/models/store.ts | 4 + .../graph/svelvet/store/types/types.ts | 3 - .../components/graph/svelvet/types/types.ts | 2 +- 20 files changed, 178 insertions(+), 395 deletions(-) delete mode 100644 frontend/src/lib/components/graph/svelvet/collapsible/controllers/util.ts delete mode 100644 frontend/src/lib/components/graph/svelvet/collapsible/models/Collapsible.ts delete mode 100644 frontend/src/lib/components/graph/svelvet/collapsible/types/types.ts diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte index 38bc2322eb..b332d1d8c7 100644 --- a/frontend/src/lib/components/FlowBuilder.svelte +++ b/frontend/src/lib/components/FlowBuilder.svelte @@ -7,7 +7,8 @@ DraftService, type PathScript, ScriptService, - Script + Script, + type HubScriptKind } from '$lib/gen' import { initHistory, push, redo, undo } from '$lib/history' import { @@ -413,7 +414,7 @@ $copilotModulesStore[idx].hubCompletions = scripts as { path: string summary: string - kind: string + kind: HubScriptKind app: string ask_id: number }[] diff --git a/frontend/src/lib/components/copilot/FlowCopilotDrawer.svelte b/frontend/src/lib/components/copilot/FlowCopilotDrawer.svelte index 8c56b05c95..a4330c752b 100644 --- a/frontend/src/lib/components/copilot/FlowCopilotDrawer.svelte +++ b/frontend/src/lib/components/copilot/FlowCopilotDrawer.svelte @@ -129,7 +129,7 @@ {#if copilotModule.source === 'hub' && copilotModule.selectedCompletion && copilotModule.selectedCompletion?.kind !== 'script'} {capitalize(copilotModule.selectedCompletion.kind)}{capitalize(copilotModule.selectedCompletion.kind.toString())} {/if} @@ -254,7 +254,9 @@ {#if item.kind !== 'script'} - {capitalize(item.kind)} + {capitalize(item.kind.toString())} {/if} diff --git a/frontend/src/lib/components/copilot/flow.ts b/frontend/src/lib/components/copilot/flow.ts index 4d1ef9a36a..6b5067a53d 100644 --- a/frontend/src/lib/components/copilot/flow.ts +++ b/frontend/src/lib/components/copilot/flow.ts @@ -1,4 +1,4 @@ -import type { Script, FlowModule } from '$lib/gen' +import type { Script, FlowModule, HubScriptKind } from '$lib/gen' import { addResourceTypes, deltaCodeCompletion, getNonStreamingCompletion } from './lib' import type { Writable } from 'svelte/store' import type Editor from '../Editor.svelte' @@ -15,7 +15,7 @@ export type FlowCopilotModule = { hubCompletions: { path: string summary: string - kind: string + kind: HubScriptKind, app: string ask_id: number }[] @@ -23,7 +23,7 @@ export type FlowCopilotModule = { | { path: string summary: string - kind: string + kind: HubScriptKind app: string ask_id: number } diff --git a/frontend/src/lib/components/flows/pickers/PickHubScript.svelte b/frontend/src/lib/components/flows/pickers/PickHubScript.svelte index 7d2177d723..7bf3694065 100644 --- a/frontend/src/lib/components/flows/pickers/PickHubScript.svelte +++ b/frontend/src/lib/components/flows/pickers/PickHubScript.svelte @@ -5,10 +5,10 @@ import NoItemFound from '$lib/components/home/NoItemFound.svelte' import { APP_TO_ICON_COMPONENT } from '$lib/components/icons' import ListFilters from '$lib/components/home/ListFilters.svelte' - import { IntegrationService, ScriptService } from '$lib/gen' + import { IntegrationService, ScriptService, type HubScriptKind } from '$lib/gen' import { Loader2 } from 'lucide-svelte' - export let kind: 'script' | 'trigger' | 'approval' | 'failure' = 'script' + export let kind: HubScriptKind & string = 'script' export let filter = '' export let syncQuery = false @@ -25,7 +25,7 @@ version_id: number ask_id: number app: string - kind: typeof kind + kind: HubScriptKind }[] = [] let allApps: string[] = [] @@ -89,7 +89,7 @@ id: number ask_id: number app: string - kind: typeof kind + kind: HubScriptKind }) => ({ ...x, path: `hub/${x.version_id}/${x.app}/${x.summary.toLowerCase().replaceAll(/\s+/g, '_')}`, diff --git a/frontend/src/lib/components/graph/svelvet/collapsible/controllers/util.ts b/frontend/src/lib/components/graph/svelvet/collapsible/controllers/util.ts deleted file mode 100644 index b001540c44..0000000000 --- a/frontend/src/lib/components/graph/svelvet/collapsible/controllers/util.ts +++ /dev/null @@ -1,136 +0,0 @@ -import type { EdgeType, NodeType, ResizeNodeType, StoreType } from '../../store/types/types' -import type { CollapsibleType } from '../types/types' -import { get } from 'svelte/store' -import type { AnchorType } from '../../edges/types/types' -import { getAnchorById } from '../../edges/controllers/util' -import { getAnchors } from '../../edges/controllers/util' - - - - -// Given a nodeId, find ids of all connecting target nodes -function findTargets(store: StoreType, nodeId: string): string[] { - // get source anchors on the node - const anchors = getAnchors(store, { - nodeId: nodeId, - sourceOrTarget: 'source' - }) - - // get target anchors on other node, and record the node id - const targetNodeIds: string[] = [] - for (const anchor of anchors) { - const targetAnchorId = anchor.getOtherAnchorId() - const targetAnchor = getAnchorById(store, targetAnchorId) - targetNodeIds.push(targetAnchor.nodeId) - } - return targetNodeIds -} - -// traverses tree and increments hideCount -function traverseAndIncrement( - store: StoreType, - nodeId: string, - operation: 'increment' | 'decrement' -) { - const collapsibles = get(store.collapsibleStore) - recursiveTraverse(nodeId) - store.collapsibleStore.set(collapsibles) - - function recursiveTraverse(nId: string) { - for (const collapsible of collapsibles) { - if (collapsible.nodeId === nId) { - if (operation === 'increment') collapsible.hideCount++ - else collapsible.hideCount-- - const targetIds = findTargets(store, nId) - for (const targetId of targetIds) { - recursiveTraverse(targetId) - } - } - } - } -} - -function collapse(store: StoreType, nodeId: string) { - const targetNodeIds = findTargets(store, nodeId) - for (const targetNodeId of targetNodeIds) traverseAndIncrement(store, targetNodeId, 'increment') -} -function expand(store: StoreType, nodeId: string) { - const targetNodeIds = findTargets(store, nodeId) - for (const targetNodeId of targetNodeIds) traverseAndIncrement(store, targetNodeId, 'decrement') -} - -export function toggleExpandAndCollapse(store: StoreType, nodeId: string) { - const collapsibles = getCollapsibles(store, { nodeId: nodeId }) - if (collapsibles.length === 0) return // when the collapsible feature is disabled, there will be no collapbsible objects - if (collapsibles.length > 1) throw 'there should only be one collapsible object per node' - const collapsible = collapsibles[0] - if (collapsible.state === 'expanded') collapse(store, nodeId) - else expand(store, nodeId) - store.collapsibleStore.update((arr) => { - for (const c of arr) if (c.id === collapsible.id) c.toggleState() - return [...arr] - }) -} - -export function getCollapsibles(store: StoreType, filter?: { [key: string]: any }) { - let collapsibles = Object.values(get(store.collapsibleStore)) - // filter the array of anchors for elements that match filter - // Example: if filter = {sourceOrTarget: 'source', positionX: 35} then we will - //return all anchors with sourceOrTarget = source AND poxitionX = 35 - if (filter !== undefined) { - collapsibles = collapsibles.filter((collapsible) => { - for (let filterKey in filter) { - const filterValue = filter[filterKey] - if (collapsible[filterKey as keyof CollapsibleType] !== filterValue) return false - } - return true - }) - } - // return list of anchors - return collapsibles -} - -/* - This function is responsible for filtering nodes should be displayed based on Collapsible. - It also filters node-associated elements such as anchors, edges, etc. so that when you collapse a node, the - edges also hide. - There is a better way to implement this with foreign keys; when collapsing a node, you would also collapse any rows with a foreign key - linking to that node (like a cascading delete in SQL, but with hiding instead of deleting) -*/ -export function filterByCollapsible( - store: StoreType, - nodes: NodeType[], - resizeNodes: ResizeNodeType[], - anchors: AnchorType[], - edges: EdgeType[] -) { - // filter nodes for the collapsible nodes feature - const filteredNodes = nodes.filter((node) => { - const nodeId = node.id - const collapssibleObj = get(store.collapsibleStore).find((e) => e.nodeId === nodeId) - if (collapssibleObj === undefined) return true - return collapssibleObj.isHidden() === false - }) - const filteredNodeIds = filteredNodes.map((e) => e.id) - // filter resizeNodes - const filteredResizeNodes = resizeNodes.filter((resizeNode) => - filteredNodeIds.includes(resizeNode.nodeId) - ) - const filteredAnchors = anchors.filter((selfAnchor) => { - const otherAnchorId = selfAnchor.getOtherAnchorId() - const otherAnchor = get(store.anchorsStore)[otherAnchorId] - - if (filteredNodeIds.includes(selfAnchor.nodeId) && filteredNodeIds.includes(otherAnchor.nodeId)) - return true - return false - }) - const filteredEdgeIds = new Set(filteredAnchors.map((e) => e.edgeId)) - const filteredEdges = edges.filter((edge) => filteredEdgeIds.has(edge.id)) - - return { - filteredNodes, - filteredResizeNodes, - filteredAnchors, - filteredEdges - } -} diff --git a/frontend/src/lib/components/graph/svelvet/collapsible/models/Collapsible.ts b/frontend/src/lib/components/graph/svelvet/collapsible/models/Collapsible.ts deleted file mode 100644 index 6dbd74e159..0000000000 --- a/frontend/src/lib/components/graph/svelvet/collapsible/models/Collapsible.ts +++ /dev/null @@ -1,26 +0,0 @@ -/** - * This model implements functionality for nodes to expand and collapse their children - */ - -import type { CollapsibleType } from '../types/types'; - -/** Class that implements collapsible/expandable functionality for Node objects - * @param {string} id Unique string that serves as a primary key - * @param {string} nodeId Foreign key to a Node Object - */ -export class Collapsible implements CollapsibleType { - constructor( - public id: string, - public nodeId: string, - public hideCount: number, - public state: 'expanded' | 'collapsed' - ) {} - - isHidden() { - return this.hideCount > 0; - } - - toggleState() { - this.state = this.state === 'expanded' ? 'collapsed' : 'expanded'; - } -} diff --git a/frontend/src/lib/components/graph/svelvet/collapsible/types/types.ts b/frontend/src/lib/components/graph/svelvet/collapsible/types/types.ts deleted file mode 100644 index f9b76b0971..0000000000 --- a/frontend/src/lib/components/graph/svelvet/collapsible/types/types.ts +++ /dev/null @@ -1,8 +0,0 @@ -export interface CollapsibleType { - id: string; - nodeId: string; - hideCount: number; - state: 'expanded' | 'collapsed'; - isHidden: Function; - toggleState: Function; -} diff --git a/frontend/src/lib/components/graph/svelvet/container/controllers/middleware.ts b/frontend/src/lib/components/graph/svelvet/container/controllers/middleware.ts index 70385bffad..9f4a4b1b65 100644 --- a/frontend/src/lib/components/graph/svelvet/container/controllers/middleware.ts +++ b/frontend/src/lib/components/graph/svelvet/container/controllers/middleware.ts @@ -3,30 +3,16 @@ This file contains "middleware" functions that sanitize user input (UserNodeType maintain consistency between previous */ -import { get } from 'svelte/store'; import { bottomCb, leftCb, rightCb, topCb, } from '../../edges/controllers/anchorCbUser'; -import type { StoreType } from '../../store/types/types'; import type { UserEdgeType, UserNodeType } from '../../types/types'; -/** - * sanitizeCanvasOptions will sanitize the canvas level options so that incompatible features will not be run simulataneously - * @param store The array of nodes that have a UserNodeType - * @returns void. The store is modified directly - */ -export function sanitizeCanvasOptions(store: StoreType) { - enforceCollapsibleCompatibility(store); -} -function enforceCollapsibleCompatibility(store: StoreType) { - if (get(store.collapsibleOption)) { - store.nodeCreate.set(false); - } -} + /** * sanitizeUserNodesAndEdges will sanitize the data initially passed in to Svelvet component. For example, the node that user specified have an integar as its id but to instantiate a Node and be compatible with uuid we will need to convert the integar id to a string. diff --git a/frontend/src/lib/components/graph/svelvet/container/views/GraphView.svelte b/frontend/src/lib/components/graph/svelvet/container/views/GraphView.svelte index b1258ad44d..44767c2abc 100644 --- a/frontend/src/lib/components/graph/svelvet/container/views/GraphView.svelte +++ b/frontend/src/lib/components/graph/svelvet/container/views/GraphView.svelte @@ -9,7 +9,7 @@ import Node from '../../nodes/views/Node.svelte' import { determineD3Instance } from '../..//d3/controllers/d3' - import { findStore } from '../../store/controllers/storeApi' + import { findStore } from '../../store/models/store' import { Expand, Minus, Plus } from 'lucide-svelte' import Toggle from '$lib/components/Toggle.svelte' diff --git a/frontend/src/lib/components/graph/svelvet/container/views/Svelvet.svelte b/frontend/src/lib/components/graph/svelvet/container/views/Svelvet.svelte index b0e422724c..2c5b25965a 100644 --- a/frontend/src/lib/components/graph/svelvet/container/views/Svelvet.svelte +++ b/frontend/src/lib/components/graph/svelvet/container/views/Svelvet.svelte @@ -8,7 +8,7 @@ } from '../../store/controllers/storeApi' import { afterUpdate, onMount, getContext } from 'svelte' import GraphView from './GraphView.svelte' - import { sanitizeCanvasOptions, sanitizeUserNodesAndEdges } from '../controllers/middleware' + import { sanitizeUserNodesAndEdges } from '../controllers/middleware' import { SVELVET_CONTEXT_KEY, type SvelvetSettingsContext } from '../models' const settings = getContext(SVELVET_CONTEXT_KEY) @@ -24,7 +24,6 @@ export let snapTo: number = 30 export let nodeCreate: boolean = false export let boundary = false - export let collapsible = false export let locked: boolean = false // if true, node movement is disabled export let editable: boolean = false export let highlightEdges: boolean = true @@ -58,13 +57,10 @@ store.options.set(optionsObj) // store.nodeCreate.set(nodeCreate) store.boundary.set(boundary) - store.collapsibleOption.set(collapsible) store.lockedOption.set(locked) store.editableOption.set(editable) store.highlightEdgesOption.set(highlightEdges) - // make sure that all canvas options are compatible - sanitizeCanvasOptions(store) // set node/edge related stores populateSvelvetStoreFromUserInput(canvasId, userNodes, userEdges) error = '' @@ -92,13 +88,10 @@ store.options.set(optionsObj) // store.nodeCreate.set(nodeCreate) store.boundary.set(boundary) - store.collapsibleOption.set(collapsible) store.lockedOption.set(locked) store.editableOption.set(editable) store.highlightEdgesOption.set(highlightEdges) - // make sure that all canvas options are compatible - sanitizeCanvasOptions(store) // set node/edge related stores populateSvelvetStoreFromUserInput(canvasId, userNodes, userEdges) error = '' diff --git a/frontend/src/lib/components/graph/svelvet/edges/models/Edge.ts b/frontend/src/lib/components/graph/svelvet/edges/models/Edge.ts index 6504434c71..f6f6ca8339 100644 --- a/frontend/src/lib/components/graph/svelvet/edges/models/Edge.ts +++ b/frontend/src/lib/components/graph/svelvet/edges/models/Edge.ts @@ -1,4 +1,4 @@ -import { findStore } from '../../store/controllers/storeApi' +import { findStore } from '../../store/models/store' import type { UserEdgeType } from '../../types/types' import type { EdgeType } from '../../store/types/types' diff --git a/frontend/src/lib/components/graph/svelvet/edges/views/Edges/BaseEdge.svelte b/frontend/src/lib/components/graph/svelvet/edges/views/Edges/BaseEdge.svelte index 3b16c9ff52..59b09bf80f 100644 --- a/frontend/src/lib/components/graph/svelvet/edges/views/Edges/BaseEdge.svelte +++ b/frontend/src/lib/components/graph/svelvet/edges/views/Edges/BaseEdge.svelte @@ -1,5 +1,5 @@ diff --git a/frontend/src/lib/components/graph/svelvet/nodes/views/Node.svelte b/frontend/src/lib/components/graph/svelvet/nodes/views/Node.svelte index 510e7b1def..f409fe9d26 100644 --- a/frontend/src/lib/components/graph/svelvet/nodes/views/Node.svelte +++ b/frontend/src/lib/components/graph/svelvet/nodes/views/Node.svelte @@ -1,7 +1,7 @@