enhance(website): Redesign the playground Store inspector

website/package.json

@@ -82,7 +82,6 @@
     "parse-numeric-range": "^1.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-json-tree": "0.20.0",
     "react-live": "^4.0.0",
     "temporal-polyfill": "^0.3.0",
     "typescript": "npm:@typescript/typescript6@6.0.2",

website/src/components/Playground/preview/Preview.tsx

@@ -3,6 +3,7 @@ import {
   PollingSubscription,
   SubscriptionManager,
   NetworkManager,
+  type Manager,
 } from '@data-client/react';
 import { MockResolver } from '@data-client/test/browser';
 import { useScrollPositionBlocker } from '@docusaurus/theme-common/internal';
@@ -16,6 +17,7 @@ import React, {
 } from 'react';
 
 import Boundary from '../Boundary';
+import SchemaRegistry from './store/schemaRegistry';
 import StoreInspector from './StoreInspector';
 import { useTabStorage } from '../../../utils/tabStorage';
 import styles from '../styles.module.css';
@@ -50,10 +52,15 @@ function Preview<T>({
     ],
   );
 
-  const managers = useMemo(
-    () => [new NetworkManager(), new SubscriptionManager(PollingSubscription)],
-    [],
-  );
+  const [registry, managers] = useMemo(() => {
+    const registry = new SchemaRegistry();
+    const managers: Manager[] = [
+      registry,
+      new NetworkManager(),
+      new SubscriptionManager(PollingSubscription),
+    ];
+    return [registry, managers] as const;
+  }, []);
 
   const hiddenResult = row && selectedValue === 'y';
   return (
@@ -72,7 +79,11 @@ function Preview<T>({
             <PreviewBlockLazy onCommit={onCommit} />
           </Boundary>
         </div>
-        <StoreInspector selectedValue={selectedValue} toggle={toggle} />
+        <StoreInspector
+          selectedValue={selectedValue}
+          toggle={toggle}
+          registry={registry}
+        />
       </MockResolver>
     </DataProvider>
   );

website/src/components/Playground/preview/StoreInspector.tsx

@@ -1,23 +1,25 @@
-import { StateContext } from '@data-client/react';
 import clsx from 'clsx';
-import React, { useContext, memo, useMemo } from 'react';
+import React, { memo } from 'react';
 
 import styles from '../styles.module.css';
-import Tree from './Tree';
+import type SchemaRegistry from './store/schemaRegistry';
+import StorePanel from './store/StorePanel';
 
 function StoreInspector({
   toggle,
   selectedValue,
+  registry,
 }: {
   selectedValue: 'y' | 'n';
   toggle: React.MouseEventHandler<HTMLDivElement>;
+  registry: SchemaRegistry;
 }) {
   const isSelected = selectedValue === 'y';
   return (
     <>
       <StoreToggle onClick={toggle} open={isSelected} />
       {isSelected ?
-        <StoreTreeM />
+        <StorePanel registry={registry} />
       : null}
     </>
   );
@@ -47,13 +49,3 @@ export function StoreToggle({
     </div>
   );
 }
-
-function StoreTree() {
-  const state = useContext(StateContext);
-  const simplifiedState = useMemo(() => {
-    const { optimistic, ...ret } = state;
-    return ret;
-  }, [state]);
-  return <Tree value={simplifiedState} />;
-}
-const StoreTreeM = memo(StoreTree);

website/src/components/Playground/preview/__tests__/StoreUI.test.tsx

@@ -0,0 +1,76 @@
+/// <reference types="jest" />
+import { act, render } from '@testing-library/react';
+import React from 'react';
+
+import type { EntityTable, StoreModel } from '../store/model';
+import { entityId } from '../store/model';
+import {
+  groupId,
+  ROW_LIMIT,
+  sectionId,
+  showAllId,
+  StoreUIProvider,
+  useStoreUI,
+} from '../store/StoreUI';
+
+const table = (key: string): EntityTable => ({
+  key,
+  kind: 'entity',
+  rows: [],
+  fields: [],
+});
+const model = (...keys: string[]) =>
+  ({ endpoints: [], tables: keys.map(table) }) as unknown as StoreModel;
+
+let ui: ReturnType<typeof useStoreUI>;
+function Probe() {
+  ui = useStoreUI();
+  return null;
+}
+const onReveal = jest.fn();
+const mount = (m: StoreModel) => (
+  <StoreUIProvider model={m} onReveal={onReveal}>
+    <Probe />
+  </StoreUIProvider>
+);
+
+describe('StoreUI', () => {
+  it('keeps groups open or closed when tables arrive later', () => {
+    const { rerender } = render(mount(model('User', 'Post', '[Comment]')));
+    expect(ui.isOpen(groupId('[Comment]'))).toBe(true);
+    act(() => ui.toggle(groupId('Post')));
+    expect(ui.isOpen(groupId('Post'))).toBe(false);
+
+    // a new Entity type sorts ahead of the Collection
+    rerender(mount(model('User', 'Post', 'Comment', '[Comment]')));
+    expect(ui.isOpen(groupId('Post'))).toBe(false);
+    expect(ui.isOpen(groupId('[Comment]'))).toBe(true);
+    expect(ui.isOpen(groupId('Comment'))).toBe(false);
+  });
+
+  it('reveal opens everything leading to a row', () => {
+    const rows = Array.from({ length: ROW_LIMIT + 1 }, (_, i) => ({
+      id: entityId('Late', `${i}`),
+    })) as unknown as EntityTable['rows'];
+    const m = {
+      endpoints: [],
+      tables: ['A', 'B', 'C'].map(table).concat({ ...table('Late'), rows }),
+    } as unknown as StoreModel;
+    render(mount(m));
+    act(() => ui.toggle(sectionId('entities')));
+    const target = entityId('Late', `${ROW_LIMIT}`);
+    act(() => ui.reveal(target));
+    expect(ui.selected).toBe(target);
+    expect(onReveal).toHaveBeenCalledWith(target);
+    for (const id of [
+      target,
+      sectionId('entities'),
+      groupId('Late'),
+      showAllId('Late'),
+    ])
+      expect(ui.isOpen(id)).toBe(true);
+
+    act(() => ui.reveal('e\u001fGET /x'));
+    expect(ui.isOpen(sectionId('endpoints'))).toBe(true);
+  });
+});