fix: dirty status on repo initial loading (#326)

Author: lihebi

ui/src/components/nodes/Code.tsx

@@ -80,11 +80,20 @@ export const ResultBlock = memo<any>(function ResultBlock({ id, layout }) {
   const result = useStore(store, (state) => state.pods[id]?.result);
   const error = useStore(store, (state) => state.pods[id]?.error);
   const stdout = useStore(store, (state) => state.pods[id]?.stdout);
-  const running = useStore(store, (state) => state.pods[id]?.running);
+  const running = useStore(store, (state) => state.pods[id]?.running || false);
   const autoLayoutROOT = useStore(store, (state) => state.autoLayoutROOT);
+  const autoRunLayout = useStore(store, (state) => state.autoRunLayout);
+
+  const prevRunning = useRef(false);
   useEffect(() => {
-    autoLayoutROOT();
+    if (autoRunLayout) {
+      if (prevRunning.current != running) {
+        autoLayoutROOT();
+        prevRunning.current = running;
+      }
+    }
   }, [running]);
+
   const lastExecutedAt = useStore(
     store,
     (state) => state.pods[id]?.lastExecutedAt
@@ -474,9 +483,17 @@ export const CodeNode = memo<NodeProps>(function ({
 
   const nodesMap = useStore(store, (state) => state.ydoc.getMap<Node>("pods"));
   const autoLayoutROOT = useStore(store, (state) => state.autoLayoutROOT);
+  const autoRunLayout = useStore(store, (state) => state.autoRunLayout);
+
+  const prevLayout = useRef(layout);
   useEffect(() => {
-    // Run auto-layout when the output box layout changes.
-    autoLayoutROOT();
+    if (autoRunLayout) {
+      // Run auto-layout when the output box layout changes.
+      if (prevLayout.current != layout) {
+        autoLayoutROOT();
+        prevLayout.current = layout;
+      }
+    }
   }, [layout]);
 
   const onResizeStop = useCallback(
@@ -503,7 +520,9 @@ export const CodeNode = memo<NodeProps>(function ({
           true
         );
         updateView();
-        autoLayoutROOT();
+        if (autoRunLayout) {
+          autoLayoutROOT();
+        }
       }
     },
     [id, nodesMap, setPodGeo, updateView, autoLayoutROOT]

ui/src/components/nodes/Rich.tsx

@@ -473,11 +473,9 @@ const MyStyledWrapper = styled("div")(
 // FIXME re-rendering performance
 const MyEditor = ({
   placeholder = "Start typing...",
-  initialContent,
   id,
 }: {
   placeholder?: string;
-  initialContent?: string;
   id: string;
 }) => {
   // FIXME this is re-rendered all the time.
@@ -540,6 +538,8 @@ const MyEditor = ({
     stringHandler: htmlToProsemirrorNode,
   });
 
+  let index_onChange = 0;
+
   return (
     <Box
       className="remirror-theme"
@@ -567,6 +567,16 @@ const MyEditor = ({
               setState(nextState);
               // TODO sync with DB and yjs
               if (parameter.tr?.docChanged) {
+                index_onChange += 1;
+                if (index_onChange == 1) {
+                  if (
+                    JSON.stringify(pod.content) ===
+                    JSON.stringify(nextState.doc.toJSON())
+                  ) {
+                    // This is the first onChange trigger, and the content is the same. Skip it.
+                    return;
+                  }
+                }
                 setPodContent({ id, content: nextState.doc.toJSON() });
               }
             }}
@@ -702,6 +712,7 @@ export const RichNode = memo<Props>(function ({
 
   const [showToolbar, setShowToolbar] = useState(false);
   const autoLayoutROOT = useStore(store, (state) => state.autoLayoutROOT);
+  const autoRunLayout = useStore(store, (state) => state.autoRunLayout);
 
   const onResizeStop = useCallback(
     (e, data) => {
@@ -727,7 +738,9 @@ export const RichNode = memo<Props>(function ({
           true
         );
         updateView();
-        autoLayoutROOT();
+        if (autoRunLayout) {
+          autoLayoutROOT();
+        }
       }
     },
     [id, nodesMap, setPodGeo, updateView, autoLayoutROOT]

ui/src/lib/store/canvasSlice.tsx

@@ -790,7 +790,17 @@ export const createCanvasSlice: StateCreator<MyState, [], [], CanvasSlice> = (
             // be filed for CodeNode at the beginning or anytime the node height
             // is changed due to content height changes.
             const node = nextNodes.find((n) => n.id === change.id);
-            if (!node) throw new Error("Node not found");
+            const prevNode = nodes.find((n) => n.id === change.id);
+            if (!node || !prevNode) throw new Error("Node not found");
+            // At the beginning, a dimension change is fired for all pods for no
+            // good reason. This will cause all pods being marked dirty and get
+            // uploaded. Filter out that situation here.
+            if (
+              node.width === prevNode.width &&
+              node.height === prevNode.height
+            ) {
+              break;
+            }
 
             let geoData = {
               parent: node.parentNode ? node.parentNode : "ROOT",
@@ -867,7 +877,9 @@ export const createCanvasSlice: StateCreator<MyState, [], [], CanvasSlice> = (
           get().deletePod(client, { id: change.id });
           get().buildNode2Children();
           // run auto-layout
-          get().autoLayoutROOT();
+          if (get().autoRunLayout) {
+            get().autoLayoutROOT();
+          }
           break;
         default:
           // should not reach here.
@@ -961,6 +973,7 @@ export const createCanvasSlice: StateCreator<MyState, [], [], CanvasSlice> = (
   },
   autoLayoutROOT: () => {
     // get all scopes,
+    console.debug("autoLayoutROOT");
     let nodesMap = get().ydoc.getMap<Node>("pods");
     let nodes: Node[] = Array.from(nodesMap.values());
     nodes