[storybook] Adds a story to show to handle nodes and edges opacity

packages/storybook/stories/nodes-edges-opacity/index.html

@@ -0,0 +1,16 @@
+<style>
+  body {
+    font-family: sans-serif;
+  }
+  html,
+  body,
+  #storybook-root,
+  #sigma-container {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+</style>
+<div id="sigma-container"></div>

packages/storybook/stories/nodes-edges-opacity/index.ts

@@ -0,0 +1,44 @@
+/**
+ * This example shows how to render nodes and edges with various opacities
+ */
+import chroma from "chroma-js";
+import Graph from "graphology";
+import Sigma from "sigma";
+
+import data from "../../public/data.json";
+import { onStoryDown } from "../utils";
+
+const DEFAULT_ARGS = {
+  nodesAlpha: 0.5,
+  edgesAlpha: 0.5,
+};
+
+export default (input: { args: typeof DEFAULT_ARGS }) => {
+  const args = {
+    ...DEFAULT_ARGS,
+    ...input.args,
+  };
+
+  const container = document.getElementById("sigma-container") as HTMLElement;
+
+  const graph = new Graph();
+  graph.import(data);
+  const renderer = new Sigma(graph, container, {
+    enableEdgeEvents: true,
+    edgeReducer: (_, attr) => {
+      attr.color = chroma(attr.color || "#000000")
+        .alpha(args.edgesAlpha)
+        .hex();
+      return attr;
+    },
+    nodeReducer: (_, attr) => {
+      attr.color = chroma(attr.color).alpha(args.nodesAlpha).hex();
+      attr.label = null;
+      return attr;
+    },
+  });
+
+  onStoryDown(() => {
+    renderer?.kill();
+  });
+};

packages/storybook/stories/nodes-edges-opacity/stories.ts

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+
+import play from "./index";
+import template from "./index.html?raw";
+import source from "./index?raw";
+
+type StoryArgs = {
+  nodesAlpha: number;
+  edgesAlpha: number;
+};
+
+const meta: Meta<StoryArgs> = {
+  id: "nodes-edges-opacity",
+  title: "Examples",
+  argTypes: {
+    nodesAlpha: {
+      name: "Nodes alpha",
+      defaultValue: 0.5,
+      control: { type: "number", step: "0.05", min: "0", max: "1" },
+    },
+    edgesAlpha: {
+      name: "Edges alpha",
+      defaultValue: 0.5,
+      control: { type: "number", step: "0.05", min: "0", max: "1" },
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<StoryArgs>;
+
+export const story: Story = {
+  name: "Display nodes and edges with opacity",
+  render: () => template,
+  play,
+  args: {
+    nodesAlpha: 0.5,
+    edgesAlpha: 0.5,
+  },
+  parameters: {
+    storySource: {
+      source,
+    },
+  },
+};