Frontend SitePage Element - GraphNavigation

Querying Backend per Node

• After the GraphNavigation Config is received from the backend an initial SortResult request is sent to the backend to find data to populate the graph
• One request per node found
• Config will specify how many hops to request data for, from currently focused node or from floating nodes (case of multiple initial nodes)
• Could move some of this processing to a backend endpoint that combines a number of hops into one request
• SortFields will normally be the weight of the relationships, but this can be controlled by settings
• Paginate the sorted results to get the list of relationships to show for any node
• If user requests more nodes, request additional pages from SortResult
• As user navigates the graph, continue sending requests to backend for more nodes/relationships
• Have setting to control how to make additional requests, automatic, when reach leaf node, or manual button to request more

SortResult request

• has additional Param identifying the source node
• also include all filters, requiredData, sortFields
• sent to websocket in SortResult service (?) that notifies when the SortResult is complete, or if using a persistent websocket might be handed by GraphNavigation service

SearchResult request

• Can find any arbritary node/rel properties or versioned data
• Uses the RelNodeId to build the identifiers to query the graph
• requested property/fieldnames are probably a requestParam for a range of filterTags, like findNodeProperty, findRelationshipProperty, findNodeVersionedDataProperty

Complex Filter

• Requires source node identifiers and objType
• builds graph query from request to find relationship and target node, any combination of Node Label / Node property / Relationship Type / Relationship property filters
• query auto adds relUuid and all node properties so can find identifiers for building RelNodeId

Connection to Backend

• Consider a persistent WebSocket recieving requests from frontend for new nodes and sending results to frontend

Initial Data Query

• Initial nodes may come from props or from the GraphNavigation config
• Will be an array of node identifiers, or a sorted search result

Array of node identifiers

• first node is the initial focus
• will need to send request for InitialNodeDetails to get eg node properties
• also send request to getRelNodes for each initial node to begin populating the graph

Sorted Search Result

• Begins a SortResult request for nodes that match the initial query
• All nodes will show, and will begin populating the graph using getRelNodes requests
• sortField/s are required, the first node found will be the focus

Interaction with sitePageConfig

• sitePage can set a starting node/s/sorted query, or have a popup to input the starting node
• Need some way to wrap in conversations presentation that shows most recent, most commented (within timerange) etc
• Maybe that could be a popup settin for the GraphNavigation, or an element that pops up and allows for a search that returns a range of nodes (might not be related) that match the search
• GraphNavigation could be set to default to showing that popup for initial seeding of graph data

Grouping/Clustering of Nodes

• Probably cluster by node label, to allow for easy presentation adjustments by type
• Also add clusters according to viewed this session, or previously viewed (would need supporting backend data)

Component Structure

GraphNavigation

• top level component

GraphNav

• Each graph presentation element
• do not update graphNodes / graphRelationships / nodesRequested in this child component

GraphDetail

• Detail about the graph and/or focused node
• do not update graphNodes / graphRelationships / nodesRequested in this child component

Code Structure

Identifying Nodes

• graphNodeId: hash objType and nodeIdentifiers should create a unique id for specific node

Identifying Relationships

• graphRelId: use relationships identifier

List of Nodes

• variable name: graphNodes
• React State
• in top level GraphNavigation compenent
• is an object, index is graphNodeId
• relationships property contains list of graphRelId
• perhaps set relationships to null prior to getting backend response of relNodes
• after have relNodes set relationships to an array, will be empty array if none found, can test for leaf nodes

List of Relationships

• variable name: graphRelationships
• React State
• in top level GraphNavigation compenent
• is an object, index is graphRelId
• contains nodeA/nodeB properties containing graphNodeIds

List of Nodes requested from backend

• variable name: nodesRequested
• in top level GraphNavigation compenent
• useRef because want to update immediately and not need to render after change
• used to stop duplicate requests to backend

requesting relNodes from backend

• have standard recursive function that receives graphNodeId, name: getRelNodes(graphNode, hops)
• in top level GraphNavigation compenent
• graphNodeId object has a property storing how many hops this node is from currently focused node
• probably not reference any state in getRelNodes because state might not be updated or could be stale, send all required values as params
• if reached limit of hops stop
• if graphNodeId already exists in nodesRequested can stop processing
• set graphNodeId in nodesRequested
• send request to backend
• after get response do most processing inside setGraphNodes and setGraphRelationships so working with latest State
• use cancelToken on backend request, maybe need code to check if cancelled so not adjust state on cancelled/unmounted request

setGraphNodes

• check in graphNodes if hops for node still matches, if not use updated hops from State
• add new nodes to graphNodes
• if not yet reached hops limit, invoke getRelNodes for new nodes

setGraphRelationships

• add new relationship to graphRelationships if not already exist

Change focused node

• handled in GraphNav compenent so all elements do nto re-render when traversing graph
• if detect more must request more nodes using getRelNodes, have a state prop passed down from GraphNavigation compenent that triggers getRelNodes function

idea 1

• reset all nodes to 0 hops from focused node
• traverse graph from focused node using graphRelationships
• update hops property
• if reach node that has not yet requested relationships (set to null) and not reached hop limit, invoke getRelNodes in parent GraphNavigation component
• (later) can remove nodes too distant from focused node here if want to cleanup ram (but must consider all child GraphNav elements)

idea 2

• create a list of nodes and relationships only up to number of hops shown in this GraphNav component
• when change focus (or parent graphNodes/graphRelationships updates) empty this list and rebuild from currently focused node