chore: add controls to elk story (#79)

* chore: add controls to elk story

* chore: disable labels for some algorithms

Author: SimbiozizV

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

@@ -1,10 +1,20 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo } from "react";
 
-import { Select, SelectOption, ThemeProvider } from "@gravity-ui/uikit";
+import { ThemeProvider } from "@gravity-ui/uikit";
+import { Description, Meta as StorybookMeta, Title } from "@storybook/blocks";
 import type { Meta, StoryFn } from "@storybook/react";
-import ELK from "elkjs";
-
-import { Graph, GraphCanvas, GraphState, TBlock, TConnection, useGraph, useGraphEvent } from "../../../index";
+import ELK, { ElkNode } from "elkjs";
+
+import {
+  Graph,
+  GraphCanvas,
+  GraphState,
+  TBlock,
+  TConnection,
+  TGraphConfig,
+  useGraph,
+  useGraphEvent,
+} from "../../../index";
 import { MultipointConnection, useElk } from "../../../plugins";
 import { TMultipointConnection } from "../../../plugins/elk/types";
 import { useFn } from "../../../utils/hooks/useFn";
@@ -27,10 +37,12 @@ export enum Algorithm {
 
 import "@gravity-ui/uikit/styles/styles.css";
 
-const GraphApp = () => {
-  const [algorithm, setAlgorithm] = useState(Algorithm.Layered);
-  const [algorithms, setAlgorithms] = useState<SelectOption[]>([]);
+interface GraphAppProps {
+  elkConfig?: ElkNode;
+  graphConfig?: TGraphConfig;
+}
 
+const GraphApp = ({ elkConfig, graphConfig }: GraphAppProps) => {
   const elk = useMemo(() => new ELK(), []);
 
   const { graph, setEntities, start } = useGraph({
@@ -39,10 +51,6 @@ const GraphApp = () => {
     },
   });
 
-  const { elkConfig, graphConfig } = useMemo(() => {
-    return getExampleConfig(algorithm);
-  }, [algorithm]);
-
   const { isLoading, result } = useElk(elkConfig, elk);
 
   useEffect(() => {
@@ -75,18 +83,6 @@ const GraphApp = () => {
     graph.zoomTo("center", { padding: 300 });
   }, [isLoading, result]);
 
-  useEffect(() => {
-    elk.knownLayoutAlgorithms().then((knownLayoutAlgorithms) => {
-      setAlgorithms(
-        knownLayoutAlgorithms.map((knownLayoutAlgorithm) => {
-          const { id, name } = knownLayoutAlgorithm;
-          const algId = id.split(".").at(-1);
-          return { value: algId, content: name };
-        })
-      );
-    });
-  }, [elk]);
-
   useGraphEvent(graph, "state-change", ({ state }) => {
     if (state === GraphState.ATTACHED) {
       start();
@@ -99,17 +95,130 @@ const GraphApp = () => {
 
   return (
     <ThemeProvider theme={"light"}>
-      <Select value={[algorithm]} options={algorithms} onUpdate={(v) => setAlgorithm(v[0] as Algorithm)}></Select>
-      <GraphCanvas className="graph" graph={graph} renderBlock={renderBlockFn} />;
+      <GraphCanvas className="graph" graph={graph} renderBlock={renderBlockFn} />
     </ThemeProvider>
   );
 };
 
-const meta: Meta = {
+const meta: Meta<typeof GraphApp> = {
   title: "Plugins/ELK",
   component: GraphApp,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <StorybookMeta />
+          <Title />
+          <Description />
+        </>
+      ),
+      description: {
+        component:
+          "The useElk hook is used to compute graph layouts using the ELK (Eclipse Layout Kernel) layout engine. It " +
+          "provides a React-friendly way to integrate ELK.js into your application.\n\n" +
+          "## Usage\n\n" +
+          "```tsx\n" +
+          "const { isLoading, result } = useElk(elkConfig, elk);\n" +
+          "```\n\n" +
+          "### Parameters\n\n" +
+          "- `elkConfig`: ElkNode configuration object that describes the graph structure and layout options\n" +
+          "- `elk`: Instance of the ELK layout engine\n\n" +
+          "### Returns\n\n" +
+          "- `isLoading`: Boolean indicating if the layout computation is in progress\n" +
+          "- `result`: The computed layout result containing node positions and edge routing information\n\n" +
+          "## Layout Algorithms\n\n" +
+          "ELK.js supports several layout algorithms that can be specified in the elkConfig:\n\n" +
+          "- `box`: Pack the nodes like boxes\n" +
+          "- `layered`: Hierarchical layout, good for DAGs and trees\n" +
+          "- `force`: Force-directed layout\n" +
+          "- `stress`: Stress-minimizing layout\n" +
+          "- `mrtree`: Traditional tree layout\n" +
+          "- `radial`: Radial layout\n" +
+          "- `random`: Random node placement\n\n" +
+          "## Example\n\n" +
+          "```tsx\n" +
+          "import React from 'react';\n" +
+          "import { GraphCanvas, useGraph, useElk } from '@gravity-ui/graph';\n" +
+          "import ELK from 'elkjs';\n\n" +
+          "const elkConfig = {\n" +
+          '  id: "root",\n' +
+          "  children: [\n" +
+          '    { id: "n1", width: 30, height: 30 },\n' +
+          '    { id: "n2", width: 30, height: 30 }\n' +
+          "  ],\n" +
+          "  edges: [\n" +
+          '    { id: "e1", sources: ["n1"], targets: ["n2"] }\n' +
+          "  ],\n" +
+          "  layoutOptions: {\n" +
+          "    'algorithm': 'layered',\n" +
+          "    'elk.direction': 'DOWN',\n" +
+          "    'elk.spacing.nodeNode': '50'\n" +
+          "  }\n" +
+          "};\n\n" +
+          "function MyGraphWithElk() {\n" +
+          "  const elk = React.useMemo(() => new ELK(), []);\n" +
+          "  const { graph } = useGraph();\n\n" +
+          "  const { isLoading, result } = useElk(elkConfig, elk);\n\n" +
+          "  React.useEffect(() => {\n" +
+          "    if (!isLoading && result) {\n" +
+          "      graph.setEntities({\n" +
+          "        blocks: result.blocks,\n" +
+          "        connections: result.edges\n" +
+          "      });\n" +
+          "    }\n" +
+          "  }, [isLoading, result]);\n\n" +
+          "  return <GraphCanvas graph={graph} />;\n" +
+          "}\n" +
+          "```\n\n" +
+          "## Resources\n\n" +
+          "- [ELK.js on GitHub](https://github.com/kieler/elkjs)\n" +
+          "- [ELK Documentation](https://eclipse.dev/elk/documentation.html)\n" +
+          "- [ELK Algorithm Documentation](https://eclipse.dev/elk/reference/algorithms.html)",
+      },
+    },
+  },
+  argTypes: {
+    elkConfig: {
+      control: "object",
+      description: "ELK layout configuration object",
+    },
+    graphConfig: {
+      control: "object",
+      description: "Graph configuration with blocks and connections",
+    },
+  },
 };
 
 export default meta;
 
-export const Default: StoryFn = () => <GraphApp />;
+// Create a story for each algorithm
+export const Box: StoryFn<typeof GraphApp> = (args) => <GraphApp {...args} />;
+Box.args = getExampleConfig(Algorithm.Box);
+
+export const Layered: StoryFn<typeof GraphApp> = (args) => <GraphApp {...args} />;
+Layered.args = getExampleConfig(Algorithm.Layered);
+
+export const Disco: StoryFn<typeof GraphApp> = (args) => <GraphApp {...args} />;
+Disco.args = getExampleConfig(Algorithm.Disco);
+
+export const Radial: StoryFn<typeof GraphApp> = (args) => <GraphApp {...args} />;
+Radial.args = getExampleConfig(Algorithm.Radial);
+
+export const MrTree: StoryFn<typeof GraphApp> = (args) => <GraphApp {...args} />;
+MrTree.args = getExampleConfig(Algorithm.MrTree);
+
+export const Force: StoryFn<typeof GraphApp> = (args) => <GraphApp {...args} />;
+Force.args = getExampleConfig(Algorithm.Force);
+
+export const Stress: StoryFn<typeof GraphApp> = (args) => <GraphApp {...args} />;
+Stress.args = getExampleConfig(Algorithm.Stress);
+
+export const Random: StoryFn<typeof GraphApp> = (args) => <GraphApp {...args} />;
+Random.args = getExampleConfig(Algorithm.Random);
+
+export const SporeOverlap: StoryFn<typeof GraphApp> = (args) => <GraphApp {...args} />;
+SporeOverlap.args = getExampleConfig(Algorithm.SporeOverlap);
+
+export const SporeCompaction: StoryFn<typeof GraphApp> = (args) => <GraphApp {...args} />;
+SporeCompaction.args = getExampleConfig(Algorithm.SporeCompaction);

src/stories/plugins/elk/getExampleConfig.ts

@@ -19,15 +19,17 @@ const prepareChildren = (blocks: TGraphConfig["blocks"]) => {
   });
 };
 
-const prepareEdges = (connections: TGraphConfig["connections"]) => {
+const prepareEdges = (connections: TGraphConfig["connections"], skipLabels?: boolean) => {
   return connections.map((c, i) => {
     const labelText = `label ${i}`;
 
     return {
       id: c.id as string,
       sources: [c.sourceBlockId as string],
       targets: [c.targetBlockId as string],
-      labels: [{ text: labelText, width: measureText(labelText, `${FONT_SIZE}px sans-serif`), height: FONT_SIZE }],
+      labels: skipLabels
+        ? []
+        : [{ text: labelText, width: measureText(labelText, `${FONT_SIZE}px sans-serif`), height: FONT_SIZE }],
     } satisfies ElkExtendedEdge;
   });
 };
@@ -165,19 +167,30 @@ export const getExampleConfig = (algorithm: Algorithm): { elkConfig: ElkNode; gr
       };
     }
     case Algorithm.Radial:
+    case Algorithm.Stress:
+    case Algorithm.SporeOverlap: {
+      config = generateExampleTree(4);
+
+      return {
+        elkConfig: {
+          ...elkConfig,
+          children: prepareChildren(config.blocks),
+          edges: prepareEdges(config.connections),
+        },
+        graphConfig: config,
+      };
+    }
     case Algorithm.MrTree:
     case Algorithm.Random:
     case Algorithm.Force:
-    case Algorithm.Stress:
-    case Algorithm.SporeOverlap:
     case Algorithm.SporeCompaction: {
       config = generateExampleTree(4);
 
       return {
         elkConfig: {
           ...elkConfig,
           children: prepareChildren(config.blocks),
-          edges: prepareEdges(config.connections),
+          edges: prepareEdges(config.connections, true),
         },
         graphConfig: config,
       };