From 5d5acd4a417816a663211582299b664608120c09 Mon Sep 17 00:00:00 2001
From: Hebi Li <lihebi.com@gmail.com>
Date: Thu, 4 May 2023 14:48:39 -0700
Subject: [PATCH 1/3] add new pod buttons

---
 ui/src/components/nodes/Code.tsx | 161 ++++++++++++++++++++++++++++++-
 1 file changed, 160 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/nodes/Code.tsx b/ui/src/components/nodes/Code.tsx
index a9db7e6f..9c75907a 100644
--- a/ui/src/components/nodes/Code.tsx
+++ b/ui/src/components/nodes/Code.tsx
@@ -359,6 +359,163 @@ function MyFloatingToolbar({ id, layout, setLayout }) {
   );
 }
 
+function NewPodButtons({ pod, xPos, yPos }) {
+  const store = useContext(RepoContext);
+  if (!store) throw new Error("Missing BearContext.Provider in the tree");
+  const addNode = useStore(store, (state) => state.addNode);
+  return (
+    <>
+      {/* Bottom 1 */}
+      <Button
+        variant="outlined"
+        size="small"
+        sx={{
+          // place it at the BOTTOM of the pod, centered
+          position: "absolute",
+          bottom: "0px",
+          left: "25%",
+          transform: "translate(-50%, 50%)",
+          zIndex: 100,
+          whiteSpace: "nowrap",
+          // opacity: showToolbar ? 0.5 : 0,
+          opacity: 0,
+          "&:hover": {
+            opacity: 1,
+          },
+        }}
+        onClick={() => {
+          addNode("CODE", { x: xPos, y: yPos + pod!.height! + 50 }, pod.parent);
+        }}
+      >
+        + New Pod
+      </Button>
+
+      {/* Bottom 2 */}
+      <Button
+        variant="outlined"
+        size="small"
+        sx={{
+          position: "absolute",
+          bottom: "0px",
+          left: "75%",
+          transform: "translate(-50%, 50%)",
+          zIndex: 100,
+          whiteSpace: "nowrap",
+          // opacity: showToolbar ? 0.5 : 0,
+          opacity: 0,
+          "&:hover": {
+            opacity: 1,
+          },
+        }}
+        onClick={() => {
+          addNode("CODE", { x: xPos, y: yPos + pod!.height! + 50 }, pod.parent);
+        }}
+      >
+        + New Pod
+      </Button>
+      {/* Left 1 */}
+      <Button
+        variant="outlined"
+        size="small"
+        sx={{
+          // place it at the LEFT of the pod, centered
+          position: "absolute",
+          top: "25%",
+          left: "0px",
+          transform: "translate(-50%, -50%)",
+          zIndex: 100,
+          whiteSpace: "nowrap",
+          // opacity: showToolbar ? 0.5 : 0,
+          opacity: 0,
+          "&:hover": {
+            opacity: 1,
+          },
+        }}
+        onClick={() => {
+          addNode("CODE", { x: xPos - pod!.width! - 50, y: yPos }, pod.parent);
+        }}
+      >
+        + New Pod
+      </Button>
+
+      {/* Left 2 */}
+      <Button
+        variant="outlined"
+        size="small"
+        sx={{
+          // place it at the LEFT of the pod, centered
+          position: "absolute",
+          top: "75%",
+          left: "0px",
+          transform: "translate(-50%, -50%)",
+          zIndex: 100,
+          whiteSpace: "nowrap",
+          // opacity: showToolbar ? 0.5 : 0,
+          opacity: 0,
+          "&:hover": {
+            opacity: 1,
+          },
+        }}
+        onClick={() => {
+          addNode("CODE", { x: xPos - pod!.width! - 50, y: yPos }, pod.parent);
+        }}
+      >
+        + New Pod
+      </Button>
+
+      {/* Right 1 */}
+      <Button
+        variant="outlined"
+        size="small"
+        sx={{
+          // place at the RIGHT of the pod, centered
+          position: "absolute",
+          top: "25%",
+          right: "0px",
+          transform: "translate(50%, -50%)",
+          zIndex: 100,
+          whiteSpace: "nowrap",
+          // opacity: showToolbar ? 0.5 : 0,
+          opacity: 0,
+          "&:hover": {
+            opacity: 1,
+          },
+        }}
+        onClick={() => {
+          addNode("CODE", { x: xPos + pod!.width! + 50, y: yPos }, pod.parent);
+        }}
+      >
+        + New Pod
+      </Button>
+
+      {/* Right 2 */}
+      <Button
+        variant="outlined"
+        size="small"
+        sx={{
+          // place at the RIGHT of the pod, centered
+          position: "absolute",
+          top: "75%",
+          right: "0px",
+          transform: "translate(50%, -50%)",
+          zIndex: 100,
+          whiteSpace: "nowrap",
+          // opacity: showToolbar ? 0.5 : 0,
+          opacity: 0,
+          "&:hover": {
+            opacity: 1,
+          },
+        }}
+        onClick={() => {
+          addNode("CODE", { x: xPos + pod!.width! + 50, y: yPos }, pod.parent);
+        }}
+      >
+        + New Pod
+      </Button>
+    </>
+  );
+}
+
 export const CodeNode = memo<NodeProps>(function ({
   data,
   id,
@@ -536,6 +693,8 @@ export const CodeNode = memo<NodeProps>(function ({
               />
             </Box>
 
+            <NewPodButtons pod={pod} xPos={xPos} yPos={yPos} />
+
             {/* The header of code pods. */}
             <Box>
               {devMode && (
@@ -549,7 +708,7 @@ export const CodeNode = memo<NodeProps>(function ({
                   className="nodrag"
                 >
                   {id} at ({Math.round(xPos)}, {Math.round(yPos)}, w:{" "}
-                  {pod.width}, h: {pod.height})
+                  {pod.width}, h: {pod.height}), parent: {pod.parent}
                 </Box>
               )}
               <Box

From e55b69be13d9e94e401e1618f47779b813c4618f Mon Sep 17 00:00:00 2001
From: Hebi Li <lihebi.com@gmail.com>
Date: Thu, 4 May 2023 14:52:19 -0700
Subject: [PATCH 2/3] add both code and note

---
 ui/src/components/nodes/Code.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/ui/src/components/nodes/Code.tsx b/ui/src/components/nodes/Code.tsx
index 9c75907a..b5e3ee96 100644
--- a/ui/src/components/nodes/Code.tsx
+++ b/ui/src/components/nodes/Code.tsx
@@ -387,7 +387,7 @@ function NewPodButtons({ pod, xPos, yPos }) {
           addNode("CODE", { x: xPos, y: yPos + pod!.height! + 50 }, pod.parent);
         }}
       >
-        + New Pod
+        + Code
       </Button>
 
       {/* Bottom 2 */}
@@ -408,10 +408,10 @@ function NewPodButtons({ pod, xPos, yPos }) {
           },
         }}
         onClick={() => {
-          addNode("CODE", { x: xPos, y: yPos + pod!.height! + 50 }, pod.parent);
+          addNode("RICH", { x: xPos, y: yPos + pod!.height! + 50 }, pod.parent);
         }}
       >
-        + New Pod
+        + Note
       </Button>
       {/* Left 1 */}
       <Button
@@ -435,7 +435,7 @@ function NewPodButtons({ pod, xPos, yPos }) {
           addNode("CODE", { x: xPos - pod!.width! - 50, y: yPos }, pod.parent);
         }}
       >
-        + New Pod
+        + Code
       </Button>
 
       {/* Left 2 */}
@@ -457,10 +457,10 @@ function NewPodButtons({ pod, xPos, yPos }) {
           },
         }}
         onClick={() => {
-          addNode("CODE", { x: xPos - pod!.width! - 50, y: yPos }, pod.parent);
+          addNode("RICH", { x: xPos - pod!.width! - 50, y: yPos }, pod.parent);
         }}
       >
-        + New Pod
+        + Note
       </Button>
 
       {/* Right 1 */}
@@ -485,7 +485,7 @@ function NewPodButtons({ pod, xPos, yPos }) {
           addNode("CODE", { x: xPos + pod!.width! + 50, y: yPos }, pod.parent);
         }}
       >
-        + New Pod
+        + Code
       </Button>
 
       {/* Right 2 */}
@@ -507,10 +507,10 @@ function NewPodButtons({ pod, xPos, yPos }) {
           },
         }}
         onClick={() => {
-          addNode("CODE", { x: xPos + pod!.width! + 50, y: yPos }, pod.parent);
+          addNode("RICH", { x: xPos + pod!.width! + 50, y: yPos }, pod.parent);
         }}
       >
-        + New Pod
+        + Note
       </Button>
     </>
   );

From 4940035c4b5cda12dcac1460cb117fa39b95d52b Mon Sep 17 00:00:00 2001
From: Hebi Li <lihebi.com@gmail.com>
Date: Thu, 4 May 2023 14:57:11 -0700
Subject: [PATCH 3/3] add create pod buttons to rich-text pod as well

---
 ui/src/components/nodes/Code.tsx  | 159 +---------------------------
 ui/src/components/nodes/Rich.tsx  |   2 +
 ui/src/components/nodes/utils.tsx | 165 ++++++++++++++++++++++++++++++
 3 files changed, 168 insertions(+), 158 deletions(-)

diff --git a/ui/src/components/nodes/Code.tsx b/ui/src/components/nodes/Code.tsx
index b5e3ee96..986cbb0a 100644
--- a/ui/src/components/nodes/Code.tsx
+++ b/ui/src/components/nodes/Code.tsx
@@ -59,7 +59,7 @@ import { useApolloClient } from "@apollo/client";
 import { NodeResizeControl, NodeResizer } from "reactflow";
 
 import "@reactflow/node-resizer/dist/style.css";
-import { ResizeIcon } from "./utils";
+import { NewPodButtons, ResizeIcon } from "./utils";
 
 export const ResultBlock = memo<any>(function ResultBlock({ id }) {
   const store = useContext(RepoContext)!;
@@ -359,163 +359,6 @@ function MyFloatingToolbar({ id, layout, setLayout }) {
   );
 }
 
-function NewPodButtons({ pod, xPos, yPos }) {
-  const store = useContext(RepoContext);
-  if (!store) throw new Error("Missing BearContext.Provider in the tree");
-  const addNode = useStore(store, (state) => state.addNode);
-  return (
-    <>
-      {/* Bottom 1 */}
-      <Button
-        variant="outlined"
-        size="small"
-        sx={{
-          // place it at the BOTTOM of the pod, centered
-          position: "absolute",
-          bottom: "0px",
-          left: "25%",
-          transform: "translate(-50%, 50%)",
-          zIndex: 100,
-          whiteSpace: "nowrap",
-          // opacity: showToolbar ? 0.5 : 0,
-          opacity: 0,
-          "&:hover": {
-            opacity: 1,
-          },
-        }}
-        onClick={() => {
-          addNode("CODE", { x: xPos, y: yPos + pod!.height! + 50 }, pod.parent);
-        }}
-      >
-        + Code
-      </Button>
-
-      {/* Bottom 2 */}
-      <Button
-        variant="outlined"
-        size="small"
-        sx={{
-          position: "absolute",
-          bottom: "0px",
-          left: "75%",
-          transform: "translate(-50%, 50%)",
-          zIndex: 100,
-          whiteSpace: "nowrap",
-          // opacity: showToolbar ? 0.5 : 0,
-          opacity: 0,
-          "&:hover": {
-            opacity: 1,
-          },
-        }}
-        onClick={() => {
-          addNode("RICH", { x: xPos, y: yPos + pod!.height! + 50 }, pod.parent);
-        }}
-      >
-        + Note
-      </Button>
-      {/* Left 1 */}
-      <Button
-        variant="outlined"
-        size="small"
-        sx={{
-          // place it at the LEFT of the pod, centered
-          position: "absolute",
-          top: "25%",
-          left: "0px",
-          transform: "translate(-50%, -50%)",
-          zIndex: 100,
-          whiteSpace: "nowrap",
-          // opacity: showToolbar ? 0.5 : 0,
-          opacity: 0,
-          "&:hover": {
-            opacity: 1,
-          },
-        }}
-        onClick={() => {
-          addNode("CODE", { x: xPos - pod!.width! - 50, y: yPos }, pod.parent);
-        }}
-      >
-        + Code
-      </Button>
-
-      {/* Left 2 */}
-      <Button
-        variant="outlined"
-        size="small"
-        sx={{
-          // place it at the LEFT of the pod, centered
-          position: "absolute",
-          top: "75%",
-          left: "0px",
-          transform: "translate(-50%, -50%)",
-          zIndex: 100,
-          whiteSpace: "nowrap",
-          // opacity: showToolbar ? 0.5 : 0,
-          opacity: 0,
-          "&:hover": {
-            opacity: 1,
-          },
-        }}
-        onClick={() => {
-          addNode("RICH", { x: xPos - pod!.width! - 50, y: yPos }, pod.parent);
-        }}
-      >
-        + Note
-      </Button>
-
-      {/* Right 1 */}
-      <Button
-        variant="outlined"
-        size="small"
-        sx={{
-          // place at the RIGHT of the pod, centered
-          position: "absolute",
-          top: "25%",
-          right: "0px",
-          transform: "translate(50%, -50%)",
-          zIndex: 100,
-          whiteSpace: "nowrap",
-          // opacity: showToolbar ? 0.5 : 0,
-          opacity: 0,
-          "&:hover": {
-            opacity: 1,
-          },
-        }}
-        onClick={() => {
-          addNode("CODE", { x: xPos + pod!.width! + 50, y: yPos }, pod.parent);
-        }}
-      >
-        + Code
-      </Button>
-
-      {/* Right 2 */}
-      <Button
-        variant="outlined"
-        size="small"
-        sx={{
-          // place at the RIGHT of the pod, centered
-          position: "absolute",
-          top: "75%",
-          right: "0px",
-          transform: "translate(50%, -50%)",
-          zIndex: 100,
-          whiteSpace: "nowrap",
-          // opacity: showToolbar ? 0.5 : 0,
-          opacity: 0,
-          "&:hover": {
-            opacity: 1,
-          },
-        }}
-        onClick={() => {
-          addNode("RICH", { x: xPos + pod!.width! + 50, y: yPos }, pod.parent);
-        }}
-      >
-        + Note
-      </Button>
-    </>
-  );
-}
-
 export const CodeNode = memo<NodeProps>(function ({
   data,
   id,
diff --git a/ui/src/components/nodes/Rich.tsx b/ui/src/components/nodes/Rich.tsx
index d22b0deb..343f920f 100644
--- a/ui/src/components/nodes/Rich.tsx
+++ b/ui/src/components/nodes/Rich.tsx
@@ -108,6 +108,7 @@ import { ProsemirrorPlugin, cx, htmlToProsemirrorNode } from "remirror";
 import { styled } from "@mui/material";
 
 import { MyYjsExtension } from "./YjsRemirror";
+import { NewPodButtons } from "./utils";
 
 function useLinkShortcut() {
   const [linkShortcut, setLinkShortcut] = useState<
@@ -808,6 +809,7 @@ export const RichNode = memo<Props>(function ({
                 isConnectable={isConnectable}
               />
             </Box>
+            <NewPodButtons pod={pod} xPos={xPos} yPos={yPos} />
             <Box>
               {devMode && (
                 <Box
diff --git a/ui/src/components/nodes/utils.tsx b/ui/src/components/nodes/utils.tsx
index 9d5c6968..a49ce791 100644
--- a/ui/src/components/nodes/utils.tsx
+++ b/ui/src/components/nodes/utils.tsx
@@ -6,6 +6,14 @@ import {
   XYPosition,
 } from "reactflow";
 
+import { useContext } from "react";
+
+import Button from "@mui/material/Button";
+
+import { useStore } from "zustand";
+
+import { RepoContext } from "../../lib/store";
+
 export function ResizeIcon() {
   return (
     <svg
@@ -275,3 +283,160 @@ export function getHelperLines(
       return result;
     }, defaultResult);
 }
+
+export function NewPodButtons({ pod, xPos, yPos }) {
+  const store = useContext(RepoContext);
+  if (!store) throw new Error("Missing BearContext.Provider in the tree");
+  const addNode = useStore(store, (state) => state.addNode);
+  return (
+    <>
+      {/* Bottom 1 */}
+      <Button
+        variant="outlined"
+        size="small"
+        sx={{
+          // place it at the BOTTOM of the pod, centered
+          position: "absolute",
+          bottom: "0px",
+          left: "25%",
+          transform: "translate(-50%, 50%)",
+          zIndex: 100,
+          whiteSpace: "nowrap",
+          // opacity: showToolbar ? 0.5 : 0,
+          opacity: 0,
+          "&:hover": {
+            opacity: 1,
+          },
+        }}
+        onClick={() => {
+          addNode("CODE", { x: xPos, y: yPos + pod!.height! + 50 }, pod.parent);
+        }}
+      >
+        + Code
+      </Button>
+
+      {/* Bottom 2 */}
+      <Button
+        variant="outlined"
+        size="small"
+        sx={{
+          position: "absolute",
+          bottom: "0px",
+          left: "75%",
+          transform: "translate(-50%, 50%)",
+          zIndex: 100,
+          whiteSpace: "nowrap",
+          // opacity: showToolbar ? 0.5 : 0,
+          opacity: 0,
+          "&:hover": {
+            opacity: 1,
+          },
+        }}
+        onClick={() => {
+          addNode("RICH", { x: xPos, y: yPos + pod!.height! + 50 }, pod.parent);
+        }}
+      >
+        + Note
+      </Button>
+      {/* Left 1 */}
+      <Button
+        variant="outlined"
+        size="small"
+        sx={{
+          // place it at the LEFT of the pod, centered
+          position: "absolute",
+          top: "25%",
+          left: "0px",
+          transform: "translate(-50%, -50%)",
+          zIndex: 100,
+          whiteSpace: "nowrap",
+          // opacity: showToolbar ? 0.5 : 0,
+          opacity: 0,
+          "&:hover": {
+            opacity: 1,
+          },
+        }}
+        onClick={() => {
+          addNode("CODE", { x: xPos - pod!.width! - 50, y: yPos }, pod.parent);
+        }}
+      >
+        + Code
+      </Button>
+
+      {/* Left 2 */}
+      <Button
+        variant="outlined"
+        size="small"
+        sx={{
+          // place it at the LEFT of the pod, centered
+          position: "absolute",
+          top: "75%",
+          left: "0px",
+          transform: "translate(-50%, -50%)",
+          zIndex: 100,
+          whiteSpace: "nowrap",
+          // opacity: showToolbar ? 0.5 : 0,
+          opacity: 0,
+          "&:hover": {
+            opacity: 1,
+          },
+        }}
+        onClick={() => {
+          addNode("RICH", { x: xPos - pod!.width! - 50, y: yPos }, pod.parent);
+        }}
+      >
+        + Note
+      </Button>
+
+      {/* Right 1 */}
+      <Button
+        variant="outlined"
+        size="small"
+        sx={{
+          // place at the RIGHT of the pod, centered
+          position: "absolute",
+          top: "25%",
+          right: "0px",
+          transform: "translate(50%, -50%)",
+          zIndex: 100,
+          whiteSpace: "nowrap",
+          // opacity: showToolbar ? 0.5 : 0,
+          opacity: 0,
+          "&:hover": {
+            opacity: 1,
+          },
+        }}
+        onClick={() => {
+          addNode("CODE", { x: xPos + pod!.width! + 50, y: yPos }, pod.parent);
+        }}
+      >
+        + Code
+      </Button>
+
+      {/* Right 2 */}
+      <Button
+        variant="outlined"
+        size="small"
+        sx={{
+          // place at the RIGHT of the pod, centered
+          position: "absolute",
+          top: "75%",
+          right: "0px",
+          transform: "translate(50%, -50%)",
+          zIndex: 100,
+          whiteSpace: "nowrap",
+          // opacity: showToolbar ? 0.5 : 0,
+          opacity: 0,
+          "&:hover": {
+            opacity: 1,
+          },
+        }}
+        onClick={() => {
+          addNode("RICH", { x: xPos + pod!.width! + 50, y: yPos }, pod.parent);
+        }}
+      >
+        + Note
+      </Button>
+    </>
+  );
+}