Feature/provenance updates #804
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,18 @@ | ||
| import { DefaultButton, Icon, SpinnerSize } from "@fluentui/react"; | ||
| import { | ||
| Edge, | ||
| ReactFlow, | ||
| EdgeTypes, | ||
| useNodesState, | ||
| useEdgesState, | ||
| Controls, | ||
| useReactFlow, | ||
| ReactFlowProvider, | ||
| } from "@xyflow/react"; | ||
| import "@xyflow/react/dist/style.css"; | ||
| import classNames from "classnames"; | ||
| import React from "react"; | ||
| import { useDispatch, useSelector } from "react-redux"; | ||
|
|
||
| import DefaultEdge from "./Edges/DefaultEdge"; | ||
| import FileNode from "./Nodes/FileNode"; | ||
|
|
@@ -19,6 +28,7 @@ import { | |
| import { interaction, selection } from "../../state"; | ||
|
|
||
| import styles from "./NetworkGraph.module.css"; | ||
| import buttonStyles from "../Buttons/TertiaryButton.module.css"; | ||
|
|
||
| interface NetworkGraphProps { | ||
| className?: string; | ||
|
|
@@ -37,20 +47,8 @@ const NODE_TYPES = { | |
| * Component for rendering a graph at the given origin | ||
|
Contributor
There was a problem hiding this comment. This is awesome! What do you think about one step further so that no user of the component has to really think about it? This way they would import an already wrapped graph, but that part is shoved away nicely (IMO)
Contributor
Author
There was a problem hiding this comment. That makes sense to me! Implemented in dddd5cb, I was split on whether or not to rename the import in RelationshipDiagram but left it as is for now, open to changing it |
||
| */ | ||
| export default function NetworkGraph(props: NetworkGraphProps) { | ||
| const isLoading = useSelector(interaction.selectors.isGraphLoading); | ||
| const provenanceSource = useSelector(selection.selectors.getSelectedSourceProvenance); | ||
| // The option to open this graph shouldn't even appear when a | ||
| // source isn't available so this shouldn't ever happen | ||
| if (!provenanceSource) { | ||
|
|
@@ -65,26 +63,73 @@ export default function NetworkGraph(props: NetworkGraphProps) { | |
| ); | ||
| } | ||
|
|
||
| // The ReactFlow component can only access state (useReactFlow) if it's the child of a ReactFlowProvider | ||
| // See https://reactflow.dev/learn/troubleshooting/common-errors#001 | ||
| function ReactFlowComponent() { | ||
|
aswallace marked this conversation as resolved.
Outdated
|
||
| const dispatch = useDispatch(); | ||
| const [edges, setEdges, onEdgesChange] = useEdgesState<Edge<AnnotationEdge>>([]); | ||
| const [nodes, setNodes, onNodesChange] = useNodesState<FileNodeType | MetadataNodeType>([]); | ||
| const graph = useSelector(interaction.selectors.getGraph); | ||
| const refreshKey = useSelector(interaction.selectors.getGraphRefreshKey); | ||
| // Unfortunately we have to have some notion of state at a high level for control from the components | ||
| // and at the dagre level for when the user does a drag action causing this duplication of efforts | ||
| React.useEffect(() => { | ||
| let cancel = false; | ||
| if (!cancel) { | ||
| setEdges(graph.edges); | ||
| setNodes(graph.nodes); | ||
| } | ||
| return function cleanup() { | ||
| cancel = true; | ||
| }; | ||
| }, [graph, setEdges, setNodes, refreshKey]); | ||
| const { fitView } = useReactFlow(); | ||
| const onClickReset = () => { | ||
| graph.resetLayout(); // return to default layout if any | ||
| fitView(); // reset zoom | ||
| dispatch(interaction.actions.refreshGraph()); | ||
| }; | ||
| return ( | ||
| <> | ||
| <DefaultButton | ||
|
SeanDuHare marked this conversation as resolved.
Outdated
|
||
| className={classNames(buttonStyles.button, styles.refreshButton)} | ||
| title="Reset graph to initial state" | ||
| onClick={onClickReset} | ||
| > | ||
| <Icon iconName="Refresh" /> | ||
| Reset view | ||
| </DefaultButton> | ||
| <ReactFlow | ||
| fitView | ||
| onlyRenderVisibleElements | ||
| className={styles.graph} | ||
| edgesFocusable={false} | ||
| nodesDraggable={false} | ||
| nodesConnectable={false} | ||
| nodesFocusable={false} | ||
| elementsSelectable={true} | ||
| edgesReconnectable={false} | ||
| colorMode="dark" | ||
| nodes={nodes} | ||
| edges={edges} | ||
| edgeTypes={EDGE_TYPES} | ||
| nodeTypes={NODE_TYPES} | ||
| proOptions={{ hideAttribution: true }} | ||
| onNodesChange={onNodesChange} | ||
| onEdgesChange={onEdgesChange} | ||
| > | ||
| <Controls showInteractive={false} /> | ||
| </ReactFlow> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| // The wrapped ReactFlow component | ||
| return ( | ||
| <div className={classNames(props.className, styles.reactFlow)}> | ||
| <ReactFlowProvider> | ||
| <ReactFlowComponent /> | ||
| </ReactFlowProvider> | ||
| </div> | ||
| ); | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.