Project structure Reading:

[xp1632]

Read the project code from top index.tsx -get the relation of different component -Better have a graph

[xp1632]

Src/index.tsx

1. I start with index.tsx in src I checked App() and the root

The most top component is

2. In < MainArea >,we have components: ///-Progress _MUI -NodeLibraryList ///-InPlaceTextArea -Three buttons /-A regular textarea -VPEditor

3. /// is the components that is not quite useful

4. In < NodeLibraryList > -three functions are defined -onUninstall -onDisable -onEnable which are clearly defined for buttons inside the accordion

5. Three buttons:

   -Load deafult: -setActivated(true) -setContent(deepCopy example) here the type of example is Serializedgraph

   -Clear: -setActivated(false) -setContent(undefined)

   -Clear 2 (I don't quite understand the difference of these two clears) -sceneActions.clear()

6.The regular textarea shows the changedCount of

7. < VPEditor > has:

   -id -content -onContentChange() //Count the number of change -activated -onSceneActionsInit() //Not sure about functions -onSelectionChange -option

[xp1632]

Src/index.tsx

1. I start with index.tsx in src I checked App() and the root

The most top component is

2. In ,we have components: ///-Progress _MUI -NodeLibraryList ///-InPlaceTextArea -Three buttons /-A regular textarea -VPEditor
3. /// is the components that is not quite useful
4. In -three functions are defined -onUninstall -onDisable -onEnable which are clearly defined for buttons inside the accordion
5. Three buttons: -Load deafult: -setActivated(true) -setContent(deepCopy example) here the type of example is Serializedgraph -Clear: -setActivated(false) -setContent(undefined) -Clear 2 (I don't quite understand the difference of these two clears) -sceneActions.clear()

6.The regular textarea shows the changedCount of

7. has: -id -content -onContentChange() //Count the number of change -activated -onSceneActionsInit() //Not sure about functions -onSelectionChange -option

[xp1632]

In Issue_2606_2706

1. < NodeLibraryList > -< NodeLibraryList > locates in src/gui NodeLibraryList.tsx

   -Imports, we have: -react hooks -MUI Accordion -filepond, filepondZipper -self-defined components: -SearchInput from './elements' -NodeLibraryItem from './NodeLibraryItem' -self-defined types from ../types -NodeConfig -NodePackage

   • Function nodeConfigToItemList() -In this function, we exrtact the title,href,description from package to use them in ItemList

     -props: -nodeConfigs(Record< string,NodePackage | NodeConfig>) -keyword(string) -nodeConfig,nodePackage is a type in src/types/ConfigTypes

     -return type : INodeLibraryItem -this type is defined in NodeLibraryItem.tsx

   -Function NodeLibraryList() -props: -title(string) -nodeExtensions(Record<string,NodePackage|NodeConfig>) -onUninstall,onEnable,onDisable functions which takes pkg:string as parameter and return void pkg is the abbrevation of package -url(string) -tokens(ITokens)

   -return type : JSX.Element

   -we define a function search():

   const search = useCallback( (searchKeyword: string) => { keyword.current = searchKeyword; setItemList(nodeConfigsToItemList(nodeExtensions, keyword.current)); }, [nodeExtensions] ); //The detailed explaination of useCallback and this part of code is in #5

   -And use it for SearchInput component's onChange < SearchInput onChange={search} />

   -In return of this function,

   -We also have < Accordion/ >, we define setExpanded for its onChange

   -Inside < Accordion/ >, we have and < AccordionDetails/ >

   -In < AccordionSummary/> ,we put the expandicon and title -In < AccordionDetails/>, the itemList we setItemList before , each item is map to < NodeLibraryItem /> -< NodeLibraryItem /> is a component that returns a < li > element with title < div >,description < div >, buttons inside

[xp1632]

2. first layer of VPEditor:

We start with < VPEditor >

-<  VPEditor > locates in src/editor/VPEditor.tsx

-Imports, we have:
        -react hooks
    ?-ReactFlow
    ?-self-defined hooks: useGraph, useScene,useGUI
        -self-defined GUI: NodeMenu, EdgeMenu, HandleMenu

    ?-Setting from './VPPanelSetting'
    ??-WidgetFactoryProvider from './Context'
    ??-type SerializedGraph and selectedElementCounts from './types'
    ??-components: componentType,Background,ControlPanel,Minimap from './components'

-We define <  Scene > component:
    -props:
        -id:string
        -graph: SerializedGraph|null
        -Function on ContentChange : (graph:string) => void

        -activated: boolean
        -Function onSceneActionInit :(actions:ISceneActions)=> void
        -Function onSelectionChange: (counts:selectedElementCounts) => void
        -option: IVPEditorOption

    -hooks:
        -useState: setInitialed //Define if the scene is initialized
        -useRef: 
            -currentContent,sceneInstance to locate the string or ReactFlowInstance
        -useGraph: defines the graph state
            -graphState contains:
                nodes,onNodesChange
                edges,onEdgesChange
                onConnect, fromJSON,toString

        ?-sceneState = useScene()
        ?-sceneActions = sceneState?.sceneActions;

        -useKeyDown: listens the keyboard event

        -useGui:defines the gui

    -Setting from './VPPanelSetting:
        {
            view:viewSetting
            select:selectSetting
            Edge:EdgeSetting
            background:bgSetting
            controlPanel:cpSetting
            minimap:minimpSetting
        } = Setting

    -function closeWidget is called if activated is changed and set to false
        Inside closeWidget, gui.closeWidget() is called when conditions met

    -graph Initialization, useEffect(,[graph, initialized]):
        //The graph would be updated when the graph or initBoolean changes
        -if the graph is not initialized,
        -we get nodes from graph 's JSON by fromJSON()
        -then we get rect from getRectOfNodes(nodes)

    -triggerContentChange():
    content(node,edges) update when content changes

    -return:
        -< ConnecctionTip> //we can check gui.xxx, it's widely used
        -< SearchMenu> etc, the menu has common props:
            -open,onClose,anchorPosition
            -and each of Menu has their own props, we should check further

        -< ReactFlow>: 
        Inside this we have two children components < Minimap>, < Background>

        -for ReactFlow, we have props:
            -id 
            -onInit-->setInitialed(true)
            -onMouseMove
            ?-onSelectionChange 
            -onPanelClick, onNodeClick --> closeWidget()
            -onEdgesClick--> with ctrl, the edge is deleted
            ?-onEdgesDoubleClick --> called some sceneActions(addNode,addEdge)
            -onPaneContextMenu,onNodeContextMenu,onEdgesContextMenu,
                ?--> pay attention to gui.openWidget
                it opens different types of menu by keyword 'search', 'handle'
                'node','edge'

            ?-ref : reactflowDomRef
            -nodes, edges

            ?-connectionMode-ConnectionMode.Loose

            ?-onNodesChange, onEdgesChange, onConnect
            are all defined in preivious 'graphState'

            -isValidConnection() : checks the status by isFromSource(), toDom()

            ?-onConnectStart, onConnectEnd
            in start we set param.nodeId to gui,connectionStartNodeId
            in end we set null to it

            -use Setting's viewSetting:
            we define minZoom,maxZoom,snapToGrid,snapGrid,onlyRenderVisibleElements

            -selectionMode is set, used selectSettings

            -multiSelctionKeyCode ="shift"

            -deleteKeyCode and selectionKeyCode are set as null

            -panOnDrag is set as right mouse button

            -connnectionLineType and connectionRadius is set by EdgeSetting

            -onNodeDragStart and onNodeDragStop are defined in sceneActions

            -onMove update mouse postion by >?mouseTracker.updateMousePos

            -onSelectionStart : closeWidget()

            -onNodeDrag also update MousePostion

            -proOptions for future options

        -< Minimap> is set with minimapSetting
        -< Background> is set with bgSetting

-Finally in function VPEditor's return:
    < Scene> is showed with the wrap of < WidgetFactoryProvider>-->< ReactFlowProvider>

    < WidgetFactoryProvider>
        < ReactFlowProvider>
            < Scene>

[xp1632]

On level 2's reading of VPEditor, we start from

    < WidgetFactoryProvider>
        < ReactFlowProvider>
            < Scene>

3. < VPEditor > deeper -----> < WidgetFactoryProvider> < WidgetFactoryProvider > is defined by

   V WidgetFactoryConetext.Provider , it's the same as ContextProvider

   V WidgetFactoryConetext is the context created based on WidgetFactory.tsx

   V In WidgetFactory.tsx, class WidgetFactory is defined

   V In class WidgetFactory, we have -privete memebers _availableWidgets -getInstance() function -createWidget() // Here for efficiency ,we use cloneElement by using an exisiting element as starting point

4.2 is provider we need when we work with multiple flows on a page, components need to be wrapped inside of it.

[xp1632]

[xp1632]

1. Deserilizer.ts to know and useGraph

-In Deserilizer.ts:

In class Deserilizer,
We define serializedToGraphNodeConfig() 
where SerializedGraphNode => GraphNodeConfig

we get nodeConfig from nodeConfigRegistry.ts in ./extension
? What's the usage of configuration?
//The nodeConfig is to register node name pair with NodePackage we defined in types

export interface NodeConfig {
  category: string;
  title?: string;
  inputs?: Record<string, HandleConfig>;
  outputs?: Record<string, HandleConfig>;
  tooltip?: string;
  [key: string]: any;
  dataType?: string; // the data type for all the handles
  enable?: boolean;
}

export interface NodePackage {
  isPackage: true;
  nodes: Record<string, NodeConfig | NodePackage>;
  notShowInMenu?: boolean;
  tooltip?: string;
  href?: string;
  description?: string;
  type: string;
  enable?: boolean;

}
//It's hard to read Serilizer and deserializer at the same time.
//Consider read them one at a time

-in serializedToGraphNodeConfig(),
inputs and outputs handles are extracted from SerializedGraphNode

in types/Handle.ts we have :

export interface Handle {
  title?: string;
  connection?: number;
  tooltip?: string;
  dataType?: string;
  defaultValue?: any;
  value?: any;
}

-After finding out what the deserializer does:

-We go back to the useGraph() in hooks:
After we get initGraph = deserializer.deserialize(graph)

-we start to useNodesState() from reactflow package,
This hook is to store a local state of nodes and can be passed as 
a prop by exposing onNodesChange();the same as useEdgesState

-selectedCounts, onContentChange in VPEditor, count+1

-In updateHandleConnection(), we increase the handle.connection by one,
if connected is true.

And after the update, we setNodes to update the state with new nodes

!!In our project, setNodes is define as 
const {setNodes} =useReactflow() in Handles.tsx

-when onConnect, we addEdge

-setDataTypeOfGraph()
? what's the usage of the datatype
//In this function, we set dataType to chosen node and its related edges,handles

We start from useGraph line 191 tomoorww

[xp1632]

In useGraph.ts and deserializer

-setDataTypeOfGraph() // During the talking, we know the set Datatype is mainly for reroute node // where the reroute node is for avoiding edge-stacking by adding another medium node

//So initially, since we don't know what node would the the reroute linked to, we set it as 'any' type, after it's linked to a node, the reroute node and its edge would be update to the linked node's type

-graphIncludeNodewithType() // is to traverse the graph recursively and find nodes with specific type, datatype

-getIncomer() and getOutgoers are from react flow
// to get all the direct incoming node and child node of the passed node

-setDataTypeOfGraphWithRerouteNode() // in this function, we use graphIncludeNodewithType(node,'reroute','any',visitedNode) //to get the reroute node that linked to node with 'reroute', 'any', type

//and we set specific datatype to them with setDataTypeOfGraph(visitedNode,datatype)

-updateDatatypeInGraph() takes in Connection and check the handle type of the connection. returns final datatype of this connection after if rules The rerouteNode is set with the final datatype

-isConnectToNonRerouteNodes() //checks if the node is connected to reroute node

-resetRerouteNodeDataType() // reset all nodes that conneced to reroute node to any

-addEdge() // add new edge using reactflow addEdge() and update

-deleteEdge() // delete edge and update graph, then set the current shouldUpdateDataTypeOfRerouteNode flag as true.

-shouldUpdateDataTypeOfRerouteNode flag

[xp1632]

in Issue 0607:

In useGraph.ts, line 346, we continue reading with

-getFreeUniqueNodeIds() // This function is to go over the current NodeId and try to find a new unoccupied one

-addElements() // to add new nodes or edges

//node.selected is an option for reactflow node https://reactflow.dev/docs/api/nodes/node-options/#selected-1 -Thus, selectedNodes(), selectEdge(),clearEdgeSelection() selectAll(), selectNode() are all modifying the selected boolean flag for certain edges and nodes

-clear(), it setNodes([]), setEdges([]) to empty

-deleteNodes() // delete node with specific nodeId by //1.only setNodes without deleteNodeId //2. set ShouldUpdateDataTypeOfRerouteNode flag as true

-deleteSelectedNodes() // 1. deleted Edges of selectedNodesId, source and target // 2. delete nodes //3. update reroute

-deleteSelectedElements() //if edge, call deleteEdges //if node, call deleteSelectedNodes

-deleteAllEdgesOfNode()// deleteEdges() source and target

-deleteAllEdgesOfSelectedNode() //find selected node by selectedNodes(), deleteAllEdgesOfNode()

-deleteAllEdgesOfHandle // inputs are both nodeId and handleId // deleteEdges( (e) => (e.source === nodeId && e.sourceHandle === handleId) || (e.target === nodeId && e.targetHandle === handleId) );

-We continue code reading of useGraph in line 446

-isValidConnection() -what's action? What's ConnectionAction?

in gui/elements/Menu.tsx 

export interface IMenuItem {
  title: string;
  action?: () => void;
  icon?: any;
  subtitle?: string;
  disabled?: boolean;
  titleStyle?: Record<string, string>;
}
// we notice that action is a self-defined function in Interface ImenuItem