Refactor stories: Destroy Cosmos when switching stories

Author: Stukova

src/stories/clusters.stories.ts

@@ -1,5 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/html'
+import type { Meta } from '@storybook/html'
 import { CosmosStoryProps } from '@/graph/stories/create-cosmos'
+import { createStory, Story } from '@/graph/stories/create-story'
 import { WithLabelsStory } from './clusters/with-labels'
 import { WormStory } from './clusters/worm'
 import { RadialStory } from './clusters/radial'
@@ -19,35 +20,39 @@ const meta: Meta<CosmosStoryProps> = {
   },
 }
 
-type Story = StoryObj<CosmosStoryProps>;
-
 const sourceCodeAddonParams = [
   { name: 'create-cosmos', code: createCosmosRaw },
   { name: 'generate-mesh-data', code: generateMeshDataRaw },
 ]
 
-export const Worm = WormStory as Story
-Worm.parameters = {
-  sourceCode: [
-    { name: 'Story', code: wormStory },
-    ...sourceCodeAddonParams,
-  ],
+export const Worm: Story = {
+  ...createStory(WormStory),
+  parameters: {
+    sourceCode: [
+      { name: 'Story', code: wormStory },
+      ...sourceCodeAddonParams,
+    ],
+  },
 }
 
-export const Radial = RadialStory as Story
-Radial.parameters = {
-  sourceCode: [
-    { name: 'Story', code: radialStory },
-    ...sourceCodeAddonParams,
-  ],
+export const Radial: Story = {
+  ...createStory(RadialStory),
+  parameters: {
+    sourceCode: [
+      { name: 'Story', code: radialStory },
+      ...sourceCodeAddonParams,
+    ],
+  },
 }
 
-export const WithLabels = WithLabelsStory as Story
-WithLabels.parameters = {
-  sourceCode: [
-    { name: 'Story', code: withLabelsStory },
-    ...sourceCodeAddonParams,
-  ],
+export const WithLabels: Story = {
+  ...createStory(WithLabelsStory),
+  parameters: {
+    sourceCode: [
+      { name: 'Story', code: withLabelsStory },
+      ...sourceCodeAddonParams,
+    ],
+  },
 }
 
 // eslint-disable-next-line import/no-default-export

src/stories/clusters/radial.ts

@@ -1,14 +1,16 @@
 
+import { Graph } from '@cosmograph/cosmos'
 import { createCosmos } from '../create-cosmos'
 import { generateMeshData } from '../generate-mesh-data'
 
-export const RadialStory = (): HTMLDivElement => {
+export const RadialStory = (): { graph: Graph; div: HTMLDivElement} => {
   const {
     pointPositions, pointColors, pointSizes,
     links, linkColors, linkWidths,
     pointClusters, clusterPositions, clusterStrength,
   } = generateMeshData(100, 100, 100, 1.0)
-  const { div } = createCosmos({
+
+  return createCosmos({
     pointPositions,
     pointColors,
     pointSizes,
@@ -19,6 +21,4 @@ export const RadialStory = (): HTMLDivElement => {
     clusterPositions,
     clusterStrength,
   })
-
-  return div
 }

src/stories/clusters/with-labels.ts

@@ -1,9 +1,10 @@
 
+import { Graph } from '@cosmograph/cosmos'
 import { createClusterLabels } from '../create-cluster-labels'
 import { createCosmos } from '../create-cosmos'
 import { generateMeshData } from '../generate-mesh-data'
 
-export const WithLabelsStory = (): HTMLDivElement => {
+export const WithLabelsStory = (): {div: HTMLDivElement; graph: Graph } => {
   const { pointPositions, pointColors, pointClusters } = generateMeshData(100, 100, 15, 1.0)
   const { div, graph } = createCosmos({
     pointPositions,
@@ -20,5 +21,5 @@ export const WithLabelsStory = (): HTMLDivElement => {
     onSimulationTick: updateClusterLabels.bind(this, graph),
   })
 
-  return div
+  return { div, graph }
 }

src/stories/clusters/worm.ts

@@ -1,10 +1,12 @@
 
+import { Graph } from '@cosmograph/cosmos'
 import { createCosmos } from '../create-cosmos'
 import { generateMeshData } from '../generate-mesh-data'
 
-export const WormStory = (): HTMLDivElement => {
+export const WormStory = (): {graph: Graph; div: HTMLDivElement} => {
   const { pointPositions, pointColors, links, linkColors, pointClusters } = generateMeshData(100, 100, 1000, 1.0)
-  const { div } = createCosmos({
+
+  return createCosmos({
     simulationGravity: 0.5,
     simulationRepulsion: 1,
     simulationLinkSpring: 1,
@@ -14,6 +16,4 @@ export const WormStory = (): HTMLDivElement => {
     links,
     linkColors,
   })
-
-  return div
 }

src/stories/create-cosmos.ts

@@ -17,10 +17,8 @@ export type CosmosStoryProps = GraphConfigInterface & {
 
 export const createCosmos = (props: CosmosStoryProps): { div: HTMLDivElement; graph: Graph} => {
   const div = document.createElement('div')
-  // const canvas = document.createElement('canvas')
   div.style.height = '100vh'
   div.style.width = '100%'
-  // div.appendChild(canvas)
 
   const config: GraphConfigInterface = {
     backgroundColor: '#212C42',

src/stories/create-story.ts

@@ -0,0 +1,21 @@
+import { Graph } from '@cosmograph/cosmos'
+import type { StoryObj } from '@storybook/html'
+import { CosmosStoryProps } from '@/graph/stories/create-cosmos'
+
+export type Story = StoryObj<CosmosStoryProps & { graph: Graph }>;
+
+export const createStory: (storyFunction: () => {
+  graph: Graph;
+  div: HTMLDivElement;
+}) => Story = (storyFunction) => ({
+  async beforeEach (d): Promise<() => void> {
+    return (): void => {
+      d.args.graph?.destroy()
+    }
+  },
+  render: (args): HTMLDivElement => {
+    const story = storyFunction()
+    args.graph = story.graph
+    return story.div
+  },
+})

src/stories/experiments.stories.ts

@@ -1,5 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/html'
+import type { Meta } from '@storybook/html'
 
+import { createStory, Story } from '@/graph/stories/create-story'
 import { CosmosStoryProps } from './create-cosmos'
 import { MeshWithHolesStory } from './experiments/mesh-with-holes'
 import { FullMeshStory } from './experiments/full-mesh'
@@ -14,26 +15,28 @@ const meta: Meta<CosmosStoryProps> = {
   title: 'Examples/Experiments',
 }
 
-type Story = StoryObj<CosmosStoryProps>;
-
 const sourceCodeAddonParams = [
   { name: 'create-cosmos', code: createCosmosRaw },
   { name: 'generate-mesh-data', code: generateMeshDataRaw },
 ]
 
-export const FullMesh = FullMeshStory as Story
-FullMesh.parameters = {
-  sourceCode: [
-    { name: 'Story', code: fullMeshRaw },
-    ...sourceCodeAddonParams,
-  ],
+export const FullMesh: Story = {
+  ...createStory(FullMeshStory),
+  parameters: {
+    sourceCode: [
+      { name: 'Story', code: fullMeshRaw },
+      ...sourceCodeAddonParams,
+    ],
+  },
 }
-export const MeshWithHoles = MeshWithHolesStory as Story
-MeshWithHoles.parameters = {
-  sourceCode: [
-    { name: 'Story', code: meshWithHolesRaw },
-    ...sourceCodeAddonParams,
-  ],
+export const MeshWithHoles: Story = {
+  ...createStory(MeshWithHolesStory),
+  parameters: {
+    sourceCode: [
+      { name: 'Story', code: meshWithHolesRaw },
+      ...sourceCodeAddonParams,
+    ],
+  },
 }
 
 // eslint-disable-next-line import/no-default-export

src/stories/experiments/full-mesh.ts

@@ -1,13 +1,13 @@
+import { Graph } from '@cosmograph/cosmos'
 import { createCosmos } from '../create-cosmos'
 import { generateMeshData } from '../generate-mesh-data'
 
-export const FullMeshStory = (): HTMLDivElement => {
+export const FullMeshStory = (): { graph: Graph; div: HTMLDivElement} => {
   const { pointPositions, links, pointColors } = generateMeshData(40, 30, 15, 1.0)
-  const { div } = createCosmos({
+
+  return createCosmos({
     pointPositions,
     links,
     pointColors,
   })
-
-  return div
 }

src/stories/experiments/mesh-with-holes.ts

@@ -1,13 +1,13 @@
+import { Graph } from '@cosmograph/cosmos'
 import { createCosmos } from '../create-cosmos'
 import { generateMeshData } from '../generate-mesh-data'
 
-export const MeshWithHolesStory = (): HTMLDivElement => {
+export const MeshWithHolesStory = (): { graph: Graph; div: HTMLDivElement} => {
   const { pointPositions, links, pointColors } = generateMeshData(40, 80, 15, 0.8)
-  const { div } = createCosmos({
+
+  return createCosmos({
     pointPositions,
     links,
     pointColors,
   })
-
-  return div
 }