fix flow styles

zuplo · Dec 28, 2024 · 1355a96 · 1355a96
1 parent 74045d1
commit 1355a96
Show file tree

Hide file tree

Showing 13 changed files with 47 additions and 471 deletions.
diff --git a/src/diagrams/CustomerIngressWithManagedDedicated.tsx b/src/diagrams/CustomerIngressWithManagedDedicated.tsx
@@ -62,8 +62,6 @@ export default function ZuploIngressWithManagedDedicated() {
       nodes={initialNodes}
       edges={initialEdges}
       className="w-full h-[300px]"
-      direction="BT"
-      algorithm="d3-hierarchy"
     />
   );
 }
diff --git a/src/diagrams/ZuploIngressWithManagedDedicated.tsx b/src/diagrams/ZuploIngressWithManagedDedicated.tsx
@@ -53,8 +53,6 @@ export default function ZuploIngressWithManagedDedicated() {
       nodes={initialNodes}
       edges={initialEdges}
       className="w-full h-[300px]"
-      direction="BT"
-      algorithm="d3-hierarchy"
     />
   );
 }
diff --git a/src/diagrams/common/CustomNode.tsx b/src/diagrams/common/CustomNode.tsx
@@ -15,7 +15,7 @@ export const CustomNode = memo(
             key={i}
             {...handle}
             isConnectable={false}
-            className="w-16 !bg-gray-300"
+            className="!bg-gray-300"
           />
         ))}
       </BaseNode>

diff --git a/src/diagrams/common/Diagram.tsx b/src/diagrams/common/Diagram.tsx
@@ -12,10 +12,11 @@ import {
 import React from "react";
 import { CustomHandleProps, CustomNode } from "./CustomNode";
 import { LabeledGroupNode } from "./LabeledGroup";
-import { LayoutOptions } from "./useAutoLayout";
 import { ZuploApiNode } from "./ZuploApiNode";
 export { LabeledGroupNode } from "./LabeledGroup";
 
+// import "@xyflow/react/dist/style.css";
+
 type _react = typeof React;
 
 export type DiagramNode = Node & {
@@ -28,7 +29,7 @@ export type DiagramNode = Node & {
 export type { Edge };
 export type DiagramProps = Pick<ReactFlowProps, "nodes" | "edges"> & {
   className: string;
-} & Partial<LayoutOptions>;
+};
 
 const nodeTypes = {
   zuplo: ZuploApiNode,
@@ -51,58 +52,34 @@ const proOptions = {
   hideAttribution: true,
 };
 
-function DiagramInner({
-  className,
-  nodes,
-  edges,
-  direction = "BT",
-  spacing = [50, 50],
-  algorithm = "dagre",
-}: DiagramProps) {
-  // useAutoLayout({ direction, spacing, algorithm });
-
+function Diagram({ className, nodes, edges }: DiagramProps) {
   return (
-    <>
-      <link
-        rel="stylesheet"
-        href={
-          process.env.CI ? "/docs/styles/diagrams.css" : "/styles/diagrams.css"
-        }
-      />
-
-      <div className={className}>
-        <ReactFlow
-          nodes={nodes}
-          edges={edges}
-          nodeTypes={nodeTypes}
-          defaultEdgeOptions={defaultEdgeOptions}
-          connectionLineType={ConnectionLineType.SmoothStep}
-          proOptions={proOptions}
-          zoomOnPinch={false}
-          zoomOnScroll={false}
-          contentEditable={false}
-          fitView
-          fitViewOptions={{ padding: 0.4 }}
-          attributionPosition="top-right"
-          className="rounded-md"
-          style={{
-            backgroundColor: "#F7F9FB",
-            fontWeight: 400,
-            borderWidth: "1px",
-          }}
-        >
-          <Controls showInteractive={false} />
-          <Background color="#ccc" variant={BackgroundVariant.Dots} gap={10} />
-        </ReactFlow>
-      </div>
-    </>
+    <div className={className}>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        nodeTypes={nodeTypes}
+        defaultEdgeOptions={defaultEdgeOptions}
+        connectionLineType={ConnectionLineType.SmoothStep}
+        proOptions={proOptions}
+        zoomOnPinch={true}
+        zoomOnScroll={false}
+        contentEditable={false}
+        fitView
+        fitViewOptions={{ padding: 0.4 }}
+        attributionPosition="top-right"
+        className="rounded-md"
+        style={{
+          backgroundColor: "#F7F9FB",
+          fontWeight: 400,
+          borderWidth: "1px",
+        }}
+      >
+        <Controls showInteractive={false} />
+        <Background color="#ccc" variant={BackgroundVariant.Dots} gap={10} />
+      </ReactFlow>
+    </div>
   );
 }
 
-export default function Diagram(props: DiagramProps) {
-  return (
-    // <ReactFlowProvider>
-    <DiagramInner {...props} />
-    // </ReactFlowProvider>
-  );
-}
+export default Diagram;
diff --git a/src/diagrams/common/ZuploApiNode.tsx b/src/diagrams/common/ZuploApiNode.tsx
@@ -17,7 +17,7 @@ export const ZuploApiNode = memo(
             type="target"
             {...handle}
             isConnectable={false}
-            className="w-16 !bg-gray-300"
+            className="!bg-gray-300"
           />
         ))}
       </BaseNode>

diff --git a/src/diagrams/common/algorithms/d3-hierarchy.ts b/src/diagrams/common/algorithms/d3-hierarchy.ts
diff --git a/src/diagrams/common/algorithms/dagre.ts b/src/diagrams/common/algorithms/dagre.ts
diff --git a/src/diagrams/common/algorithms/elk.ts b/src/diagrams/common/algorithms/elk.ts
diff --git a/src/diagrams/common/algorithms/index.ts b/src/diagrams/common/algorithms/index.ts