@luxonis/depthai-pipeline-lib 1.5.0 → 1.7.0

package/dist/src/components/Node.js

@@ -6,16 +6,20 @@ import { css } from '../styled-system/css/css.mjs';
 import { DOCS_BASE_URL, NodesWithLinks, } from '../services/pipeline.js';
 const NodeHandles = props => {
     const { handles, type } = props;
-    return (_jsx(Flex, { full: true, direction: "column", align: type === 'input' ? 'start' : 'end', children: handles.map(({ type: handleType, id, blocking, queueSize, name }) => (_jsxs(Flex, { position: "relative", align: "end", direction: handleType === 'input' ? 'row' : 'row-reverse', children: [_jsx(Handle, { type: handleType === 'input' ? 'target' : 'source', position: handleType === 'input' ? Position.Left : Position.Right, id: name, isConnectable: false, className: css({
+    return (_jsx(Flex, { full: true, direction: "column", align: type === 'input' ? 'start' : 'end', children: handles.map(({ type: handleType, id, blocking, queueSize, name, maxQueueSize, fps }) => (_jsxs(Flex, { position: "relative", align: "end", direction: handleType === 'input' ? 'row' : 'row-reverse', children: [_jsx(Handle, { type: handleType === 'input' ? 'target' : 'source', position: handleType === 'input' ? Position.Left : Position.Right, id: name, isConnectable: false, className: css({
                         width: 'custom.handle.dot!',
                         height: 'custom.handle.dot!',
                         backgroundColor: blocking ? 'dark.warning!' : 'dark.success!',
                         border: 'none!',
-                    }) }), _jsx(SubLabel, { className: css({
-                        ...(type === 'input' //
-                            ? { 'marginLeft': 'xs' }
-                            : { 'marginRight': 'xs' }),
-                    }), text: type === 'input' ? `[${queueSize}] ${name}` : name, break: "none" })] }, id))) }));
+                    }) }), _jsx(NodeHandlesSubLabel, { type: type, name: name, queueSize: queueSize, maxQueueSize: maxQueueSize, fps: fps })] }, id))) }));
+};
+const NodeHandlesSubLabel = props => {
+    const { type, name, queueSize, maxQueueSize, fps } = props;
+    return (_jsx(SubLabel, { className: css({
+            ...(type === 'input' //
+                ? { marginLeft: 'xs' }
+                : { marginRight: 'xs' }),
+        }), text: `[${fps ? `${fps.toFixed(1)} | ` : ''}${maxQueueSize ? `${maxQueueSize}/${queueSize}` : queueSize}] ${name}`, break: "none" }));
 };
 export const PipelineNode = props => {
     const { data: node } = props;
@@ -38,9 +42,21 @@ export const PipelineNode = props => {
                 }), children: [_jsx("span", { className: css({
                             width: 'icon.sm',
                             height: 'icon.sm',
-                        }) }), _jsx(Label, { text: node.name, color: "unset" }), _jsx(Button, { variant: "ghost", color: "transparent", icon: HelpIcon, onClick: () => window.open(link, '_blank'), className: clsx('node-help-icon', css({
+                        }) }), _jsx(Label, { text: node.id ? `${node.name} (${node.id})` : node.name, color: "unset" }), _jsx(Button, { variant: "ghost", color: "transparent", icon: HelpIcon, onClick: () => window.open(link, '_blank'), className: clsx('node-help-icon', css({
                             width: 'auto',
                             height: 'auto',
                             right: 'xs',
-                        })) })] }), _jsxs(Flex, { gap: "sm", paddingY: "xs", children: [_jsx(NodeHandles, { type: "input", handles: node.handles.input }), _jsx(NodeHandles, { type: "output", handles: node.handles.output })] })] }));
+                        })) })] }), _jsx(Handle, { type: "target", position: Position.Top, id: "top", isConnectable: false, className: css({
+                    width: 'custom.handle.dot!',
+                    height: 'custom.handle.dot!',
+                }), style: {
+                    border: 'none',
+                    background: 'transparent',
+                } }), _jsxs(Flex, { gap: "sm", paddingY: "xs", children: [_jsx(NodeHandles, { type: "input", handles: node.handles.input }), _jsx(NodeHandles, { type: "output", handles: node.handles.output })] }), _jsx(Handle, { type: "source", position: Position.Bottom, id: "bottom", isConnectable: false, className: css({
+                    width: 'custom.handle.dot!',
+                    height: 'custom.handle.dot!',
+                }), style: {
+                    border: 'none',
+                    background: 'transparent',
+                } })] }));
 };

package/dist/src/components/PipelineCanvas.d.ts

@@ -1,7 +1,10 @@
 import React from 'react';
 import type { FlexProps } from '@luxonis/common-fe-components';
-import type { Pipeline } from '../services/pipeline.js';
+import type { ParsedNode, Pipeline } from '../services/pipeline.js';
+import type { PipelineState } from '../services/pipeline-state.js';
 export type PipelineCanvasProps = FlexProps & {
     pipeline: Pipeline | null;
+    pipelineState?: PipelineState[] | null;
 };
+export declare const updateNodesOnPipelineStateChange: (nodes: ParsedNode[], pipelineState: PipelineState[]) => ParsedNode[];
 export declare const PipelineCanvas: React.FC<PipelineCanvasProps>;

package/dist/src/components/PipelineCanvas.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { ReactFlow, ReactFlowProvider, useEdgesState, useNodesState, useReactFlow, useStore, } from '@xyflow/react';
+import { ReactFlow, ReactFlowProvider, useEdgesState, useNodesInitialized, useNodesState, useReactFlow, useStore, } from '@xyflow/react';
 import { Flex, Header } from '@luxonis/common-fe-components';
 import Dagre from '@dagrejs/dagre';
 import { PipelineNode } from './Node.js';
@@ -29,13 +29,116 @@ const getLayoutedElements = (nodes, edges) => {
         edges,
     };
 };
-const PipelineCanvasBody = ({ pipeline, ...flexProps }) => {
+const adjustNodes = (nodes) => {
+    const PADDING = 16;
+    const positionedNodes = nodes
+        .filter(node => node.type !== 'group')
+        .map((node) => {
+        const position = node.position;
+        const x = position.x - (node.measured?.width ?? 200) / 2;
+        const y = position.y - (node.measured?.height ?? 100) / 2;
+        return {
+            ...node,
+            position: { x, y },
+        };
+    });
+    const groupNodes = nodes.filter(node => node.type === 'group');
+    const positionedGroups = groupNodes.map(parent => {
+        const children = positionedNodes.filter(n => n.parentId === parent.id);
+        if (children.length === 0) {
+            return { ...parent, position: { x: 0, y: 0 } };
+        }
+        let minX = 9999;
+        let minY = 9999;
+        let maxX = -9999;
+        let maxY = -9999;
+        // eslint-disable-next-line github/array-foreach
+        children.forEach(child => {
+            const width = child.measured?.width ?? 200;
+            const height = child.measured?.height ?? 100;
+            minX = Math.min(minX, child.position.x);
+            minY = Math.min(minY, child.position.y);
+            maxX = Math.max(maxX, child.position.x + width);
+            maxY = Math.max(maxY, child.position.y + height);
+        });
+        const parentX = minX - PADDING;
+        const parentY = minY - PADDING;
+        // eslint-disable-next-line github/array-foreach
+        children.forEach(child => {
+            child.position.x -= parentX;
+            child.position.y -= parentY;
+        });
+        return {
+            ...parent,
+            position: { x: parentX, y: parentY },
+            measured: {
+                width: maxX - minX + PADDING * 2,
+                height: maxY - minY + PADDING * 2,
+            },
+            width: maxX - minX + PADDING * 2,
+            height: maxY - minY + PADDING * 2,
+            style: {
+                ...parent.style,
+                width: maxX - minX + PADDING * 2,
+                height: maxY - minY + PADDING * 2,
+            },
+        };
+    });
+    return [...positionedGroups, ...positionedNodes];
+};
+export const updateNodesOnPipelineStateChange = (nodes, pipelineState) => {
+    const parsedNodes = [];
+    for (const node of nodes) {
+        const nodeState = pipelineState.find(state => state.id.toString() === node.id.toString());
+        const inputHandles = node.data.handles.input;
+        const outputHandles = node.data.handles.output;
+        const newInputHandles = [];
+        for (const inputHandle of inputHandles) {
+            const obj = { ...inputHandle };
+            const inputState = nodeState?.inputs[inputHandle.name];
+            if (inputState) {
+                obj.maxQueueSize = inputState.numQueued;
+                obj.fps = inputState.timing.fps;
+            }
+            newInputHandles.push(obj);
+        }
+        const newOutputHandles = [];
+        for (const outputHandle of outputHandles) {
+            const obj = { ...outputHandle };
+            const outputState = nodeState?.outputs[outputHandle.name];
+            if (outputState) {
+                obj.maxQueueSize = outputState.numQueued;
+                obj.fps = outputState.timing.fps;
+            }
+            newOutputHandles.push(obj);
+        }
+        parsedNodes.push({
+            ...node,
+            data: {
+                ...node.data,
+                handles: {
+                    input: newInputHandles,
+                    output: newOutputHandles,
+                },
+            },
+        });
+    }
+    return parsedNodes;
+};
+const PipelineCanvasBody = ({ pipeline, 
+// eslint-disable-next-line no-warning-comments
+// TODO: Remove optional after pipelineState is implemented in Viewer and Visualizer
+pipelineState = null, ...flexProps }) => {
     const { fitView, setViewport, getViewport } = useReactFlow();
     const autoArrangeRef = React.useRef(true);
     const widthSelector = (state) => state.width;
     const heightSelector = (state) => state.height;
     const reactFlowWidth = useStore(widthSelector);
     const reactFlowHeight = useStore(heightSelector);
+    const nodesInitialized = useNodesInitialized();
+    const [isAutoLayoutingFinished, setIsAutoLayoutingFinished] = React.useState(false);
+    const [isNodesUpdatedWithState, setIsNodesUpdatedWithState] = React.useState(false);
+    const [shouldFitAndResize, setShouldFitAndResize] = React.useState(false);
     React.useEffect(() => {
         void fitView();
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -50,6 +153,24 @@ const PipelineCanvasBody = ({ pipeline, ...flexProps }) => {
         setNodes([...layouted.nodes]);
         setEdges([...layouted.edges]);
     }, [pipeline?.edges, pipeline?.nodes, setEdges, setNodes]);
+    React.useEffect(() => {
+        if (nodesInitialized && !isAutoLayoutingFinished) {
+            const adjustedNodes = adjustNodes(nodes);
+            setNodes([...adjustedNodes]);
+            setIsAutoLayoutingFinished(true);
+            setShouldFitAndResize(true);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [nodesInitialized, isAutoLayoutingFinished]);
+    React.useEffect(() => {
+        if (pipelineState && nodes.length > 0 && !isNodesUpdatedWithState) {
+            const updatedNodes = updateNodesOnPipelineStateChange(nodes, pipelineState);
+            setNodes([...updatedNodes]);
+            setIsNodesUpdatedWithState(true);
+            setShouldFitAndResize(true);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [pipelineState, nodes, isNodesUpdatedWithState]);
     const setViewportAndFit = async (x, y, zoom, nds) => {
         await setViewport({ x, y, zoom });
         await fitView({ nodes: nds });
@@ -64,6 +185,14 @@ const PipelineCanvasBody = ({ pipeline, ...flexProps }) => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [nodes, edges]);
+    React.useEffect(() => {
+        if (shouldFitAndResize) {
+            const viewport = getViewport();
+            void setViewportAndFit(viewport.x, viewport.y, viewport.zoom, nodes);
+            setShouldFitAndResize(false);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [shouldFitAndResize]);
     return (_jsxs(Flex, { align: "center", justify: "center", full: true, height: "container.xs", rounded: "common", border: "base", ...flexProps, children: [!pipeline && _jsx(Header, { text: "Loading pipeline..." }), pipeline && (_jsx(ReactFlow, { nodes: nodes, edges: edges, onNodeDragStart: () => (autoArrangeRef.current = false), onNodesChange: onNodesChange, fitView: true, nodeTypes: { generic: PipelineNode }, minZoom: 0.4 }))] }));
 };
 export const PipelineCanvas = props => (_jsx(ReactFlowProvider, { children: _jsx(PipelineCanvasBody, { ...props }) }));

package/dist/src/index.d.ts

@@ -1,4 +1,6 @@
 export { parsePipeline } from './services/pipeline.js';
 export type { Pipeline, RawPipelinePayload } from './services/pipeline.js';
+export { parsePipelineState } from './services/pipeline-state.js';
+export type { PipelineState, RawPipelineStatePayload } from './services/pipeline-state.js';
 export { PipelineCanvas } from './components/PipelineCanvas.js';
 export type { PipelineCanvasProps } from './components/PipelineCanvas.js';

package/dist/src/index.js

@@ -1,2 +1,3 @@
 export { parsePipeline } from './services/pipeline.js';
+export { parsePipelineState } from './services/pipeline-state.js';
 export { PipelineCanvas } from './components/PipelineCanvas.js';

package/dist/src/services/pipeline-state.d.ts

@@ -0,0 +1,42 @@
+export type RawPipelineStatePayload = {
+    nodeStates: RawPipelineState[];
+};
+export type IOStates = {
+    [key: string]: {
+        numQueued: number;
+        timing: TimingWithFps;
+    };
+};
+type Timing = {
+    averageMicrosRecent: number;
+    maxMicros: number;
+    maxMicrosRecent: number;
+    medianMicrosRecent: number;
+    minMicros: number;
+    minMicrosRecent: number;
+    stdDevMicrosRecent: number;
+};
+type TimingWithFps = {
+    durationStats: Timing;
+    fps: number;
+};
+export type RawPipelineState = [
+    number,
+    {
+        events: any[];
+        inputStates: IOStates;
+        inputsGetTiming: TimingWithFps;
+        mainLoopTiming: TimingWithFps;
+        otherTimings: object;
+        outputStates: IOStates;
+        outputsSendTiming: TimingWithFps;
+        state: number;
+    }
+];
+export type PipelineState = {
+    id: number;
+    inputs: IOStates;
+    outputs: IOStates;
+};
+export declare function parsePipelineState(rawPayload: RawPipelineStatePayload): PipelineState[];
+export {};

package/dist/src/services/pipeline-state.js

@@ -0,0 +1,13 @@
+export function parsePipelineState(rawPayload) {
+    const { nodeStates } = rawPayload;
+    const parsedNodeStates = [];
+    for (const [nodeId, nodeState] of nodeStates) {
+        const currentNode = {
+            id: nodeId,
+            inputs: nodeState.inputStates,
+            outputs: nodeState.outputStates,
+        };
+        parsedNodeStates.push(currentNode);
+    }
+    return parsedNodeStates;
+}

package/dist/src/services/pipeline.d.ts

@@ -1,4 +1,4 @@
-import type { Edge, Node } from '@xyflow/react';
+import { type Edge, type Node } from '@xyflow/react';
 export type RawPipelineNodeIO = [
     [
         string,
@@ -16,7 +16,9 @@ export type RawPipelineNode = {
     id: number;
     ioInfo: RawPipelineNodeIO[];
     name: string;
+    parentId?: number;
 };
+export type RawPipelineBridge = [number, number];
 export type RawPipelineEdge = {
     node1Id: number;
     node1Output: string;
@@ -29,6 +31,7 @@ export type RawPipelinePayload = {
 export type RawPipeline = {
     connections: RawPipelineEdge[];
     nodes: [number, RawPipelineNode][];
+    bridges?: [number, number][];
 };
 export type Pipeline = {
     nodes: ParsedNode[];
@@ -40,8 +43,12 @@ export type ParsedHandle = {
     type: 'input' | 'output';
     blocking: boolean;
     queueSize: number;
+    maxQueueSize?: number;
+    fps?: number;
 };
 export type ParsedNode = Node<{
+    id: string;
+    parentId?: string;
     name: string;
     handles: {
         input: ParsedHandle[];

package/dist/src/services/pipeline.js

@@ -1,3 +1,4 @@
+import { MarkerType } from '@xyflow/react';
 function parseHandles(handles) {
     const parsedHandles = {
         input: [],
@@ -24,19 +25,61 @@ export function parsePipeline(rawPayload) {
         type: 'generic',
         id: id.toString(),
         position: { x: 0, y: 0 },
+        parentId: node.parentId?.toString() === '-1' ? undefined : node.parentId?.toString(),
+        extent: node.parentId?.toString() === '-1' ? undefined : 'parent',
         data: {
+            id: id.toString(),
             name: node.name,
             handles: parseHandles(node.ioInfo),
         },
     })) ?? [];
+    const mappedParentNodes = nodes.map(node => node.parentId).filter(id => id !== undefined);
+    const filteredParentNodes = mappedParentNodes.filter(id => id !== '-1');
+    const parentNodes = [...new Set(filteredParentNodes)];
+    const parentNodesArr = parentNodes
+        .map(id => pipeline.nodes.find(([_, node]) => node.id.toString() === id))
+        .filter(node => node !== undefined);
+    const formattedParentNodes = parentNodesArr.map(([id, node]) => ({
+        type: 'group',
+        id: id.toString(),
+        position: { x: 0, y: 0 },
+        parentId: node.parentId?.toString() === '-1' ? undefined : node.parentId?.toString(),
+        data: {
+            id: id.toString(),
+            name: node.name,
+            handles: parseHandles(node.ioInfo),
+        },
+        style: {
+            padding: 0,
+            borderStyle: 'dashed',
+            background: 'rgba(0,0,0,0.125)',
+        },
+    })) ?? [];
     const edges = pipeline.connections.map(connection => ({
-        id: `${connection.node1Id}-${connection.node2Id}`,
+        id: `${connection.node1Id}-${connection.node2Id}-${connection.node1Output}-${connection.node2Input}-edge`,
         source: connection.node1Id.toString(),
         target: connection.node2Id.toString(),
         sourceHandle: connection.node1Output,
         targetHandle: connection.node2Input,
     })) ?? [];
-    return { nodes, edges };
+    const bridges = pipeline.bridges?.map(bridge => ({
+        id: `${bridge[0]}-${bridge[1]}-bridge`,
+        source: bridge[0].toString(),
+        target: bridge[1].toString(),
+        sourceHandle: 'bottom',
+        targetHandle: 'top',
+        animated: true,
+        markerStart: {
+            type: MarkerType.ArrowClosed,
+        },
+        markerEnd: {
+            type: MarkerType.ArrowClosed,
+        },
+        type: 'step',
+    })) ?? [];
+    const groupedNodes = [...formattedParentNodes, ...nodes];
+    // NOTE: Parent nodes should be rendered before child nodes
+    return { nodes: [...groupedNodes], edges: [...edges, ...bridges] };
 }
 export const DOCS_BASE_URL = `https://docs.luxonis.com/software-v3/depthai/depthai-components/nodes`;
 export const NodesWithLinks = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxonis/depthai-pipeline-lib",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "type": "module",
   "license": "UNLICENSED",
   "main": "./dist/src/index.js",

package/dist/src/styled-system/chunks/src__components__Node.css

@@ -1,196 +0,0 @@
-@layer utilities {
-
-  .bg_dark\.warning\! {
-    background-color: var(--colors-dark-warning) !important
-    }
-
-  .bg_dark\.success\! {
-    background-color: var(--colors-dark-success) !important
-    }
-
-  .w_custom\.handle\.dot\! {
-    width: var(--sizes-custom-handle-dot) !important
-    }
-
-  .h_custom\.handle\.dot\! {
-    height: var(--sizes-custom-handle-dot) !important
-    }
-
-  .border_none\! {
-    border: var(--borders-none) !important
-    }
-
-  .ml_xs {
-    margin-left: var(--spacing-xs)
-    }
-
-  .mr_xs {
-    margin-right: var(--spacing-xs)
-    }
-
-  .min-w_container\.smaller\.xxs {
-    min-width: var(--sizes-container-smaller-xxs)
-    }
-
-  .border_base {
-    border: var(--borders-base)
-    }
-
-  .rounded_common {
-    border-radius: var(--radii-common)
-    }
-
-  .bg_white {
-    background-color: var(--colors-white)
-    }
-
-  .w_full {
-    width: var(--sizes-full)
-    }
-
-  .bg_light\.gray {
-    background-color: var(--colors-light-gray)
-    }
-
-  .rounded-t_common {
-    border-top-left-radius: var(--radii-common);
-    border-top-right-radius: var(--radii-common)
-    }
-
-  .w_icon\.sm {
-    width: var(--sizes-icon-sm)
-    }
-
-  .h_icon\.sm {
-    height: var(--sizes-icon-sm)
-    }
-
-  .w_auto {
-    width: auto
-    }
-
-  .h_auto {
-    height: auto
-    }
-
-  .right_xs {
-    right: var(--spacing-xs)
-    }
-
-  .text_unset {
-    color: unset
-    }
-
-  .text_transparent {
-    color: var(--colors-transparent)
-    }
-
-  .items_start {
-    align-items: start
-    }
-
-  .flex_row {
-    flex-direction: row
-    }
-
-  .flex_row-reverse {
-    flex-direction: row-reverse
-    }
-
-  .items_end {
-    align-items: end
-    }
-
-  .pos_relative {
-    position: relative
-    }
-
-  .flex_column {
-    flex-direction: column
-    }
-
-  .items_center {
-    align-items: center
-    }
-
-  .justify_space-between {
-    justify-content: space-between
-    }
-
-  .gap_xs {
-    gap: var(--spacing-xs)
-    }
-
-  .d_flex {
-    display: flex
-    }
-
-  .gap_sm {
-    gap: var(--spacing-sm)
-    }
-
-  .py_xs {
-    padding-block: var(--spacing-xs)
-    }
-    .\[\&\:hover_\.node-help-icon\]\:text_text\.normal:hover .node-help-icon {
-      color: var(--colors-text-normal)
-        }
-}
-
-@layer recipes {
-    .button--variant_ghost:is(:hover, [data-hover]) {
-      background: var(--colors-accent);
-      color: var(--colors-accent-foreground)
-        }
-
-  .button--size_default {
-    height: var(--sizes-10);
-    padding-inline: var(--spacing-4);
-    padding-block: var(--spacing-2)
-    }
-
-  @layer _base {
-    .label {
-      font-size: 0.875rem;
-      line-height: var(--line-heights-none);
-      font-weight: var(--font-weights-medium);
-        }
-      .peer:is(:disabled, [disabled], [data-disabled]) ~ .label {
-        cursor: not-allowed;
-        opacity: 0.7
-            }
-    }
-
-  @layer _base {
-    .button {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: var(--radii-md);
-      font-size: 0.875rem;
-      line-height: 1.25rem;
-      font-weight: var(--font-weights-medium);
-      transition-property: var(--transition-prop, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke);
-      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
-      transition-duration: var(--transition-duration, 150ms);
-      cursor: pointer;
-      --shadow-panda-ring-offset-color: var(--colors-background);
-      gap: var(--spacing-2);
-        }
-      .button:is(:disabled, [disabled], [data-disabled]) {
-        pointer-events: none;
-        opacity: 50%
-            }
-      .button:is(:focus-visible, [data-focus-visible]) {
-        outline: 2px solid transparent;
-        outline-offset: 2px;
-        --shadow-panda-ring-offset-shadow: var(--shadow-panda-ring-inset,) 0 0 0 var(--shadow-panda-ring-offset-width, 0px) var(--shadow-panda-ring-offset-color);
-        --shadow-panda-ring-shadow: var(--shadow-panda-ring-inset,) 0 0 0 calc(2px + var(--shadow-panda-ring-offset-width, 0px)) var(--shadow-panda-ring-color);
-        box-shadow: var(--shadow-panda-ring-offset-shadow),var(--shadow-panda-ring-shadow),var(--shadow-panda-base-shadow,0 0 #0000);
-        --shadow-panda-ring-color: var(--colors-ring)
-    ;
-        --shadow-panda-ring-offset-width: 2px
-    
-            }
-    }
-}

package/dist/src/styled-system/chunks/src__components__PipelineCanvas.css

@@ -1,26 +0,0 @@
-@layer utilities {
-
-  .d_flex {
-    display: flex
-    }
-
-  .items_center {
-    align-items: center
-    }
-
-  .justify_center {
-    justify-content: center
-    }
-
-  .h_container\.xs {
-    height: var(--sizes-container-xs)
-    }
-
-  .rounded_common {
-    border-radius: var(--radii-common)
-    }
-
-  .border_base {
-    border: var(--borders-base)
-    }
-}