From 6c516a06566d54fd67833419928e1fbd80b4b8f8 Mon Sep 17 00:00:00 2001
From: Alexis Jacomy <alexis.jacomy@gmail.com>
Date: Fri, 19 Jul 2024 17:18:14 +0200
Subject: [PATCH] [storybook] Updates layer-webgl stories so that they showcase
 layers by default

---
 .../storybook/stories/layer-webgl/contour-line.ts  | 14 ++++++++++----
 .../storybook/stories/layer-webgl/metaballs.ts     | 14 +++++++++-----
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/storybook/stories/layer-webgl/contour-line.ts b/packages/storybook/stories/layer-webgl/contour-line.ts
index 582dfe8f2..280e707fd 100644
--- a/packages/storybook/stories/layer-webgl/contour-line.ts
+++ b/packages/storybook/stories/layer-webgl/contour-line.ts
@@ -40,7 +40,7 @@ export default () => {
   checkboxesContainer.style.bottom = "10px";
   document.body.append(checkboxesContainer);
 
-  communitiesArray.forEach((community) => {
+  communitiesArray.forEach((community, i) => {
     const id = `cb-${community}`;
     const checkboxContainer = document.createElement("div");
     checkboxContainer.innerHTML += `
@@ -51,8 +51,7 @@ export default () => {
     const checkbox = checkboxesContainer.querySelector(`#${id}`) as HTMLInputElement;
 
     let clean: null | (() => void) = null;
-
-    checkbox.addEventListener("click", () => {
+    const toggle = () => {
       if (clean) {
         clean();
         clean = null;
@@ -69,7 +68,14 @@ export default () => {
           ),
         );
       }
-    });
+    };
+
+    checkbox.addEventListener("change", toggle);
+
+    if (!i) {
+      checkbox.checked = true;
+      toggle();
+    }
   });
 
   onStoryDown(() => {
diff --git a/packages/storybook/stories/layer-webgl/metaballs.ts b/packages/storybook/stories/layer-webgl/metaballs.ts
index 756dd0eeb..2081aef07 100644
--- a/packages/storybook/stories/layer-webgl/metaballs.ts
+++ b/packages/storybook/stories/layer-webgl/metaballs.ts
@@ -18,6 +18,7 @@ export default () => {
       louvain.assign(graph, { nodeCommunityAttribute: "community" });
       const communities = new Set<string>();
       graph.forEachNode((_, attrs) => communities.add(attrs.community));
+      const communitiesArray = Array.from(communities);
 
       // Retrieve some useful DOM elements:
       const container = document.getElementById("sigma-container") as HTMLElement;
@@ -30,9 +31,7 @@ export default () => {
       const select = document.createElement("select");
       select.innerHTML =
         `<option value="">No community</option>` +
-        Array.from(communities)
-          .map((str) => `<option value="${str}">Community ${str}</option>`)
-          .join("");
+        communitiesArray.map((str) => `<option value="${str}">Community ${str}</option>`).join("");
       select.style.position = "absolute";
       select.style.right = "10px";
       select.style.bottom = "10px";
@@ -40,7 +39,7 @@ export default () => {
 
       // Handle metaballs layer:
       let cleanWebGLLayer: null | (() => void) = null;
-      select.addEventListener("change", () => {
+      const checkSelectedOption = () => {
         if (cleanWebGLLayer) cleanWebGLLayer();
 
         const community = select.value;
@@ -53,7 +52,12 @@ export default () => {
         } else {
           cleanWebGLLayer = null;
         }
-      });
+      };
+      select.addEventListener("change", checkSelectedOption);
+
+      // Select first community:
+      select.value = communitiesArray[0];
+      checkSelectedOption();
     });
 
   onStoryDown(() => {