Dashboard folder structure linked to flow service

package.json

@@ -21,7 +21,7 @@
     "@ariakit/react": "^0.4.17",
     "@babel/plugin-proposal-decorators": "^7.28.0",
     "@babel/plugin-transform-class-properties": "^7.27.1",
-    "@code0-tech/sagittarius-graphql-types": "^0.0.0-00f33663039d78ad59e95306730878c687de5c48",
+    "@code0-tech/sagittarius-graphql-types": "^0.0.0-65144a9920c6a8de3bcf24acdcb8eec4158cef73",
     "@dagrejs/dagre": "^1.1.5",
     "@mdx-js/react": "^3.1.1",
     "@radix-ui/react-checkbox": "^1.3.3",

src/components/d-flow/viewport/DFlowViewport.edges.hook.ts → src/components/d-flow/DFlow.edges.hook.ts

@@ -1,9 +1,9 @@
-import {useService, useStore} from "../../../utils/contextStore";
-import {DFlowReactiveService} from "../DFlow.service";
+import {useService, useStore} from "../../utils/contextStore";
+import {DFlowReactiveService} from "./DFlow.service";
 import {Edge} from "@xyflow/react";
-import {NodeFunctionView} from "../DFlow.view";
-import {DFlowFunctionReactiveService} from "../function/DFlowFunction.service";
-import {DFlowDataTypeReactiveService} from "../data-type/DFlowDataType.service";
+import {NodeFunctionView} from "./DFlow.view";
+import {DFlowFunctionReactiveService} from "./function/DFlowFunction.service";
+import {DFlowDataTypeReactiveService} from "./data-type/DFlowDataType.service";
 import React from "react";
 import {DataTypeIdentifier, DataTypeVariant, Scalars} from "@code0-tech/sagittarius-graphql-types";
 
@@ -19,7 +19,7 @@ export const FLOW_EDGE_RAINBOW: string[] = [
     '#fff170', // 7 – Gelb
 ];
 
-export const useFlowViewportEdges = (flowId: string): Edge[] => {
+export const useFlowEdges = (flowId: string): Edge[] => {
     const flowService = useService(DFlowReactiveService);
     const functionService = useService(DFlowFunctionReactiveService);
     const dataTypeService = useService(DFlowDataTypeReactiveService);

src/components/d-flow/viewport/DFlowViewport.nodes.hook.ts → src/components/d-flow/DFlow.nodes.hook.ts

@@ -1,9 +1,9 @@
-import {useService} from "../../../utils/contextStore";
-import {DFlowReactiveService} from "../DFlow.service";
-import {NodeFunctionView} from "../DFlow.view";
+import {useService} from "../../utils/contextStore";
+import {DFlowReactiveService} from "./DFlow.service";
+import {NodeFunctionView} from "./DFlow.view";
 import {Node} from "@xyflow/react";
-import {DFlowFunctionReactiveService} from "../function/DFlowFunction.service";
-import {DFlowDataTypeReactiveService} from "../data-type/DFlowDataType.service";
+import {DFlowFunctionReactiveService} from "./function/DFlowFunction.service";
+import {DFlowDataTypeReactiveService} from "./data-type/DFlowDataType.service";
 import {DataTypeIdentifier, DataTypeVariant, Scalars} from "@code0-tech/sagittarius-graphql-types";
 
 const packageNodes = new Map<string, string>([
@@ -90,7 +90,7 @@ const bestMatchValue = (map: Map<string, string>, input: string): string => {
     return bestKey !== null ? map.get(bestKey)! : "";
 };
 
-export const useFlowViewportNodes = (flowId: string): Node[] => {
+export const useFlowNodes = (flowId: string): Node[] => {
     const flowService = useService(DFlowReactiveService);
     const functionService = useService(DFlowFunctionReactiveService);
     const dataTypeService = useService(DFlowDataTypeReactiveService);

src/components/d-flow/DFlow.tsx

@@ -13,11 +13,11 @@ import React from "react";
 import {mergeCode0Props} from "../../utils/utils";
 import '@xyflow/react/dist/style.css';
 import "./DFlow.style.scss"
-import {DFlowViewportDefaultCard} from "./viewport/cards/DFlowViewportDefaultCard";
-import {DFlowViewportGroupCard} from "./viewport/cards/DFlowViewportGroupCard";
-import {DFlowViewportSuggestionCard} from "./viewport/cards/DFlowViewportSuggestionCard";
-import {DFlowViewportTriggerCard} from "./viewport/cards/DFlowViewportTriggerCard";
-import {DFlowViewportEdge} from "./viewport/DFlowViewportEdge";
+import {DFlowFunctionDefaultCard} from "./function/DFlowFunctionDefaultCard";
+import {DFlowFunctionGroupCard} from "./function/DFlowFunctionGroupCard";
+import {DFlowFunctionSuggestionCard} from "./function/DFlowFunctionSuggestionCard";
+import {DFlowFunctionTriggerCard} from "./function/DFlowFunctionTriggerCard";
+import {DFlowEdge} from "./DFlowEdge";
 
 /**
  * Dynamically layouts a tree of nodes and their parameter nodes for a flow-based editor.
@@ -523,15 +523,15 @@ const InternalDFlow: React.FC<DFlowProps> = (props) => {
     }, [updateNodeInternals])
 
     const nodeTypes = {
-        default: DFlowViewportDefaultCard,
-        group: DFlowViewportGroupCard,
-        suggestion: DFlowViewportSuggestionCard,
-        trigger: DFlowViewportTriggerCard,
+        default: DFlowFunctionDefaultCard,
+        group: DFlowFunctionGroupCard,
+        suggestion: DFlowFunctionSuggestionCard,
+        trigger: DFlowFunctionTriggerCard,
         ...props.nodeTypes
     }
 
     const edgeTypes = {
-        default: DFlowViewportEdge,
+        default: DFlowEdge,
         ...props.edgeTypes
     }
 

src/components/d-flow/DFlow.view.ts

@@ -38,6 +38,8 @@ export class FlowView {
     /** Time when this Flow was last updated */
     private readonly _updatedAt?: Maybe<Scalars['Time']['output']>;
 
+    private _name?: Maybe<Scalars['String']['output']>;
+
     constructor(flow: Flow) {
 
         this._createdAt = flow.createdAt
@@ -49,6 +51,7 @@ export class FlowView {
         this._startingNodeId = flow.startingNodeId
         this._type = flow.type
         this._updatedAt = flow.updatedAt
+        this._name = flow.name
 
     }
 
@@ -88,6 +91,10 @@ export class FlowView {
         return this._updatedAt;
     }
 
+    get name(): Maybe<Scalars["String"]["output"]> | undefined {
+        return this._name;
+    }
+
     set inputType(value: Maybe<DataType>) {
         this._inputType = value;
     }
@@ -96,6 +103,10 @@ export class FlowView {
         this._startingNodeId = value;
     }
 
+    set name(value: Maybe<Scalars["String"]["output"]>) {
+        this._name = value;
+    }
+
     addNode(node: NodeFunctionView): void {
         if (!this._nodes) {
             this._nodes = [];

src/components/d-flow/viewport/DFlowViewportControls.tsx → src/components/d-flow/DFlowControls.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import {Panel, useReactFlow, useViewport} from "@xyflow/react";
-import ButtonGroup from "../../button-group/ButtonGroup";
-import Button from "../../button/Button";
+import ButtonGroup from "../button-group/ButtonGroup";
+import Button from "../button/Button";
 import {IconFocusCentered, IconMinus, IconPlus} from "@tabler/icons-react";
-import Badge from "../../badge/Badge";
-import Flex from "../../flex/Flex";
-import {DFlowViewportMiniMap} from "./DFlowViewportMiniMap";
+import Badge from "../badge/Badge";
+import Flex from "../flex/Flex";
+import {DFlowMiniMap} from "./DFlowMiniMap";
 
-export const DFlowViewportControls: React.FC = () => {
+export const DFlowControls: React.FC = () => {
 
     const viewport = useViewport();
     const reactFlow = useReactFlow();

src/components/d-flow/viewport/DFlowViewportEdge.tsx → src/components/d-flow/DFlowEdge.tsx

@@ -1,19 +1,19 @@
-import {Code0Component} from "../../../utils/types";
+import {Code0Component} from "../../utils/types";
 import {BaseEdge, Edge, EdgeLabelRenderer, EdgeProps, getSmoothStepPath, Position} from "@xyflow/react";
 import React, {memo} from "react";
-import Badge from "../../badge/Badge";
+import Badge from "../badge/Badge";
 
-export interface DFlowViewportEdgeDataProps extends Code0Component<HTMLDivElement> {
+export interface DFlowEdgeDataProps extends Code0Component<HTMLDivElement> {
     //some data we will use
     color?: string
     isParameter?: boolean
     isSuggestion?: boolean
 }
 
 // @ts-ignore
-export type DFlowViewportEdgeProps = EdgeProps<Edge<DFlowViewportEdgeDataProps>>
+export type DFlowEdgeProps = EdgeProps<Edge<DFlowEdgeDataProps>>
 
-export const DFlowViewportEdge: React.FC<DFlowViewportEdgeProps> = memo((props) => {
+export const DFlowEdge: React.FC<DFlowEdgeProps> = memo((props) => {
 
     const {sourceX, sourceY, targetX, targetY, id, data, ...rest} = props
 

src/components/d-flow/viewport/DFlowViewportMiniMap.style.scss → src/components/d-flow/DFlowMiniMap.style.scss

@@ -1,6 +1,6 @@
-@use "../../../styles/helpers";
-@use "../../../styles/box";
-@use "../../../styles/variables";
+@use "../../styles/helpers";
+@use "../../styles/box";
+@use "../../styles/variables";
 
 .d-flow-viewport-mini-map {
 

src/components/d-flow/viewport/DFlowViewportMiniMap.tsx → src/components/d-flow/DFlowMiniMap.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import {MiniMap, useNodes} from "@xyflow/react";
-import {FLOW_EDGE_RAINBOW} from "./DFlowViewport.edges.hook";
-import "./DFlowViewportMiniMap.style.scss"
+import {FLOW_EDGE_RAINBOW} from "./DFlow.edges.hook";
+import "./DFlowMiniMap.style.scss"
 
-export const DFlowViewportMiniMap: React.FC = (props) => {
+export const DFlowMiniMap: React.FC = (props) => {
 
     const nodes = useNodes();
 

src/components/d-flow/viewport/DFlowViewportValidations.style.scss → src/components/d-flow/DFlowValidation.style.scss

@@ -1,6 +1,6 @@
-@use "../../../styles/variables";
-@use "../../../styles/helpers";
-@use "../../../styles/box";
+@use "../../styles/variables";
+@use "../../styles/helpers";
+@use "../../styles/box";
 
 .d-flow-viewport-validations {
   padding: variables.$xxs;

src/components/d-flow/viewport/DFlowViewportValidations.tsx → src/components/d-flow/DFlowValidation.tsx

@@ -1,18 +1,18 @@
 import {Panel} from "@xyflow/react";
 import React from "react";
-import {useDFlowValidations} from "../DFlow.validation.hook";
+import {useDFlowValidations} from "./DFlow.validation.hook";
 import {Scalars} from "@code0-tech/sagittarius-graphql-types";
-import Flex from "../../flex/Flex";
-import {InspectionSeverity} from "../../../utils/inspection";
-import Badge from "../../badge/Badge";
+import Flex from "../flex/Flex";
+import {InspectionSeverity} from "../../utils/inspection";
+import Badge from "../badge/Badge";
 import {IconAlertTriangle, IconExclamationCircle, IconMessageExclamation} from "@tabler/icons-react";
-import "./DFlowViewportValidations.style.scss"
+import "./DFlowValidation.style.scss"
 
-export interface DFlowViewportValidationsProps {
+export interface DFlowValidationProps {
     flowId: Scalars['FlowID']['output']
 }
 
-export const DFlowViewportValidations: React.FC<DFlowViewportValidationsProps> = (props) => {
+export const DFlowValidation: React.FC<DFlowValidationProps> = (props) => {
 
     const {flowId} = props
     const validations = useDFlowValidations(flowId)

src/components/d-folder/DFolder.style.scss → src/components/d-flow/folder/DFlowFolder.style.scss

@@ -1,6 +1,6 @@
-@use "../../styles/helpers";
-@use "../../styles/box";
-@use "../../styles/variables";
+@use "../../../styles/helpers";
+@use "../../../styles/box";
+@use "../../../styles/variables";
 
 .d-folder {
   padding: variables.$xxs variables.$xs;
@@ -40,13 +40,15 @@
   }
 
   &__content {
+    $spacing: variables.$xxs;
+
     margin-left: variables.$xs;
     position: relative;
+    padding-left: calc(5px + $spacing);
 
     &:before {
-      z-index: 10;
       height: 100%;
-      width: 2px;
+      width: 1px;
       background: helpers.backgroundColor(variables.$secondary);
       position: absolute;
       content: "";
@@ -64,14 +66,15 @@
     align-items: center;
     cursor: pointer;
     font-size: variables.$sm;
+    position: relative;
 
     & {
       @include helpers.borderRadius();
       @include box.box(variables.$primary);
       @include box.boxHover(variables.$secondary);
+      @include box.boxActive(variables.$secondary);
       @include helpers.fontStyle();
       box-shadow: none;
-      background: transparent;
     }
   }
 }