[storybook] Updates layer-webgl stories so that they showcase layers …

…by default
jacomyal · Jul 19, 2024 · 6c516a0 · 6c516a0
1 parent 9431e83
commit 6c516a0
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git 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
@@ -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,17 +31,15 @@ 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";
       document.body.append(select);
 
       // 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(() => {