diff --git a/frontend/layout/lib/TileLayout.stories.tsx b/frontend/layout/lib/TileLayout.stories.tsx
deleted file mode 100644
index 96818a58..00000000
--- a/frontend/layout/lib/TileLayout.stories.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-// // Copyright 2024, Command Line Inc.
-// // SPDX-License-Identifier: Apache-2.0
-
-// import type { Meta, StoryObj } from "@storybook/react";
-
-// import { TileLayout } from "./TileLayout.jsx";
-
-// import { atom } from "jotai";
-// import { useState } from "react";
-// import { newLayoutNode } from "./layoutNode.js";
-// import "./tilelayout.stories.less";
-// import {
-// LayoutNode,
-// LayoutTreeActionType,
-// LayoutTreeInsertNodeAction,
-// LayoutTreeState,
-// NodeModel,
-// WritableLayoutTreeStateAtom,
-// } from "./types.js";
-
-// const renderTestData = (data: string) => {data}
;
-
-// function newLayoutTreeStateAtom(node: LayoutNode): WritableLayoutTreeStateAtom {
-// return atom({ rootNode: node } as LayoutTreeState);
-// }
-
-// function renderContent(nodeModel: NodeModel) {
-// return (
-//
-// {renderTestData(nodeModel.blockId)}
-//
-// );
-// }
-
-// const meta = {
-// title: "TileLayout",
-// args: {
-// layoutTreeStateAtom: newLayoutTreeStateAtom(
-// newLayoutNode(undefined, undefined, undefined, {
-// blockId: "Hello world!",
-// })
-// ),
-// contents: {
-// renderContent,
-// renderPreview: renderContent,
-// tabId: "",
-// },
-// },
-// component: TileLayout,
-// // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-// tags: ["autodocs"],
-// } satisfies Meta;
-
-// export default meta;
-// type Story = StoryObj;
-
-// export const Basic: Story = {
-// args: {
-// layoutTreeStateAtom: newLayoutTreeStateAtom(
-// newLayoutNode(undefined, undefined, undefined, { blockId: "Hello world!" })
-// ),
-// },
-// };
-
-// export const More: Story = {
-// args: {
-// layoutTreeStateAtom: newLayoutTreeStateAtom(
-// newLayoutNode(undefined, undefined, [
-// newLayoutNode(undefined, undefined, undefined, { name: "Hello world1!" }),
-// newLayoutNode(undefined, undefined, undefined, { name: "Hello world2!" }),
-// newLayoutNode(undefined, undefined, [
-// newLayoutNode(undefined, undefined, undefined, { name: "Hello world3!" }),
-// newLayoutNode(undefined, undefined, undefined, { name: "Hello world4!" }),
-// ]),
-// ])
-// ),
-// },
-// };
-
-// const evenMoreRootNode = newLayoutNode(undefined, undefined, [
-// newLayoutNode(undefined, undefined, undefined, { name: "Hello world1!" }),
-// newLayoutNode(undefined, undefined, [
-// newLayoutNode(undefined, undefined, undefined, { name: "Hello world2!" }),
-// newLayoutNode(undefined, undefined, undefined, { name: "Hello world3!" }),
-// ]),
-// newLayoutNode(undefined, undefined, [
-// newLayoutNode(undefined, undefined, undefined, { name: "Hello world4!" }),
-// newLayoutNode(undefined, undefined, undefined, { name: "Hello world5!" }),
-// newLayoutNode(undefined, undefined, [
-// newLayoutNode(undefined, undefined, undefined, { name: "Hello world6!" }),
-// newLayoutNode(undefined, undefined, undefined, { name: "Hello world7!" }),
-// newLayoutNode(undefined, undefined, undefined, { name: "Hello world8!" }),
-// ]),
-// ]),
-// ]);
-
-// export const EvenMore: Story = {
-// args: {
-// layoutTreeStateAtom: newLayoutTreeStateAtom(evenMoreRootNode),
-// },
-// };
-
-// const addNodeAtom = newLayoutTreeStateAtom(evenMoreRootNode);
-
-// export const AddNode: Story = {
-// render: () => {
-// const [, dispatch] = useLayoutTreeStateReducerAtom(addNodeAtom);
-// const [numAddedNodes, setNumAddedNodes] = useState(0);
-// const dispatchAddNode = () => {
-// const newNode = newLayoutNode(undefined, undefined, undefined, {
-// name: "New Node" + numAddedNodes,
-// });
-// const insertNodeAction: LayoutTreeInsertNodeAction = {
-// type: LayoutTreeActionType.InsertNode,
-// node: newNode,
-// };
-// dispatch(insertNodeAction);
-// setNumAddedNodes(numAddedNodes + 1);
-// };
-// return (
-//
-//
-//
-//
-//
}
-// contents={meta.args.contents}
-// />
-// {data}
;
+
+function newLayoutTreeStateAtom(node: LayoutNode): WritableLayoutTreeStateAtom {
+ return atom({ rootNode: node } as LayoutTreeState);
+}
+
+function renderContent(nodeModel: NodeModel) {
+ return (
+
+ {renderTestData(nodeModel.blockId)}
+
+ );
+}
+
+const meta = {
+ title: "TileLayout",
+ args: {
+ layoutTreeStateAtom: newLayoutTreeStateAtom(
+ newLayoutNode(undefined, undefined, undefined, {
+ blockId: "Hello world!",
+ })
+ ),
+ contents: {
+ renderContent,
+ renderPreview: renderContent,
+ tabId: "",
+ },
+ },
+ component: TileLayout,
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+ tags: ["autodocs"],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Basic: Story = {
+ args: {
+ layoutTreeStateAtom: newLayoutTreeStateAtom(
+ newLayoutNode(undefined, undefined, undefined, { blockId: "Hello world!" })
+ ),
+ },
+};
+
+export const More: Story = {
+ args: {
+ layoutTreeStateAtom: newLayoutTreeStateAtom(
+ newLayoutNode(undefined, undefined, [
+ newLayoutNode(undefined, undefined, undefined, { name: "Hello world1!" }),
+ newLayoutNode(undefined, undefined, undefined, { name: "Hello world2!" }),
+ newLayoutNode(undefined, undefined, [
+ newLayoutNode(undefined, undefined, undefined, { name: "Hello world3!" }),
+ newLayoutNode(undefined, undefined, undefined, { name: "Hello world4!" }),
+ ]),
+ ])
+ ),
+ },
+};
+
+const evenMoreRootNode = newLayoutNode(undefined, undefined, [
+ newLayoutNode(undefined, undefined, undefined, { name: "Hello world1!" }),
+ newLayoutNode(undefined, undefined, [
+ newLayoutNode(undefined, undefined, undefined, { name: "Hello world2!" }),
+ newLayoutNode(undefined, undefined, undefined, { name: "Hello world3!" }),
+ ]),
+ newLayoutNode(undefined, undefined, [
+ newLayoutNode(undefined, undefined, undefined, { name: "Hello world4!" }),
+ newLayoutNode(undefined, undefined, undefined, { name: "Hello world5!" }),
+ newLayoutNode(undefined, undefined, [
+ newLayoutNode(undefined, undefined, undefined, { name: "Hello world6!" }),
+ newLayoutNode(undefined, undefined, undefined, { name: "Hello world7!" }),
+ newLayoutNode(undefined, undefined, undefined, { name: "Hello world8!" }),
+ ]),
+ ]),
+]);
+
+export const EvenMore: Story = {
+ args: {
+ layoutTreeStateAtom: newLayoutTreeStateAtom(evenMoreRootNode),
+ },
+};
+
+const addNodeAtom = newLayoutTreeStateAtom(evenMoreRootNode);
+
+export const AddNode: Story = {
+ render: () => {
+ const [, dispatch] = useLayoutTreeStateReducerAtom(addNodeAtom);
+ const [numAddedNodes, setNumAddedNodes] = useState(0);
+ const dispatchAddNode = () => {
+ const newNode = newLayoutNode(undefined, undefined, undefined, {
+ name: "New Node" + numAddedNodes,
+ });
+ const insertNodeAction: LayoutTreeInsertNodeAction = {
+ type: LayoutTreeActionType.InsertNode,
+ node: newNode,
+ };
+ dispatch(insertNodeAction);
+ setNumAddedNodes(numAddedNodes + 1);
+ };
+ return (
+
+
+
+
+
}
+ contents={meta.args.contents}
+ />
+