Merge branch 'main' into feat/auto-complete

Author: li-xin-yi

README.md

@@ -16,13 +16,25 @@ overwhelmed by the great number of code snippets as the projects grow.
 # Contributing
 
 CodePod is open-source under an MIT license. Feel free to contribute to make
-it better together with us. You can contribute by [creating awesome showcases](#gallery), 
-[reporting a bug, suggesting a feature](https://github.com/codepod-io/codepod/issues), 
-or submitting a pull request. 
+it better together with us. You can contribute by [creating awesome showcases](#gallery),
+[reporting a bug, suggesting a feature](https://github.com/codepod-io/codepod/issues),
+or submitting a pull request.
 Do use [Prettier](https://prettier.io/) (e.g., [its VSCode
 plugin](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode))
-to format your code before checking in. 
-Last but not least, give us a star on Github! 
+to format your code before checking in.
+Last but not least, give us a star on Github!
+
+# Run CodePod Locally
+
+Please refer to the [developer manual](https://codepod.io/docs/developer) for how to run CodePod locally.
+
+# Gallery
+
+Thanks to our community, we now have CodePod showcases ranging from analytical geometry to bioinformatics.
+
+- [plotting common functions](https://app.codepod.io/repo/2ncnioylo9abo3otdxjs)
+- [image operations using skimage](https://user-images.githubusercontent.com/44469195/239033643-decbd7ae-29bb-44b9-af33-d4cb7c2bce46.png)
+- [tel-siRNA sequence detector](https://app.codepod.io/repo/b94n7n00a9395xwhv1o8)
 
 # Citation
 
@@ -39,87 +51,3 @@ https://arxiv.org/abs/2301.02410
   copyright = {Creative Commons Attribution 4.0 International}
 }
 ```
-
-# Gallery 
-
-Thanks to our community, we now have CodePod showcases ranging from analytical geometry to bioinformatics. 
-
-* [plotting common functions](https://app.codepod.io/repo/2ncnioylo9abo3otdxjs)
-* [image operations using skimage](https://user-images.githubusercontent.com/44469195/239033643-decbd7ae-29bb-44b9-af33-d4cb7c2bce46.png)
-* [tel-siRNA sequence detector](https://app.codepod.io/repo/b94n7n00a9395xwhv1o8)
-
-# Developing CodePod using docker-compose
-
-The docker compose files are in `compose/dev` folder. The `dev` stack mounts the
-`src` folder, so that you can edit the files on your local computer, and let the
-node.js process inside the container do the compiling and hot-reloading.
-
-To install docker-compose, follow the official [Docker documentation](https://docs.docker.com/compose/install/linux/).
-
-## .env file
-
-First, create a `dev/.env` file with the following content (leave as is or change the value to
-whatever you want).
-
-```properties
-POSTGRES_USER=myusername
-POSTGRES_PASSWORD=mypassword
-POSTGRES_DB=mydbname
-JWT_SECRET=mysupersecretjwttoken
-
-GOOGLE_CLIENT_ID=<google oauth client id>
-
-EXPORT_AWS_S3_REGION=us-west-1
-EXPORT_AWS_S3_BUCKET=<YOUR_BUCKET_NAME>
-EXPORT_AWS_S3_ACCESS_KEY_ID=<YOUR_ACCESS_KEY>
-EXPORT_AWS_S3_SECRET_ACCESS_KEY=<YOUR_SECRET_ACCESS_KEY>
-```
-
-Optional:
-
-- Leave the `GOOGLE_CLIENT_ID` empty if you do not need the OAuth provided by Google.
-- `EXPORT_AWS_S3_XXX` are used for file export. You could leave it empty if you don't use it.
-
-## Start the stack
-
-```bash
-cd dev
-docker compose up -d
-```
-
-You need to initialized the database first before starting the stack. See below.
-
-Wait a few minutes for the package installation and compilation. Once the `ui` and
-`api` containers are ready, go to `http://localhost:80` to see the app.
-
-- `http://localhost:80/graphql`: Apollo GraphQL explorer for the backend APIs
-- `http://prisma.127.0.0.1.sslip.io`: Prisma Studio for viewing and debugging the database.
-
-## Initialize the database
-
-If this is your first time running it, you would need to initialize the database as it's empty. To do that, open a shell into the API container and run:
-
-```bash
-npx prisma migrate dev
-```
-
-This command is also needed after the database schema is changed. The protocol is:
-
-- One developer changed [the schema](./api/prisma/schema.prisma). He will run
-  `npx prisma migrate dev --name add_a_new_field`. This will generate a
-  migration, e.g. [this
-  migration](./api/prisma/migrations/20221206194247_add_google_login/migration.sql).
-  The schema change along with this migration need to be checked in to git.
-- Another developer pulls the change, then running the `npx prisma migrate dev` (in the api container's shell) to apply the schema change.
-
-## Auto-completion & Linting
-
-Although we developed this project using docker, we still want features like auto-completion and linting while coding. For that to work, you need to install the all the relevant node packages, i.e.
-
-```bash
-# api, proxy, runtime, ui
-cd ./api/
-
-# Run 'npm install' instead if you are using npm
-yarn
-```

k8s/README.md

@@ -0,0 +1 @@
+This is deprecated. The k8s setup is moved to a private repo https://github.com/codepod-io/codepod-k8s.

ui/src/components/Canvas.tsx

@@ -24,6 +24,7 @@ import ReactFlow, {
   ReactFlowProvider,
   Edge,
   useViewport,
+  XYPosition,
 } from "reactflow";
 import "reactflow/dist/style.css";
 
@@ -47,6 +48,7 @@ import { YMap } from "yjs/dist/src/types/YMap";
 import FloatingEdge from "./nodes/FloatingEdge";
 import CustomConnectionLine from "./nodes/CustomConnectionLine";
 import HelperLines from "./HelperLines";
+import { getAbsPos } from "../lib/store/canvasSlice";
 
 const nodeTypes = { SCOPE: ScopeNode, CODE: CodeNode, RICH: RichNode };
 const edgeTypes = {
@@ -273,6 +275,152 @@ function useInitNodes() {
   return { loading };
 }
 
+function getBestNode(
+  nodes: Node[],
+  from,
+  direction: "up" | "down" | "left" | "right"
+) {
+  // find the best node to jump to from (x,y) in the given direction
+  let bestNode: Node | null = null;
+  let bestDistance = Infinity;
+  nodes = nodes.filter((node) => {
+    switch (direction) {
+      case "up":
+        return (
+          node.position.y + node.height! / 2 <
+          from.position.y + from.height! / 2
+        );
+      case "down":
+        return (
+          node.position.y + node.height! / 2 >
+          from.position.y + from.height! / 2
+        );
+      case "left":
+        return (
+          node.position.x + node.width! / 2 < from.position.x + from.width! / 2
+        );
+      case "right":
+        return (
+          node.position.x + node.width! / 2 > from.position.x + from.width! / 2
+        );
+    }
+  });
+  for (let node of nodes) {
+    // I should start from the edge, instead of the center
+    const startPoint: XYPosition = (() => {
+      // the center
+      // return {
+      //   x: from.position.x + from.width! / 2,
+      //   y: from.position.y + from.height! / 2,
+      // };
+      // the edge depending on direction.
+      switch (direction) {
+        case "up":
+          return {
+            x: from.position.x + from.width! / 2,
+            y: from.position.y,
+          };
+        case "down":
+          return {
+            x: from.position.x + from.width! / 2,
+            y: from.position.y + from.height!,
+          };
+        case "left":
+          return {
+            x: from.position.x,
+            y: from.position.y + from.height! / 2,
+          };
+        case "right":
+          return {
+            x: from.position.x + from.width!,
+            y: from.position.y + from.height! / 2,
+          };
+      }
+    })();
+    let distance =
+      Math.pow(node.position.x + node.width! / 2 - startPoint.x, 2) *
+        (["left", "right"].includes(direction) ? 1 : 2) +
+      Math.pow(node.position.y + node.height! / 2 - startPoint.y, 2) *
+        (["up", "down"].includes(direction) ? 1 : 2);
+    if (distance < bestDistance) {
+      bestDistance = distance;
+      bestNode = node;
+    }
+  }
+  return bestNode;
+}
+
+function useJump() {
+  const store = useContext(RepoContext)!;
+
+  const selectPod = useStore(store, (state) => state.selectPod);
+  const resetSelection = useStore(store, (state) => state.resetSelection);
+  const nodesMap = useStore(store, (state) => state.ydoc.getMap<Node>("pods"));
+
+  const reactflow = useReactFlow();
+
+  const selectedPods = useStore(store, (state) => state.selectedPods);
+  const handleKeyDown = (event) => {
+    const id = selectedPods.values().next().value; // Assuming only one node can be selected at a time
+    if (!id) {
+      console.log("No node selected");
+      return; // Ignore arrow key presses if there's no selected node or if the user is typing in an input field
+    }
+    const pod = nodesMap.get(id);
+    if (!pod) {
+      console.log("pod is undefined");
+      return;
+    }
+
+    // get the sibling nodes
+    const nodes = Array.from(nodesMap.values()).filter(
+      (node) => node.parentNode === pod.parentNode
+    );
+
+    let to: null | Node = null;
+
+    switch (event.key) {
+      case "ArrowUp":
+        to = getBestNode(nodes, pod, "up");
+        break;
+      case "ArrowDown":
+        to = getBestNode(nodes, pod, "down");
+        break;
+      case "ArrowLeft":
+        to = getBestNode(nodes, pod, "left");
+        break;
+      case "ArrowRight":
+        to = getBestNode(nodes, pod, "right");
+        break;
+      default:
+        return;
+    }
+
+    if (to) {
+      // set the to node as selected
+      resetSelection();
+      selectPod(to.id, true);
+      // move the viewport to the to node
+      // get the absolute position of the to node
+      const pos = getAbsPos(to, nodesMap);
+
+      reactflow.setCenter(pos.x + to.width! / 2, pos.y + to.height! / 2, {
+        zoom: reactflow.getZoom(),
+        duration: 800,
+      });
+    }
+
+    event.preventDefault(); // Prevent default browser behavior for arrow keys
+  };
+
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [selectedPods]);
+}
+
 function usePaste(reactFlowWrapper) {
   const store = useContext(RepoContext);
   if (!store) throw new Error("Missing BearContext.Provider in the tree");
@@ -461,6 +609,7 @@ function CanvasImplWrap() {
   useEdgesYjsObserver();
   usePaste(reactFlowWrapper);
   useCut(reactFlowWrapper);
+  useJump();
 
   const { loading } = useInitNodes();
   if (loading) return <div>Loading...</div>;
@@ -677,6 +826,8 @@ function CanvasImpl() {
           multiSelectionKeyCode={isMac ? "Meta" : "Control"}
           // TODO restore previous viewport
           defaultViewport={{ zoom: 1, x: 0, y: 0 }}
+          proOptions={{ hideAttribution: true }}
+          disableKeyboardA11y={true}
         >
           <Box>
             <MiniMap

ui/src/components/CanvasContextMenu.tsx

@@ -78,14 +78,6 @@ export function CanvasContextMenu(props) {
             <ListItemText>New Scope</ListItemText>
           </MenuItem>
         )}
-        <MenuItem onClick={flipShowLineNumbers} sx={ItemStyle}>
-          <ListItemIcon sx={{ color: "inherit" }}>
-            <FormatListNumberedIcon />
-          </ListItemIcon>
-          <ListItemText>
-            {showLineNumbers ? "Hide " : "Show "} Line Numbers
-          </ListItemText>
-        </MenuItem>
         <MenuItem onClick={() => flipAutoCompletion(client)} sx={ItemStyle}>
           <ListItemIcon sx={{ color: "inherit" }}>
             <AutoFixHighIcon />

ui/src/components/Sidebar.tsx

@@ -49,6 +49,11 @@ function SidebarSettings() {
   );
   const devMode = useStore(store, (state) => state.devMode);
   const setDevMode = useStore(store, (state) => state.setDevMode);
+  const showLineNumbers = useStore(store, (state) => state.showLineNumbers);
+  const setShowLineNumbers = useStore(
+    store,
+    (state) => state.setShowLineNumbers
+  );
   const autoRunLayout = useStore(store, (state) => state.autoRunLayout);
   const setAutoRunLayout = useStore(store, (state) => state.setAutoRunLayout);
   const contextualZoom = useStore(store, (state) => state.contextualZoom);
@@ -59,9 +64,27 @@ function SidebarSettings() {
     (state) => state.flipAutoCompletion
   );
   const client = useApolloClient();
+  const autoLayoutROOT = useStore(store, (state) => state.autoLayoutROOT);
   return (
     <Box>
       <Box>
+        <Tooltip title={"Show Line Numbers"} disableInteractive>
+          <FormGroup>
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={showLineNumbers}
+                  size="small"
+                  color="warning"
+                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                    setShowLineNumbers(event.target.checked);
+                  }}
+                />
+              }
+              label="Show Line Numbers"
+            />
+          </FormGroup>
+        </Tooltip>
         <Tooltip
           title={"Enable Debug Mode, e.g., show pod IDs"}
           disableInteractive
@@ -95,6 +118,9 @@ function SidebarSettings() {
                   color="warning"
                   onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                     setAutoRunLayout(event.target.checked);
+                    if (event.target.checked) {
+                      autoLayoutROOT();
+                    }
                   }}
                 />
               }