Fix: remove output indices and horizontal scroll bar in result blocks (#133)

* Fix: remove output index

* use dummy index=0 for graphql query

Co-authored-by: Hebi Li <lihebi.com@gmail.com>

Author: li-xin-yi

ui/src/components/Canvas.tsx

@@ -73,8 +73,6 @@ const ScopeNode = memo<Props>(({ data, id, isConnectable }) => {
   const store = useContext(RepoContext);
   if (!store) throw new Error("Missing BearContext.Provider in the tree");
   const flow = useReactFlow();
-  const getPod = useStore(store, (state) => state.getPod);
-  const pod = getPod(id);
   const setPodName = useStore(store, (state) => state.setPodName);
   const updatePod = useStore(store, (state) => state.updatePod);
   const [target, setTarget] = React.useState<any>();
@@ -321,8 +319,8 @@ function ResultBlock({ pod, id }) {
       {showOutput ? (
         <Box
           sx={{ paddingBottom: "2px" }}
-          overflow="scroll"
-          maxHeight="145px"
+          overflow="auto"
+          maxHeight="140px"
           border="1px"
         >
           {/* <Box bgcolor="lightgray">Error</Box> */}
@@ -424,6 +422,10 @@ const CodeNode = memo<Props>(({ data, id, isConnectable }) => {
   const role = useStore(store, (state) => state.role);
   const width = useStore(store, (state) => state.pods[id]?.width);
   const isPodFocused = useStore(store, (state) => state.pods[id]?.focus);
+  const index = useStore(
+    store,
+    (state) => state.pods[id]?.result?.count || " "
+  );
   const inputRef = useRef<HTMLInputElement>(null);
 
   const showResult = useStore(
@@ -550,7 +552,7 @@ const CodeNode = memo<Props>(({ data, id, isConnectable }) => {
             }}
           ></InputBase>
         </Box>
-        <Box sx={styles["pod-index"]}>[{pod.index}]</Box>
+        <Box sx={styles["pod-index"]}>[{index}]</Box>
         <Box
           sx={{
             display: "flex",
@@ -634,7 +636,7 @@ const CodeNode = memo<Props>(({ data, id, isConnectable }) => {
               position: "absolute",
               top: isRightLayout ? 0 : "100%",
               left: isRightLayout ? "100%" : 0,
-              maxHeight: "158px",
+              maxHeight: "160px",
               maxWidth: isRightLayout ? "300px" : "100%",
               minWidth: isRightLayout ? "150px" : "100%",
               boxSizing: "border-box",
@@ -845,7 +847,6 @@ export function Canvas() {
       addPod(apolloClient, {
         id,
         parent: "ROOT",
-        index: nodesMap.size + 1,
         type: type === "code" ? "CODE" : "DECK",
         lang: "python",
         x: position.x,

ui/src/lib/fetch.tsx

@@ -95,7 +95,6 @@ export function normalize(pods) {
       y: 0,
       width: 0,
       height: 0,
-      index: 0,
     },
   };
 
@@ -129,7 +128,7 @@ export function normalize(pods) {
     // pod.children = pod.children.map(({ id }) => id);
     //
     // sort according to index
-    pod.children.sort((a, b) => res[a.id].index - res[b.id].index);
+    // pod.children.sort((a, b) => res[a.id].index - res[b.id].index);
     // if (pod.type === "WYSIWYG" || pod.type === "CODE") {
     //   pod.content = JSON.parse(pod.content);
     // }
@@ -180,7 +179,6 @@ function serializePodInput(pod) {
     column,
     lang,
     parent,
-    // index,
     children,
     result,
     stdout,
@@ -223,7 +221,7 @@ function serializePodInput(pod) {
   }))(pod);
 }
 
-export async function doRemoteAddPod(client, { repoId, parent, index, pod }) {
+export async function doRemoteAddPod(client, { repoId, parent, pod }) {
   const mutation = gql`
     mutation addPod(
       $repoId: String
@@ -240,7 +238,7 @@ export async function doRemoteAddPod(client, { repoId, parent, index, pod }) {
     variables: {
       repoId,
       parent,
-      index,
+      index: 0,
       input: serializePodInput(pod),
     },
     // FIXME the query is not refetched.

ui/src/lib/store.tsx

@@ -114,7 +114,6 @@ export type Pod = {
   midports?: {};
   isSyncing: boolean;
   io: {};
-  index: number;
   x: number;
   y: number;
   width: number;
@@ -164,7 +163,7 @@ export interface RepoSlice {
   setPodContent: ({ id, content }: { id: string; content: string }) => void;
   addPod: (
     client: ApolloClient<object> | null,
-    { parent, index, anchor, shift, id, type, lang, x, y, width, height }: any
+    { parent, anchor, shift, id, type, lang, x, y, width, height }: any
   ) => void;
   deletePod: (
     client: ApolloClient<object> | null,
@@ -247,14 +246,8 @@ const createRepoSlice: StateCreator<
   setCurrentEditor: (id) => set({ currentEditor: id }),
   addPod: async (
     client,
-    { parent, index, anchor, shift, id, type, lang, x, y, width, height }
+    { parent, anchor, shift, id, type, lang, x, y, width, height }
   ) => {
-    if (index === undefined) {
-      index = get().pods[parent].children.findIndex(({ id }) => id === anchor);
-      if (index === -1) throw new Error("Cannot find anchoar pod:", anchor);
-      index += shift | 0;
-    }
-
     if (!parent) {
       parent = "ROOT";
     }
@@ -289,7 +282,6 @@ const createRepoSlice: StateCreator<
       focus: false,
       // from payload
       parent,
-      index,
       id,
       type,
       x,
@@ -306,7 +298,7 @@ const createRepoSlice: StateCreator<
           // TODO the children no longer need to be ordered
           // TODO the frontend should handle differently for the children
           // state.pods[parent].children.splice(index, 0, id);
-          state.pods[parent].children.splice(index, 0, { id, type: pod.type });
+          state.pods[parent].children.push({ id, type: pod.type });
           // DEBUG sort-in-place
           // TODO I can probably insert
           // CAUTION the sort expects -1,0,1, not true/false
@@ -319,7 +311,6 @@ const createRepoSlice: StateCreator<
       await doRemoteAddPod(client, {
         repoId: get().repoId,
         parent,
-        index,
         pod,
       });
     }
@@ -467,8 +458,10 @@ const createRepoSlice: StateCreator<
     set(
       produce((state) => {
         let pod = state.pods[id];
-        pod.name = name;
-        pod.dirty = true;
+        if (pod) {
+          pod.name = name;
+          pod.dirty = true;
+        }
       }),
       false,
       // @ts-ignore
@@ -707,13 +700,8 @@ const createRepoSlice: StateCreator<
     );
   },
   loadRepo: async (client, id) => {
-    const {
-      pods,
-      name,
-      error,
-      userId,
-      collaboratorIds,
-    } = await doRemoteLoadRepo({ id, client });
+    const { pods, name, error, userId, collaboratorIds } =
+      await doRemoteLoadRepo({ id, client });
     set(
       produce((state) => {
         // TODO the children ordered by index