unfix: storing encoded doc in supa storage... not working

rob-gordon · rob-gordon · commit c3c5290a7dee · 2023-03-01T23:27:02.000-05:00
diff --git a/app/src/components/Graph.tsx b/app/src/components/Graph.tsx
@@ -5,7 +5,9 @@ import klay from "cytoscape-klay";
 import cytoscapeSvg from "cytoscape-svg";
 import throttle from "lodash.throttle";
 import React, {
+  Dispatch,
   MutableRefObject,
+  SetStateAction,
   useCallback,
   useEffect,
   useMemo,
@@ -30,10 +32,11 @@ import {
 import { isError } from "../lib/helpers";
 import { getAnimationSettings } from "../lib/hooks";
 import { Parsers, universalParse, useParser } from "../lib/parsers";
+import { useYDoc } from "../lib/realtime";
 import { Theme } from "../lib/themes/constants";
 import original from "../lib/themes/original";
 import { useContextMenuState } from "../lib/useContextMenuState";
-import { Doc } from "../lib/useDoc";
+import { Doc, useDetailsStore } from "../lib/useDoc";
 import { useGraphStore } from "../lib/useGraphStore";
 import { useHoverLine } from "../lib/useHoverLine";
 import { useParseError } from "../lib/useParseError";
@@ -68,6 +71,7 @@ export default function Graph({ shouldResize }: { shouldResize: number }) {
   const theme = useCurrentTheme(themeKey) as unknown as Theme;
   const bg = useBackgroundColor(theme);
   const userStyle = useUserStyle();
+  const [graphReady, setGraphReady] = useState(false);
 
   const getSize = useRef<TGetSize>(getGetSize(theme));
   const parser = useParser();
@@ -95,6 +99,7 @@ export default function Graph({ shouldResize }: { shouldResize: number }) {
 
   // Initialize Graph
   useEffect(() => {
+    if (graphInitialized.current) return;
     return initializeGraph({
       errorCatcher,
       cy,
@@ -121,7 +126,13 @@ export default function Graph({ shouldResize }: { shouldResize: number }) {
 
   const throttleUpdate = useMemo(
     () =>
-      getGraphUpdater({ cy, errorCatcher, graphInitialized, getSize, parser }),
+      getGraphUpdater({
+        cy,
+        errorCatcher,
+        graphInitialized,
+        getSize,
+        parser,
+      }),
     [parser]
   );
 
@@ -271,14 +282,20 @@ function getGraphUpdater({
       // TODO: what happens if you add animate false and run() here?
       errorCatcher.current.layout(layout);
 
+      const isHosted = useDetailsStore.getState().isHosted;
+      const isReady = useYDoc.getState().isReady;
+      const isReadyToAnimate = !isHosted || isReady;
+
       // Update
       cy.current.json({ elements });
       if (layout.name !== "preset") {
         cy.current
           .layout({
-            animate: graphInitialized.current
-              ? elements.length < 200
-                ? shouldAnimate
+            animate: isReadyToAnimate
+              ? graphInitialized.current
+                ? elements.length < 200
+                  ? shouldAnimate
+                  : false
                 : false
               : false,
             animationDuration: shouldAnimate ? 333 : 0,
@@ -301,6 +318,8 @@ function getGraphUpdater({
 
       // Update Graph Store
       useGraphStore.setState({ layout, elements });
+
+      //
     } catch (e) {
       errorCatcher.current.destroy();
       errorCatcher.current = cytoscape();
diff --git a/app/src/components/TextEditor.tsx b/app/src/components/TextEditor.tsx
@@ -100,6 +100,7 @@ export function TextEditor({
       onMount={(editor, monaco) => {
         registerLanguages(monaco);
         editorRef.current = editor;
+        window.__monaco_editor = editor;
         monacoRef.current = monaco;
         // @ts-ignore
         window.monacoRef = monacoRef.current;
diff --git a/app/src/index.tsx b/app/src/index.tsx
@@ -15,6 +15,7 @@ import reportWebVitals from "./reportWebVitals";
 declare global {
   interface Window {
     Buffer: typeof Buffer;
+    __monaco_editor?: any;
   }
 }
 window.Buffer = Buffer;
diff --git a/app/src/lib/realtime.ts b/app/src/lib/realtime.ts
@@ -10,13 +10,21 @@ import { logError } from "./sentry";
 
 type IStandAloneCodeEditor = Parameters<OnMount>[0];
 
-const useYDoc = create<{
+type UseYDoc = {
   ydoc?: Y.Doc;
   provider?: WebsocketProvider;
-}>()(
-  devtools(() => ({}), {
-    name: "useYDoc",
-  })
+  isReady: boolean;
+};
+
+export const useYDoc = create<UseYDoc>()(
+  devtools<UseYDoc>(
+    () => ({
+      isReady: false,
+    }),
+    {
+      name: "useYDoc",
+    }
+  )
 );
 
 // Create a Yjs document
@@ -37,16 +45,18 @@ export function setupYDoc(type: "hosted" | "public", id: string) {
 
   // Create a provider
   const provider = new WebsocketProvider(providerUrl, roomName, ydoc);
+  provider.on("synced", (isSynced: boolean) => {
+    useYDoc.setState({ isReady: isSynced });
+  });
 
   // set references in store
   useYDoc.setState({ ydoc, provider });
 }
 
 export function cleanupYDoc() {
-  console.log("Cleanup ydoc");
   const provider = useYDoc.getState().provider;
   if (provider) provider.disconnect();
-  useYDoc.setState({ ydoc: undefined, provider: undefined });
+  useYDoc.setState({ ydoc: undefined, provider: undefined, isReady: false });
 }
 
 /**
diff --git a/app/src/pages/EditHosted.tsx b/app/src/pages/EditHosted.tsx
@@ -10,6 +10,7 @@ import EditorError from "../components/EditorError";
 import { EditorOptions } from "../components/EditorOptions";
 import { EditorWrapper } from "../components/EditorWrapper";
 import { EditWrapper } from "../components/EditWrapper";
+import Loading from "../components/Loading";
 import Main from "../components/Main";
 import { EditLayoutTab } from "../components/Tabs/EditLayoutTab";
 import { EditMetaTab } from "../components/Tabs/EditMetaTab";
@@ -18,7 +19,7 @@ import { TextEditor } from "../components/TextEditor";
 import { setDocText } from "../lib/docHelpers";
 import { useIsValidSponsor } from "../lib/hooks";
 import { getHostedChart } from "../lib/queries";
-import { cleanupYDoc, setupYDoc } from "../lib/realtime";
+import { cleanupYDoc, setupYDoc, useYDoc } from "../lib/realtime";
 import { useDetailsStore } from "../lib/useDoc";
 import { useTrackLastChart } from "../lib/useLastChart";
 import editStyles from "./Edit.module.css";
@@ -59,8 +60,15 @@ export default function EditHosted() {
   useTrackLastChart(url);
   const isValidSponsor = useIsValidSponsor();
 
+  const isReady = useYDoc((state) => state.isReady);
+
   return (
     <EditWrapper>
+      {!isReady && (
+        <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-white dark:bg-gray-900 z-50 opacity-40">
+          <Loading color="color-foreground" />
+        </div>
+      )}
       <Main>
         <EditorWrapper>
           <Tabs.Root defaultValue="Document" className={editStyles.Tabs}>
diff --git a/wss/src/server.mjs b/wss/src/server.mjs
@@ -18,22 +18,43 @@ const server = new Hocuspocus({
       fetch: async ({ documentName }) => {
         // create ydoc
         const ydoc = new Y.Doc();
-        // create ytext
-        const ytext = ydoc.getText("text");
-        // meta
-        const ymeta = ydoc.getMap("meta");
+
         try {
           const [docType, id] = documentName.split("_");
-          console.log({
-            docType,
-            id,
-          });
-          if (docType === "hosted") {
-            console.log("Looking up hosted chart: ", id);
+
+          if (!id) throw new Error("Invalid Chart ID");
+
+          console.log("fetching document: ", id);
+          // check to see if this is in storage
+          const result = await supabase.storage
+            .from("documents")
+            .download(id + `?updated`);
+          if (result.data) {
+            // return result.data;
+            // this is the ydoc, return it
+            console.log("found in storage");
+            console.log(typeof result.data);
+            const arrayBuffer = await result.data.arrayBuffer();
+            const buffer = Buffer.from(arrayBuffer);
+            console.log("Return original");
+            return buffer;
+            // return result.data;
+            // return result.data.arrayBuffer();
+          } else {
+            console.log(result);
+            // need to create a ydoc and store in storage
+            // then return it
+            // create ytext
+            const ytext = ydoc.getText("text");
+
+            // meta
+            const ymeta = ydoc.getMap("meta");
+
             const { data, error } = await supabase
               .from("user_charts")
               .select("id,name,chart,updated_at,created_at,public_id,is_public")
               .eq("id", id);
+
             if (error) throw error;
             if (!data || data.length === 0) throw new Error("Invalid Chart ID");
             if (data.length > 1) throw new Error("Multiple Charts Found");
@@ -56,9 +77,16 @@ const server = new Hocuspocus({
                 }
               });
             });
-          } else if (docType === "public") {
-            console.log("Need to lookup public chart!");
-            // Potentially this should be outside of the database extension
+
+            // store the ydoc in storage
+            const ydocState = Y.encodeStateAsUpdate(ydoc);
+            const { error: storageError } = await supabase.storage
+              .from("documents")
+              .upload(id + `?updated`, ydocState, {
+                upsert: true,
+                cacheControl: "0",
+              });
+            if (storageError) throw storageError;
           }
         } catch (e) {
           console.log(e);
@@ -69,29 +97,44 @@ const server = new Hocuspocus({
       store: async ({ documentName, state }) => {
         const [_docType, id] = documentName.split("_");
 
-        // get "text" string from state buffer
-        const ydoc = new Y.Doc();
-        Y.applyUpdate(ydoc, state);
-        const ytext = ydoc.getText("text");
-        const text = ytext.toString();
-
-        // get meta
-        const ymeta = ydoc.getMap("meta");
-        /**
-         * @type {object}
-         * */
-        const meta = {};
-        ymeta.forEach((value, key) => {
-          meta[key] = value;
-        });
-
-        const chart = docToString({ text, meta });
-        const { error } = await supabase
-          .from("user_charts")
-          .update({ chart })
-          .eq("id", id);
-        if (error) throw error;
-        return true;
+        // store the ydoc in storage
+        const updatedAt = new Date().toISOString();
+        const { error, data } = await supabase.storage
+          .from("documents")
+          .upload(id + `?updated`, state, {
+            upsert: true,
+            cacheControl: "0",
+          });
+        console.log("stored successfully");
+        console.log(data);
+        if (error) {
+          console.log(error);
+          throw error;
+        }
+
+        // // get "text" string from state buffer
+        // const ydoc = new Y.Doc();
+        // Y.applyUpdate(ydoc, state);
+        // const ytext = ydoc.getText("text");
+        // const text = ytext.toString();
+
+        // // get meta
+        // const ymeta = ydoc.getMap("meta");
+        // /**
+        //  * @type {object}
+        //  * */
+        // const meta = {};
+        // ymeta.forEach((value, key) => {
+        //   meta[key] = value;
+        // });
+
+        // const chart = docToString({ text, meta });
+        // const { error } = await supabase
+        //   .from("user_charts")
+        //   .update({ chart })
+        //   .eq("id", id);
+        // if (error) throw error;
+        // return true;
       },
     }),
   ],

Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,7 @@ import reportWebVitals from "./reportWebVitals";`
`15`	`15`	`declare global {`
`16`	`16`	`interface Window {`
`17`	`17`	`Buffer: typeof Buffer;`
	`18`	`+ __monaco_editor?: any;`
`18`	`19`	`}`
`19`	`20`	`}`
`20`	`21`	`window.Buffer = Buffer;`