feat: faster notebook loading (#3193)

Author: drdelambre

src/flows/context/flow.list.tsx

@@ -30,8 +30,8 @@ import {
 import {incrementCloneName} from 'src/utils/naming'
 
 export interface FlowListContextType extends FlowList {
-  add: (flow?: Flow) => Promise<string>
-  clone: (id: string) => void
+  add: (flow?: Flow) => Promise<string | void>
+  clone: (id: string) => Promise<string | void>
   update: (id: string, flow: Partial<Flow>) => void
   remove: (id: string) => void
   currentID: string | null
@@ -176,7 +176,7 @@ export const FlowListProvider: FC = ({children}) => {
     getAll()
   }, [])
 
-  const clone = async (id: string): Promise<string> => {
+  const clone = async (id: string): Promise<string | void> => {
     if (!flows.hasOwnProperty(id)) {
       throw new Error(`${PROJECT_NAME} not found`)
     }
@@ -194,7 +194,7 @@ export const FlowListProvider: FC = ({children}) => {
     return await add(data)
   }
 
-  const add = async (flow?: Flow): Promise<string> => {
+  const add = (flow?: Flow): Promise<string | void> => {
     let _flow
 
     if (!flow) {
@@ -217,30 +217,18 @@ export const FlowListProvider: FC = ({children}) => {
       }
     }
 
-    const apiFlow = serialize(_flow)
-
-    let id: string = `local_${UUID()}`
-    try {
-      const flow = await createAPI(apiFlow)
-      id = flow.id
-
-      _flow = hydrate(flow)
-    } catch {
-      dispatch(notify(notebookCreateFail()))
-    }
-
-    return new Promise(resolve => {
-      setTimeout(() => {
+    return createAPI(serialize(_flow))
+      .then(flow => {
         setFlows({
           ...flows,
-          [id]: _flow,
+          [flow.id]: hydrate(flow),
         })
 
-        setCurrentID(id)
-
-        resolve(id)
-      }, 200)
-    })
+        return flow.id
+      })
+      .catch(() => {
+        dispatch(notify(notebookCreateFail()))
+      })
   }
 
   const update = useCallback(
@@ -307,6 +295,11 @@ export const FlowListProvider: FC = ({children}) => {
   )
 
   const migrate = async () => {
+    const localFlows = Object.keys(flows).filter(id => id.includes('local'))
+    if (!localFlows.length) {
+      return
+    }
+
     const _flows = await migrateLocalFlowsToAPI(
       org.id,
       flows,

src/flows/context/flow.query.tsx

@@ -1,4 +1,11 @@
-import React, {FC, useContext, useMemo, useEffect, useState} from 'react'
+import React, {
+  FC,
+  useContext,
+  useMemo,
+  useEffect,
+  useState,
+  useRef,
+} from 'react'
 import {useDispatch, useSelector} from 'react-redux'
 import {getVariables} from 'src/variables/selectors'
 import {FlowContext} from 'src/flows/context/flow.current'
@@ -141,7 +148,8 @@ export const FlowQueryProvider: FC = ({children}) => {
     }, {})
   }, [variables, flow?.range])
 
-  const generateMap = (): Stage[] => {
+  const _map = useRef([])
+  const _generateMap = (): Stage[] => {
     const stages = (flow?.data?.allIDs ?? []).reduce((acc, panelID) => {
       const panel = flow.data.byID[panelID]
 
@@ -196,9 +204,25 @@ export const FlowQueryProvider: FC = ({children}) => {
       return acc
     }, [])
 
+    _map.current = stages
     return stages
   }
 
+  useEffect(() => {
+    _generateMap()
+  }, [flow])
+
+  const generateMap = (): Stage[] => {
+    if (
+      !_map.current ||
+      (!_map.current.length && (flow?.data?.allIDs ?? []).length)
+    ) {
+      _generateMap()
+    }
+
+    return _map.current
+  }
+
   // TODO figure out a better way to cache these requests
   const getPanelQueries = (id: string): Stage | null => {
     if (!id) {

src/flows/pipes/QueryBuilder/context.tsx

@@ -251,9 +251,9 @@ export const QueryBuilderProvider: FC = ({children}) => {
         scope
       )
         .then(resp => {
-          return Object.values(resp.parsed.table.columns).filter(
+          return (Object.values(resp.parsed.table.columns).filter(
             c => c.name === '_value' && c.type === 'string'
-          )[0].data as string[]
+          )[0]?.data ?? []) as string[]
         })
         .then(keys => {
           if (!cards[idx].keys.selected[0]) {
@@ -343,9 +343,9 @@ export const QueryBuilderProvider: FC = ({children}) => {
         scope
       )
         .then(resp => {
-          return Object.values(resp.parsed.table.columns).filter(
+          return (Object.values(resp.parsed.table.columns).filter(
             c => c.name === '_value' && c.type === 'string'
-          )[0].data as string[]
+          )[0]?.data ?? []) as string[]
         })
         .then(values => {
           cardMeta.splice(idx, 1, {