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

Working documents

Frontend SitePage Element - GraphNavigation