@1771technologies/lytenyte-pro 1.0.1 → 1.0.3

package/dist/row-data-source-client/use-client-data-source.js

@@ -1,8 +1,7 @@
 import {} from "../+types.js";
 import { useRef } from "react";
-import { atom, createStore } from "@1771technologies/atom";
 import { traverse } from "./tree/traverse.js";
-import { dateComparator, makeGridAtom, numberComparator, stringComparator, } from "@1771technologies/lytenyte-shared";
+import { computed, dateComparator, effect, makeAtom, numberComparator, peek, signal, stringComparator, } from "@1771technologies/lytenyte-shared";
 import { equal, get, itemsWithIdToMap } from "@1771technologies/lytenyte-js-utils";
 import { computeFilteredRows } from "./filter/compute-filtered-rows.js";
 import { builtIns } from "./built-ins/built-ins.js";
@@ -10,17 +9,16 @@ import { createPivotColumns } from "./pivots/create-pivot-columns.js";
 import { createAggModel } from "./pivots/create-agg-model.js";
 import { makeClientTree } from "./tree/client-tree.js";
 export function makeClientDataSource(p) {
-    const rdsStore = createStore();
-    const data = atom(p.data);
-    const topData = atom(p.topData ?? []);
-    const bottomData = atom(p.bottomData ?? []);
-    const dataToSrc$ = atom((g) => {
-        return new Map(g(data).map((c, i) => [c, i]));
+    const data = signal(p.data);
+    const topData = signal(p.topData ?? []);
+    const bottomData = signal(p.bottomData ?? []);
+    const dataToSrc$ = computed(() => {
+        return new Map(data().map((c, i) => [c, i]));
     });
     const cache = new Map();
-    const centerNodes = atom((g) => {
+    const centerNodes = computed(() => {
         const nodes = [];
-        const d = g(data);
+        const d = data();
         for (let i = 0; i < d.length; i++) {
             if (!cache.has(i)) {
                 cache.set(i, {
@@ -35,17 +33,17 @@ export function makeClientDataSource(p) {
         }
         return nodes;
     });
-    const topNodes = atom((g) => {
-        return g(topData).map((c, i) => ({ data: c, id: `top-${i}`, kind: "leaf" }));
+    const topNodes = computed(() => {
+        return topData().map((c, i) => ({ data: c, id: `top-${i}`, kind: "leaf" }));
     });
-    const botNodes = atom((g) => {
-        return g(bottomData).map((c, i) => ({ data: c, id: `bottom-${i}`, kind: "leaf" }));
+    const botNodes = computed(() => {
+        return bottomData().map((c, i) => ({ data: c, id: `bottom-${i}`, kind: "leaf" }));
     });
-    const pinnedIdMap = atom((g) => {
-        const combined = new Map([...g(topNodes), ...g(botNodes)].map((c) => [c.id, c]));
+    const pinnedIdMap = computed(() => {
+        const combined = new Map([...topNodes(), ...botNodes()].map((c) => [c.id, c]));
         return combined;
     });
-    const models = atom({
+    const models = signal({
         sort: [],
         filter: {},
         filterIn: {},
@@ -64,22 +62,22 @@ export function makeClientDataSource(p) {
             values: [],
         },
     });
-    const sortModel = atom((g) => g(models).sort);
-    const filterModel = atom((g) => g(models).filter);
-    const filterInModel = atom((g) => g(models).filterIn);
-    const rowGroupModel = atom((g) => g(models).group);
-    const groupExpansions = atom((g) => g(models).groupExpansions);
-    const aggModel = atom((g) => g(models).agg);
-    const quickSearch = atom((g) => g(models).quickSearch);
-    const columnPivotGroupExpansions = atom((g) => g(models).columnPivotGroupExpansions);
-    const columnPivotMode = atom((g) => g(models).pivotMode);
-    const columnPivotModel = atom((g) => g(models).pivotModel);
-    const grid$ = atom(null);
-    const snapshot = atom(0);
-    const pivotTree = atom((g) => {
-        g(snapshot);
-        const grid = g(grid$);
-        const model = g(columnPivotModel);
+    const sortModel = computed(() => models().sort);
+    const filterModel = computed(() => models().filter);
+    const filterInModel = computed(() => models().filterIn);
+    const rowGroupModel = computed(() => models().group);
+    const groupExpansions = computed(() => models().groupExpansions);
+    const aggModel = computed(() => models().agg);
+    const quickSearch = computed(() => models().quickSearch);
+    const columnPivotGroupExpansions = computed(() => models().columnPivotGroupExpansions);
+    const columnPivotMode = computed(() => models().pivotMode);
+    const columnPivotModel = computed(() => models().pivotModel);
+    const grid$ = signal(null);
+    const snapshot = signal(0);
+    const pivotTree = computed(() => {
+        snapshot();
+        const grid = grid$();
+        const model = columnPivotModel();
         const lookup = new Map(grid.state.columns.get().map((c) => [c.id, c]));
         const activeRows = model.rows.filter((c) => c.active ?? true);
         const rowGroups = activeRows.length
@@ -93,7 +91,7 @@ export function makeClientDataSource(p) {
                 };
             })
             : [{ fn: () => null }];
-        const filtered = computeFilteredRows(g(centerNodes), grid, model.filters, model.filtersIn, "", "case-sensitive", true);
+        const filtered = computeFilteredRows(centerNodes(), grid, model.filters, model.filtersIn, "", "case-sensitive", true);
         const aggModel = createAggModel(model, grid.state.columnPivotColumns.get(), grid.state.columnGroupJoinDelimiter.get());
         const rowAggModel = Object.entries(aggModel).map(([name, agg]) => {
             if (typeof agg.fn === "function") {
@@ -118,12 +116,12 @@ export function makeClientDataSource(p) {
             rowIdLeaf: p.rowIdLeaf,
         });
     });
-    const normalTree = atom((g) => {
-        g(snapshot);
-        const grid = g(grid$);
-        const rows = g(centerNodes);
-        const filtered = computeFilteredRows(rows, grid, g(filterModel), g(filterInModel), g(quickSearch), grid?.state.quickSearchSensitivity.get() ?? "case-sensitive", false);
-        const rowGroups = g(rowGroupModel)
+    const normalTree = computed(() => {
+        snapshot();
+        const grid = grid$();
+        const rows = centerNodes();
+        const filtered = computeFilteredRows(rows, grid, filterModel(), filterInModel(), quickSearch(), grid?.state.quickSearchSensitivity.get() ?? "case-sensitive", false);
+        const rowGroups = rowGroupModel()
             .map((c) => {
             if (typeof c === "string")
                 return (r) => grid.api.columnField(c, r);
@@ -134,7 +132,7 @@ export function makeClientDataSource(p) {
             return (r) => get(r.data, c.field.path);
         })
             .map((c) => ({ fn: c }));
-        const rowAggModel = Object.entries(g(aggModel)).map(([name, agg]) => {
+        const rowAggModel = Object.entries(aggModel()).map(([name, agg]) => {
             if (typeof agg.fn === "function") {
                 const fn = agg.fn;
                 return {
@@ -157,11 +155,11 @@ export function makeClientDataSource(p) {
             rowIdLeaf: p.rowIdLeaf,
         });
     });
-    const sortComparator = atom((g) => {
-        const model = g(columnPivotMode) ? g(columnPivotModel).sorts : g(sortModel);
-        const grid = g(grid$);
+    const sortComparator = computed(() => {
+        const model = sortModel();
+        const grid = grid$();
         if (!model.length || !grid)
-            return () => 0;
+            return { fn: () => 0 };
         const comparator = (l, r) => {
             let res = 0;
             for (const sortSpec of model) {
@@ -200,28 +198,28 @@ export function makeClientDataSource(p) {
             }
             return res;
         };
-        return comparator;
+        return { fn: comparator };
     });
-    const idToNode = atom((g) => {
+    const idToNode = computed(() => {
         const map = new Map();
-        traverse(g(tree).root, (node) => {
+        traverse(tree().root, (node) => {
             map.set(node.id, node);
         });
         return map;
     });
-    const tree = atom((g) => (g(columnPivotMode) ? g(pivotTree) : g(normalTree)));
-    const initialized = atom(false);
-    const flatPivot = atom((g) => {
-        if (!g(initialized))
+    const tree = computed(() => (columnPivotMode() ? pivotTree() : normalTree()));
+    const initialized = signal(false);
+    const flatPivot = computed(() => {
+        if (!initialized())
             return { flat: [], idMap: new Map(), idToIndexMap: new Map() };
         const idMap = new Map();
         const idToIndexMap = new Map();
         const flattened = [];
-        const comparator = g(sortComparator);
-        const expansions = g(columnPivotGroupExpansions);
-        const defaultExpansion = g(grid$)?.state.rowGroupDefaultExpansion.get() ?? false;
+        const comparator = sortComparator();
+        const expansions = columnPivotGroupExpansions();
+        const defaultExpansion = grid$()?.state.rowGroupDefaultExpansion.get() ?? false;
         let index = 0;
-        traverse(g(tree).root, (node) => {
+        traverse(tree().root, (node) => {
             if (node.kind === 1) {
                 return;
             }
@@ -244,20 +242,20 @@ export function makeClientDataSource(p) {
                         : defaultExpansion);
                 return expanded;
             }
-        }, comparator);
+        }, comparator.fn);
         return { flat: flattened, idMap, idToIndexMap };
     });
-    const flatNormal = atom((g) => {
-        if (!g(initialized))
+    const flatNormal = computed(() => {
+        if (!initialized())
             return { flat: [], idMap: new Map(), idToIndexMap: new Map() };
         const idMap = new Map();
         const idToIndexMap = new Map();
         const flattened = [];
-        const comparator = g(sortComparator);
-        const expansions = g(groupExpansions);
-        const defaultExpansion = g(grid$)?.state.rowGroupDefaultExpansion.get() ?? false;
-        let index = g(topNodes).length;
-        traverse(g(tree).root, (node) => {
+        const comparator = sortComparator();
+        const expansions = groupExpansions();
+        const defaultExpansion = grid$()?.state.rowGroupDefaultExpansion.get() ?? false;
+        let index = topNodes().length;
+        traverse(tree().root, (node) => {
             if (node.kind === 1) {
                 node.data.id = node.id;
                 flattened.push(node.data);
@@ -281,37 +279,28 @@ export function makeClientDataSource(p) {
                         : defaultExpansion);
                 return expanded;
             }
-        }, comparator);
+        }, comparator.fn);
         return { flat: flattened, idMap, idToIndexMap };
     });
-    const flat = atom((g) => (g(columnPivotMode) ? g(flatPivot) : g(flatNormal)));
-    const flatLength = atom((g) => g(flat).flat.length);
+    const flat = computed(() => (columnPivotMode() ? flatPivot() : flatNormal()));
+    const flatLength = computed(() => flat().flat.length);
     const cleanup = [];
     const init = (grid) => {
         while (cleanup.length)
             cleanup.pop()?.();
-        rdsStore.set(grid$, grid);
+        grid$.set(grid);
         const store = grid.state.rowDataStore;
         // Monitor row count changes
-        const centerCount = rdsStore.get(flatLength);
+        const centerCount = flatLength();
+        const top = topData().length;
+        const bottom = bottomData().length;
         store.rowCenterCount.set(centerCount);
-        cleanup.push(rdsStore.sub(flatLength, () => {
-            const centerCount = rdsStore.get(flatLength);
-            store.rowCenterCount.set(centerCount);
-            grid.state.rowDataStore.rowClearCache();
-        }));
-        const top = rdsStore.get(topData).length;
         store.rowTopCount.set(top);
-        cleanup.push(rdsStore.sub(topData, () => {
-            const top = rdsStore.get(topData).length;
-            store.rowTopCount.set(top);
-            grid.state.rowDataStore.rowClearCache();
-        }));
-        const bottom = rdsStore.get(bottomData).length;
         store.rowBottomCount.set(bottom);
-        cleanup.push(rdsStore.sub(bottomData, () => {
-            const bot = rdsStore.get(bottomData).length;
-            store.rowBottomCount.set(bot);
+        cleanup.push(effect(() => {
+            store.rowCenterCount.set(flatLength());
+            store.rowTopCount.set(topData().length);
+            store.rowBottomCount.set(bottomData().length);
             grid.state.rowDataStore.rowClearCache();
         }));
         const sort = grid.state.sortModel.get();
@@ -328,19 +317,19 @@ export function makeClientDataSource(p) {
         let prevPivotColumnValues = pivotModel.values;
         const updatePivotColumns = (model, ignoreEqualCheck = false) => {
             if (!ignoreEqualCheck &&
-                rdsStore.get(initialized) &&
+                peek(initialized) &&
                 equal(prevPivotColumnModel, model.columns) &&
                 equal(prevPivotColumnValues, model.values))
                 return;
             const lookup = itemsWithIdToMap(grid.state.columns.get());
-            const pivotColumns = createPivotColumns(model, lookup, grid, rdsStore.get(centerNodes));
+            const pivotColumns = createPivotColumns(model, lookup, grid, peek(centerNodes));
             grid.state.columnPivotColumns.set(pivotColumns);
             prevPivotColumnModel = model.columns;
             prevPivotColumnValues = model.values;
         };
         if (pivotMode)
             updatePivotColumns(pivotModel);
-        rdsStore.set(models, {
+        models.set({
             agg,
             filter,
             filterIn,
@@ -352,81 +341,59 @@ export function makeClientDataSource(p) {
             pivotModel,
             columnPivotGroupExpansions,
         });
-        rdsStore.set(initialized, true);
-        rdsStore.sub(centerNodes, () => {
+        initialized.set(true);
+        cleanup.push(effect(() => {
+            centerNodes();
             updatePivotColumns(grid.state.columnPivotModel.get(), true);
-        });
+        }));
         // Pivot model monitoring
         cleanup.push(grid.state.columnPivotMode.watch(() => {
             const model = grid.state.columnPivotModel.get();
             updatePivotColumns(model);
-            rdsStore.set(models, (prev) => ({ ...prev, pivotMode: grid.state.columnPivotMode.get() }));
+            models.set((prev) => ({ ...prev, pivotMode: grid.state.columnPivotMode.get() }));
             grid.state.rowDataStore.rowClearCache();
         }));
         cleanup.push(grid.state.columnPivotModel.watch(() => {
             const model = grid.state.columnPivotModel.get();
             updatePivotColumns(model);
-            rdsStore.set(models, (prev) => ({
-                ...prev,
-                pivotModel: model,
-            }));
+            models.set((prev) => ({ ...prev, pivotModel: model }));
             grid.state.rowDataStore.rowClearCache();
         }));
-        grid.state.columnPivotRowGroupExpansions.watch(() => {
-            rdsStore.set(models, (prev) => ({
-                ...prev,
-                columnPivotGroupExpansions: grid.state.columnPivotRowGroupExpansions.get(),
-            }));
-            grid.state.rowDataStore.rowClearCache();
-        });
-        // Sort model monitoring
-        cleanup.push(grid.state.sortModel.watch(() => {
-            rdsStore.set(models, (prev) => ({ ...prev, sort: grid.state.sortModel.get() }));
-            grid.state.rowDataStore.rowClearCache();
-        }));
-        // Filter model monitoring
-        cleanup.push(grid.state.filterModel.watch(() => {
-            rdsStore.set(models, (prev) => ({ ...prev, filter: grid.state.filterModel.get() }));
-            grid.state.rowDataStore.rowClearCache();
-        }));
-        cleanup.push(grid.state.quickSearch.watch(() => {
-            rdsStore.set(models, (prev) => ({ ...prev, quickSearch: grid.state.quickSearch.get() }));
-            grid.state.rowDataStore.rowClearCache();
-        }));
-        cleanup.push(grid.state.filterInModel.watch(() => {
-            rdsStore.set(models, (prev) => ({ ...prev, filterIn: grid.state.filterInModel.get() }));
-            grid.state.rowDataStore.rowClearCache();
-        }));
-        // Row group model monitoring
-        cleanup.push(grid.state.rowGroupModel.watch(() => {
-            rdsStore.set(models, (prev) => ({ ...prev, group: grid.state.rowGroupModel.get() }));
-            grid.state.rowDataStore.rowClearCache();
-        }));
-        // Row group expansions monitoring
-        cleanup.push(grid.state.rowGroupExpansions.watch(() => {
-            rdsStore.set(models, (prev) => ({
-                ...prev,
-                groupExpansions: grid.state.rowGroupExpansions.get(),
-            }));
-            grid.state.rowDataStore.rowClearCache();
-        }));
-        // Agg model monitoring
-        cleanup.push(grid.state.aggModel.watch(() => {
-            rdsStore.set(models, (prev) => ({ ...prev, agg: grid.state.aggModel.get() }));
+        cleanup.push(effect(() => {
+            models.set({
+                // @ts-expect-error The $ is defined, but only internally
+                sort: grid.state.sortModel.$(),
+                // @ts-expect-error The $ is defined, but only internally
+                agg: grid.state.aggModel.$(),
+                // @ts-expect-error The $ is defined, but only internally
+                filter: grid.state.filterModel.$(),
+                // @ts-expect-error The $ is defined, but only internally
+                group: grid.state.rowGroupModel.$(),
+                // @ts-expect-error The $ is defined, but only internally
+                groupExpansions: grid.state.rowGroupExpansions.$(),
+                // @ts-expect-error The $ is defined, but only internally
+                columnPivotGroupExpansions: grid.state.columnPivotColumnGroupExpansions.$(),
+                // @ts-expect-error The $ is defined, but only internally
+                filterIn: grid.state.filterInModel.$(),
+                // @ts-expect-error The $ is defined, but only internally
+                quickSearch: grid.state.quickSearch.$(),
+                pivotMode: peek(models).pivotMode,
+                pivotModel: peek(models).pivotModel,
+            });
             grid.state.rowDataStore.rowClearCache();
         }));
     };
     const rowById = (id) => {
-        const pinned = rdsStore.get(pinnedIdMap);
+        const pinned = peek(pinnedIdMap);
         if (pinned.has(id))
             return pinned.get(id);
-        const t = rdsStore.get(flat);
+        const t = peek(flat);
         return t.idMap.get(id) ?? null;
     };
     const rowByIndex = (index) => {
-        const top = rdsStore.get(topNodes);
-        const bot = rdsStore.get(botNodes);
-        const center = rdsStore.get(flat).flat;
+        const top = peek(topNodes);
+        const bot = peek(botNodes);
+        const center = peek(flat).flat;
         const topOffset = top.length;
         const centerOffset = topOffset + center.length;
         const botOffset = centerOffset + bot.length;
@@ -439,10 +406,10 @@ export function makeClientDataSource(p) {
         return null;
     };
     const rowUpdate = (updates) => {
-        const grid = rdsStore.get(grid$);
-        const d = rdsStore.get(data);
-        const idMap = rdsStore.get(idToNode);
-        const dataToSrc = rdsStore.get(dataToSrc$);
+        const grid = peek(grid$);
+        const d = peek(data);
+        const idMap = peek(idToNode);
+        const dataToSrc = peek(dataToSrc$);
         for (const [key, next] of updates.entries()) {
             const row = typeof key === "string" ? rowById(key) : rowByIndex(key);
             const treeNode = typeof key === "string" ? idMap.get(key) : null;
@@ -463,14 +430,14 @@ export function makeClientDataSource(p) {
                 d[source] = next;
             }
         }
-        rdsStore.set(data, [...d]);
-        rdsStore.set(snapshot, (prev) => prev + 1);
+        data.set([...d]);
+        snapshot.set((prev) => prev + 1);
         grid.state.rowDataStore.rowClearCache();
     };
     const rowToIndex = (rowId) => {
-        const f = rdsStore.get(flat);
-        const top = rdsStore.get(topNodes);
-        const bot = rdsStore.get(botNodes);
+        const f = peek(flat);
+        const top = peek(topNodes);
+        const bot = peek(botNodes);
         const topCount = top.length;
         const center = f.flat.length;
         const rowIndex = f.idToIndexMap.get(rowId);
@@ -487,7 +454,7 @@ export function makeClientDataSource(p) {
         return null;
     };
     const rowAllChildIds = (rowId) => {
-        const t = rdsStore.get(tree);
+        const t = peek(tree);
         const ids = [];
         const node = t.idToNode.get(rowId);
         if (node?.kind === 2) {
@@ -505,10 +472,10 @@ export function makeClientDataSource(p) {
             rowAllChildIds,
             rowUpdate,
             inFilterItems: (c) => {
-                const grid = rdsStore.get(grid$);
+                const grid = peek(grid$);
                 if (!grid)
                     return [];
-                const data = rdsStore.get(centerNodes);
+                const data = peek(centerNodes);
                 const values = new Set(data.map((row) => {
                     const field = grid.api.columnField(c, row);
                     return field;
@@ -519,7 +486,7 @@ export function makeClientDataSource(p) {
                 return [...values].map((x) => ({ id: `${x}`, label: `${x}`, value: x }));
             },
             rowAdd: (newRows, place = "end") => {
-                rdsStore.set(data, (prev) => {
+                data.set((prev) => {
                     if (!newRows.length)
                         return prev;
                     let next;
@@ -533,7 +500,7 @@ export function makeClientDataSource(p) {
                     }
                     return next;
                 });
-                const grid = rdsStore.get(grid$);
+                const grid = peek(grid$);
                 grid?.state.rowDataStore.rowClearCache();
             },
             rowDelete: (rows) => {
@@ -545,44 +512,44 @@ export function makeClientDataSource(p) {
                         return rowById(c)?.data;
                 })
                     .filter((c) => !!c));
-                rdsStore.set(data, (prev) => {
+                data.set((prev) => {
                     if (!rowData.size)
                         return prev;
                     return prev.filter((d) => !rowData.has(d));
                 });
-                const grid = rdsStore.get(grid$);
+                const grid = peek(grid$);
                 grid?.state.rowDataStore.rowClearCache();
             },
             rowSetBotData: (data) => {
-                rdsStore.set(bottomData, data);
-                const grid = rdsStore.get(grid$);
+                bottomData.set(data);
+                const grid = peek(grid$);
                 grid?.state.rowDataStore.rowClearCache();
             },
-            rowSetCenterData: (d) => {
-                rdsStore.set(data, d);
-                const grid = rdsStore.get(grid$);
+            rowSetTopData: (data) => {
+                topData.set(data);
+                const grid = peek(grid$);
                 grid?.state.rowDataStore.rowClearCache();
             },
-            rowSetTopData: (data) => {
-                rdsStore.set(topData, data);
-                const grid = rdsStore.get(grid$);
+            rowSetCenterData: (d) => {
+                data.set(d);
+                const grid = peek(grid$);
                 grid?.state.rowDataStore.rowClearCache();
             },
             rowData: (section) => {
                 const d = [];
                 if (section === "top" || section === "flat") {
-                    d.push(...rdsStore.get(topData));
+                    d.push(...peek(topData));
                 }
                 if (section === "center" || section === "flat") {
-                    d.push(...rdsStore.get(data));
+                    d.push(...peek(data));
                 }
                 if (section === "bottom" || section === "flat") {
-                    d.push(...rdsStore.get(bottomData));
+                    d.push(...peek(bottomData));
                 }
                 return d;
             },
             rowExpand: (expansions) => {
-                const grid = rdsStore.get(grid$);
+                const grid = peek(grid$);
                 if (!grid)
                     return;
                 const mode = grid.state.columnPivotMode.get();
@@ -593,7 +560,7 @@ export function makeClientDataSource(p) {
             },
             rowToIndex,
             rowSelect: (params) => {
-                const grid = rdsStore.get(grid$);
+                const grid = peek(grid$);
                 if (!grid)
                     return;
                 if (params.mode === "none")
@@ -644,18 +611,18 @@ export function makeClientDataSource(p) {
                 }
             },
             rowSelectAll: (params) => {
-                const grid = rdsStore.get(grid$);
+                const grid = peek(grid$);
                 if (!grid)
                     return;
                 if (params.deselect) {
                     grid.state.rowSelectedIds.set(new Set());
                     return;
                 }
-                const t = rdsStore.get(tree);
+                const t = peek(tree);
                 grid.state.rowSelectedIds.set(new Set(t.idsAll));
             },
             rowAreAllSelected: (rowId) => {
-                const g = rdsStore.get(grid$);
+                const g = peek(grid$);
                 if (!g)
                     return false;
                 const selected = g.state.rowSelectedIds.get();
@@ -666,14 +633,14 @@ export function makeClientDataSource(p) {
                     const childIds = new Set(rowAllChildIds(rowId));
                     return childIds.isSubsetOf(selected);
                 }
-                const f = rdsStore.get(tree);
+                const f = peek(tree);
                 return f.idsAll.isSubsetOf(selected);
             },
         },
         {
-            top: makeGridAtom(topData, rdsStore),
-            center: makeGridAtom(data, rdsStore),
-            bottom: makeGridAtom(bottomData, rdsStore),
+            top: makeAtom(topData),
+            center: makeAtom(data),
+            bottom: makeAtom(bottomData),
         },
     ];
 }