Localstorage projects using Y.js

package.json

@@ -81,6 +81,9 @@
     "react-intl": "^6.6.8",
     "react-router": "^6.24.0",
     "react-router-dom": "^6.24.0",
+    "y-indexeddb": "^9.0.12",
+    "y-protocols": "^1.0.6",
+    "yjs": "^13.6.27",
     "zustand": "^4.5.5"
   }
 }

src/App.tsx

@@ -57,6 +57,7 @@ import {
   createNewPageUrl,
   createTestingModelPageUrl,
 } from "./urls";
+import { ProjectStorageProvider } from "./project-persistence/ProjectStorageProvider";
 
 export interface ProviderLayoutProps {
   children: ReactNode;
@@ -93,7 +94,9 @@ const Providers = ({ children }: ProviderLayoutProps) => {
                 <ConnectProvider {...{ usb, bluetooth, radioBridge }}>
                   <BufferedDataProvider>
                     <ConnectionStageProvider>
-                      {children}
+                      <ProjectStorageProvider>
+                        {children}
+                      </ProjectStorageProvider>
                     </ConnectionStageProvider>
                   </BufferedDataProvider>
                 </ConnectProvider>

src/components/DataSamplesMenu.tsx

@@ -30,11 +30,12 @@ import LoadProjectMenuItem from "./LoadProjectMenuItem";
 import { NameProjectDialog } from "./NameProjectDialog";
 import ViewDataFeaturesMenuItem from "./ViewDataFeaturesMenuItem";
 import { useProjectIsUntitled } from "../hooks/project-hooks";
+import { useActions } from "../store-persistence-hooks";
 
 const DataSamplesMenu = () => {
   const intl = useIntl();
   const logging = useLogging();
-  const actions = useStore((s) => s.actions);
+  const actions = useActions();
   const downloadDataset = useStore((s) => s.downloadDataset);
   const isDeleteAllActionsDialogOpen = useStore(
     (s) => s.isDeleteAllActionsDialogOpen

src/components/DataSamplesTable.tsx

@@ -40,6 +40,7 @@ import { ConfirmDialog } from "./ConfirmDialog";
 import { actionNameInputId } from "./ActionNameCard";
 import { recordButtonId } from "./ActionDataSamplesCard";
 import { keyboardShortcuts, useShortcut } from "../keyboard-shortcut-hooks";
+import { useActions } from "../store-persistence-hooks";
 
 const gridCommonProps: Partial<GridProps> = {
   gridTemplateColumns: "290px 1fr",
@@ -74,7 +75,7 @@ const DataSamplesTable = ({
   selectedActionIdx: selectedActionIdx,
   setSelectedActionIdx: setSelectedActionIdx,
 }: DataSamplesTableProps) => {
-  const actions = useStore((s) => s.actions);
+  const actions = useActions().toJSON() as ActionData[];
   // Default to first action being selected if last action is deleted.
   const selectedAction: ActionData = actions[selectedActionIdx] ?? actions[0];
 

src/components/DownloadDialogs.tsx

@@ -7,6 +7,7 @@ import { useDownloadActions } from "../hooks/download-hooks";
 import { useLogging } from "../logging/logging-hooks";
 import { DownloadStep } from "../model";
 import { useStore } from "../store";
+import { useActions } from "../store-persistence-hooks";
 import { getTotalNumSamples } from "../utils/actions";
 import ConnectCableDialog from "./ConnectCableDialog";
 import ConnectRadioDataCollectionMicrobitDialog from "./ConnectRadioDataCollectionMicrobitDialog";
@@ -22,7 +23,7 @@ const DownloadDialogs = () => {
   const downloadActions = useDownloadActions();
   const stage = useStore((s) => s.download);
   const flashingProgress = useStore((s) => s.downloadFlashingProgress);
-  const actions = useStore((s) => s.actions);
+  const actions = useActions();
   const logging = useLogging();
 
   switch (stage.step) {

src/components/TestingModelTable.tsx

@@ -27,6 +27,8 @@ import ActionNameCard, { ActionCardNameViewMode } from "./ActionNameCard";
 import CodeViewCard from "./CodeViewCard";
 import CodeViewDefaultBlockCard from "./CodeViewDefaultBlockCard";
 import HeadingGrid from "./HeadingGrid";
+import { useActions } from "../store-persistence-hooks";
+import { ActionData } from "../model";
 
 const gridCommonProps: Partial<GridProps> = {
   gridTemplateColumns: "290px 360px 40px auto",
@@ -52,7 +54,7 @@ const headings = [
 ];
 
 const TestingModelTable = () => {
-  const actions = useStore((s) => s.actions);
+  const actions = useActions().toJSON() as ActionData[];
   const setRequiredConfidence = useStore((s) => s.setRequiredConfidence);
   const { project, projectEdited } = useProject();
   const { isConnected } = useConnectionStage();

src/hooks/project-hooks.tsx

@@ -42,6 +42,7 @@ import {
   readFileAsText,
 } from "../utils/fs-util";
 import { useDownloadActions } from "./download-hooks";
+import { useActions } from "../store-persistence-hooks";
 
 class CodeEditorError extends Error {}
 
@@ -361,7 +362,7 @@ export const ProjectProvider = ({
   const setSave = useStore((s) => s.setSave);
   const save = useStore((s) => s.save);
   const settings = useStore((s) => s.settings);
-  const actions = useStore((s) => s.actions);
+  const actions = useActions();
   const saveNextDownloadRef = useRef(false);
   const translatedUntitled = useDefaultProjectName();
   const saveHex = useCallback(

src/model.ts

@@ -9,6 +9,7 @@ import { MakeCodeIcon } from "./utils/icons";
 import { ReactNode } from "react";
 import { SpotlightStyle } from "./pages/TourOverlay";
 import { PlacementWithLogical, ThemingProps } from "@chakra-ui/react";
+import * as Y from "yjs";
 
 export interface XYZData {
   x: number[];
@@ -32,6 +33,13 @@ export interface ActionData extends Action {
   recordings: RecordingData[];
 }
 
+// TODO: how much do we hate these types?
+// TODO: maybe use zod?
+export type RecordingDatumY = Y.Map<number | XYZData>;
+export type RecordingDataY = Y.Array<RecordingDatumY>;
+export type ActionDatumY = Y.Map<string | number | RecordingDataY>;
+export type ActionDataY = Y.Array<ActionDatumY>;
+
 export interface DatasetEditorJsonFormat {
   data: ActionData[];
 }

src/pages/DataSamplesPage.tsx

@@ -18,12 +18,14 @@ import LiveGraphPanel from "../components/LiveGraphPanel";
 import TrainModelDialogs from "../components/TrainModelFlowDialogs";
 import { useConnectionStage } from "../connection-stage-hooks";
 import { keyboardShortcuts, useShortcut } from "../keyboard-shortcut-hooks";
-import { useHasSufficientDataForTraining, useStore } from "../store";
+import { useStore } from "../store";
 import { tourElClassname } from "../tours";
 import { createTestingModelPageUrl } from "../urls";
+import { forSomeAction, hasSufficientDataForTraining } from "../utils/actions";
+import { useActions } from "../store-persistence-hooks";
 
 const DataSamplesPage = () => {
-  const actions = useStore((s) => s.actions);
+  const actions = useActions();
   const addNewAction = useStore((s) => s.addNewAction);
   const model = useStore((s) => s.model);
   const [selectedActionIdx, setSelectedActionIdx] = useState<number>(0);
@@ -40,8 +42,11 @@ const DataSamplesPage = () => {
     }
   }, [isConnected, tourStart]);
 
-  const hasSufficientData = useHasSufficientDataForTraining();
-  const isAddNewActionDisabled = actions.some((a) => a.name.length === 0);
+  const hasSufficientData = hasSufficientDataForTraining(actions);
+  const isAddNewActionDisabled = forSomeAction(
+    actions,
+    (a) => (a.get("name") as string).length === 0
+  );
 
   const handleNavigateToModel = useCallback(() => {
     navigate(createTestingModelPageUrl());