feat(Storybook): change elk examples (#46)

* chore(Storybook): change generatePretty attributes
* feat(Storybook): change elk examples

Author: SimbiozizV

src/stories/api/startStopGraph/startStop.stories.tsx

@@ -12,7 +12,7 @@ import { BlockStory } from "../../main/Block";
 
 import "@gravity-ui/uikit/styles/styles.css";
 
-const config = generatePrettyBlocks(10, 10, true, {}, 0);
+const config = generatePrettyBlocks({ layersCount: 10, connectionsPerLayer: 10, dashedLine: true });
 
 const exampleGraph = new Graph({
   configurationName: "start-stop",
@@ -45,10 +45,15 @@ const GraphApp = () => {
   });
 
   const update = () => {
-    const config = generatePrettyBlocks(10, 10, true, {}, Math.random() * 1000);
+    const { blocks, connections } = generatePrettyBlocks({
+      layersCount: 10,
+      connectionsPerLayer: 10,
+      dashedLine: true,
+      startIndex: Math.random() * 1000,
+    });
     setEntities({
-      blocks: config.blocks,
-      connections: config.connections,
+      blocks,
+      connections,
     });
   };
 

src/stories/api/zoomSpeed/zoomSpeed.stories.tsx

@@ -9,7 +9,7 @@ import { GraphComponentStory } from "../../main/GraphEditor";
 
 import "@gravity-ui/uikit/styles/styles.css";
 
-const config = generatePrettyBlocks(10, 10, true);
+const config = generatePrettyBlocks({ layersCount: 10, connectionsPerLayer: 10, dashedLine: true });
 
 const GraphApp = () => {
   const [speed, setSpeed] = useState("1");

src/stories/api/zoomToBlocks/zoomToBlocks.stories.tsx

@@ -9,7 +9,7 @@ import { GraphComponentStory } from "../../main/GraphEditor";
 
 import "@gravity-ui/uikit/styles/styles.css";
 
-const config = generatePrettyBlocks(10, 10, true);
+const config = generatePrettyBlocks({ layersCount: 10, connectionsPerLayer: 10, dashedLine: true });
 
 const GraphApp = () => {
   const [transition, setTransition] = useState("1000");

src/stories/api/zoomToRect/zoomToRect.stories.tsx

@@ -9,7 +9,7 @@ import { GraphComponentStory } from "../../main/GraphEditor";
 
 import "@gravity-ui/uikit/styles/styles.css";
 
-const config = generatePrettyBlocks(10, 10, true);
+const config = generatePrettyBlocks({ layersCount: 10, connectionsPerLayer: 10, dashedLine: true });
 
 const GraphApp = () => {
   const [x, setX] = useState("0");

src/stories/api/zoomToViewPort/zoomToViewPort.stories.tsx

@@ -9,7 +9,7 @@ import { GraphComponentStory } from "../../main/GraphEditor";
 
 import "@gravity-ui/uikit/styles/styles.css";
 
-const config = generatePrettyBlocks(10, 10, true);
+const config = generatePrettyBlocks({ layersCount: 10, connectionsPerLayer: 10, dashedLine: true });
 
 const GraphApp = () => {
   const [transition, setTransition] = useState("1000");

src/stories/configurations/generatePretty.ts

@@ -6,7 +6,7 @@ import { IS_BLOCK_TYPE } from "../../store/block/Block";
 
 import { storiesSettings } from "./definitions";
 
-function createBlock(x: number, y: number, index): TBlock {
+export function createBlock(x: number, y: number, index): TBlock {
   const blockId = `block_${index}`;
   return {
     id: blockId,
@@ -25,13 +25,21 @@ function getRandomArbitrary(min, max) {
   return (Math.random() * (max - min) + min) | 0;
 }
 
-export function generatePrettyBlocks(
-  layersCount: number,
-  connectionsPerLayer: number,
-  dashedLine = false,
-  overrideSettings?: Partial<TGraphConfig["settings"]>,
-  startIndex = 0
-) {
+type Props = {
+  layersCount: number;
+  connectionsPerLayer: number;
+  dashedLine?: boolean;
+  overrideSettings?: Partial<TGraphConfig["settings"]>;
+  startIndex?: number;
+};
+
+export function generatePrettyBlocks({
+  layersCount,
+  connectionsPerLayer,
+  dashedLine,
+  overrideSettings = {},
+  startIndex = 0,
+}: Props) {
   const config: TGraphConfig = {
     configurationName: "power of 2",
     blocks: [],

src/stories/examples/imageInsteadBlock/imageInsteadBlock.stories.tsx

@@ -105,7 +105,7 @@ const GraphApp = () => {
   const [config, setConfig] = useState<TGraphConfig | undefined>();
 
   useEffect(() => {
-    const newConfig = generatePrettyBlocks(10, 100, true);
+    const newConfig = generatePrettyBlocks({ layersCount: 10, connectionsPerLayer: 100, dashedLine: true });
     newConfig.settings.blockComponents = {};
     newConfig.settings.blockComponents[SpecificBlockIs] = SpecificBlockView;
 

src/stories/main/GraphEditor.stories.tsx

@@ -122,18 +122,27 @@ export const WithAnchors: Story = {
 };
 
 export const HundredBlocks: Story = {
-  render: (args) => <GraphApp config={generatePrettyBlocks(10, 100, true)} {...args}></GraphApp>,
+  render: (args) => (
+    <GraphApp
+      config={generatePrettyBlocks({ layersCount: 10, connectionsPerLayer: 100, dashedLine: true })}
+      {...args}
+    ></GraphApp>
+  ),
 };
 
 export const ThousandBlocks: Story = {
-  render: (args) => <GraphApp config={generatePrettyBlocks(25, 200)} {...args}></GraphApp>,
+  render: (args) => (
+    <GraphApp config={generatePrettyBlocks({ layersCount: 25, connectionsPerLayer: 200 })} {...args}></GraphApp>
+  ),
 };
 
 export const FiveThousandsBlocks: Story = {
   args: {
     useBezierConnections: false,
   },
-  render: (args) => <GraphApp config={generatePrettyBlocks(40, 300, false)} {...args}></GraphApp>,
+  render: (args) => (
+    <GraphApp config={generatePrettyBlocks({ layersCount: 30, connectionsPerLayer: 300 })} {...args}></GraphApp>
+  ),
 };
 
 export const GraphStressTest: Story = {
@@ -142,14 +151,28 @@ export const GraphStressTest: Story = {
   },
   render: (args) => {
     return (
-      <GraphApp config={generatePrettyBlocks(110, 1000, false, { useBezierConnections: false })} {...args}></GraphApp>
+      <GraphApp
+        config={generatePrettyBlocks({
+          layersCount: 110,
+          connectionsPerLayer: 1000,
+          overrideSettings: { useBezierConnections: false },
+        })}
+        {...args}
+      ></GraphApp>
     );
   },
 };
 export const NirvanaMaxGraphTest: Story = {
   render: (args) => {
     return (
-      <GraphApp config={generatePrettyBlocks(55, 400, false, { useBezierConnections: true })} {...args}></GraphApp>
+      <GraphApp
+        config={generatePrettyBlocks({
+          layersCount: 55,
+          connectionsPerLayer: 400,
+          overrideSettings: { useBezierConnections: true },
+        })}
+        {...args}
+      ></GraphApp>
     );
   },
 };
@@ -168,7 +191,7 @@ export const VerticalGraph: Story = {
 export const SnappingGraph: Story = {
   render: (args) => (
     <GraphApp
-      config={generatePrettyBlocks(4, 100)}
+      config={generatePrettyBlocks({ layersCount: 4, connectionsPerLayer: 100 })}
       {...args}
       constants={{ block: { SNAPPING_GRID_SIZE: 60 } }}
     ></GraphApp>

src/stories/plugins/elk/elk.stories.tsx

@@ -4,50 +4,59 @@ import { Select, SelectOption, ThemeProvider } from "@gravity-ui/uikit";
 import type { Meta, StoryFn } from "@storybook/react";
 
 import { Graph, GraphCanvas, GraphState, TBlock, TConnection, useGraph, useGraphEvent } from "../../../index";
-import { MultipointConnection } from "../../../plugins/elk/components/MultipointConnection";
-import { useElk } from "../../../plugins/elk/hooks/useElk";
+import { MultipointConnection, useElk } from "../../../plugins";
 import { TMultipointConnection } from "../../../plugins/elk/types";
 import { useFn } from "../../../utils/hooks/useFn";
-import { generatePrettyBlocks } from "../../configurations/generatePretty";
 import { BlockStory } from "../../main/Block";
 
-import { getElkConfig } from "./getElkConfig";
+import { getExampleConfig } from "./getExampleConfig";
+
+export enum Algorithm {
+  Box = "box",
+  Layered = "layered",
+  Disco = "disco",
+  Radial = "radial",
+  MrTree = "mrtree",
+  Force = "force",
+  Stress = "stress",
+  Random = "random",
+  SporeOverlap = "sporeOverlap",
+  SporeCompaction = "sporeCompaction",
+}
 
 import "@gravity-ui/uikit/styles/styles.css";
 
-const config = generatePrettyBlocks(10, 30, true);
-
 const GraphApp = () => {
-  const [algorithm, setAlgorithm] = useState("layered");
+  const [algorithm, setAlgorithm] = useState(Algorithm.Layered);
+  const [algorithms, setAlgorithms] = useState<SelectOption[]>([]);
   const { graph, setEntities, start } = useGraph({
     settings: {
       connection: MultipointConnection,
     },
   });
 
-  const elkConfig = useMemo(() => {
-    return getElkConfig(config, algorithm);
+  const { elkConfig, graphConfig } = useMemo(() => {
+    return getExampleConfig(algorithm);
   }, [algorithm]);
 
   const { isLoading, elk, result } = useElk(elkConfig);
 
   useEffect(() => {
     if (isLoading || !result) return;
 
-    const connections = config.connections.reduce<(TConnection & Pick<TMultipointConnection, "points" | "labels">)[]>(
-      (acc, connection) => {
-        if (connection.id in result.edges) {
-          acc.push({
-            ...connection,
-            ...result.edges[connection.id],
-          });
-        }
-        return acc;
-      },
-      []
-    );
-
-    const blocks = config.blocks.map((block) => {
+    const connections = graphConfig.connections.reduce<
+      (TConnection & Pick<TMultipointConnection, "points" | "labels">)[]
+    >((acc, connection) => {
+      if (connection.id in result.edges) {
+        acc.push({
+          ...connection,
+          ...result.edges[connection.id],
+        });
+      }
+      return acc;
+    }, []);
+
+    const blocks = graphConfig.blocks.map((block) => {
       return {
         ...block,
         ...result.blocks[block.id],
@@ -62,8 +71,6 @@ const GraphApp = () => {
     graph.zoomTo("center", { padding: 300 });
   }, [isLoading, result]);
 
-  const [algorithms, setAlgorithms] = useState<SelectOption[]>([]);
-
   useEffect(() => {
     elk.knownLayoutAlgorithms().then((knownLayoutAlgorithms) => {
       setAlgorithms(
@@ -88,7 +95,7 @@ const GraphApp = () => {
 
   return (
     <ThemeProvider theme={"light"}>
-      <Select value={[algorithm]} options={algorithms} onUpdate={(v) => setAlgorithm(v[0])}></Select>
+      <Select value={[algorithm]} options={algorithms} onUpdate={(v) => setAlgorithm(v[0] as Algorithm)}></Select>
       <GraphCanvas className="graph" graph={graph} renderBlock={renderBlockFn} />;
     </ThemeProvider>
   );

src/stories/plugins/elk/generateExampleTree.ts

@@ -0,0 +1,33 @@
+import { TGraphConfig } from "../../../graph";
+import { createBlock } from "../../configurations/generatePretty";
+
+export function generateExampleTree(levels: number) {
+  const tree: Pick<TGraphConfig, "blocks" | "connections"> = {
+    blocks: [],
+    connections: [],
+  };
+
+  function generateLevel(level: number, parentIndex = -1) {
+    const numNodes = 2 ** level;
+
+    for (let i = 0; i < numNodes; i++) {
+      const id = `block_${level}-${i}`;
+      tree.blocks.push(createBlock(1, 1, `${level}-${i}`));
+
+      if (level) {
+        const sourceId = `block_${level - 1}-${parentIndex - 1}`;
+        tree.connections.push({
+          id: `${sourceId}/${id}`,
+          targetBlockId: id,
+          sourceBlockId: sourceId,
+        });
+      }
+    }
+  }
+
+  for (let i = 0; i < levels; i++) {
+    generateLevel(i, Math.floor(2 ** i / 2));
+  }
+
+  return tree;
+}