Add new graph

[xypnox]

Description

• New graph library react-force-graph
• Features
  • 3D
  • Click to focus with animation
  • Fit graph to screen
  • Fullscreen graph
  • Stability
• Global graph is based on the current opened namespace
• Local graph includes all nodes related to the current note, including those of different namespaces
• Local graph has directional curved links with arrows
• Graph controls are:
  • Left click+drag to rotate
  • Right click+drag to pan
  • Left click on node to focus it and see its preview
  • Left click and drag to reposition the node (positions are not saved)
  • Mouse wheel/Middle click to zoom
  • Buttons for fullscreen / fit graph to screen beside the local graph switch
• Root node has been replaced with the current namespace name

Motivation and Context

• Revamp old graph

How has this been tested?

• Making new graph
• Seeing graphs for different namespaces

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

• My code follows the code style of this project.

[linear]

WD-1562 [TASK] Add new graph

Description

https://www.npmjs.com/package/react-force-graph

Purpose

What is the purpose of this task?

Make graph great again

• Basic nested hierarchy
• On Click preview
• On double click navigate
• Local Graph

Additional Context

Any additional information that needs to be added

NA

[github-actions]

yarn.lock changes

Summary

Status	Count
	103
	96
	4

Click to toggle table visibility

Name	Status	Previous	Current
@babel/compat-data		7.18.13	7.19.1
@babel/core		7.18.13	7.19.1
@babel/generator		7.18.13	7.19.0
@babel/helper-compilation-targets		7.18.9	7.19.1
@babel/helper-function-name		7.18.9	7.19.0
@babel/helper-module-transforms		7.18.9	7.19.0
@babel/helper-plugin-utils		7.18.9	7.19.0
@babel/helper-validator-identifier		7.18.6	7.19.1
@babel/helpers		7.18.9	7.19.0
@babel/parser		7.18.13	7.19.1
@babel/plugin-transform-react-jsx		7.18.10	7.19.0
@babel/runtime-corejs2		7.18.9	7.19.2
@babel/runtime		7.18.9	7.19.0
@babel/traverse		7.18.13	7.19.1
@babel/types		7.18.13	7.19.0
@esbuild/android-arm		-	0.15.8
@esbuild/linux-loong64		0.14.54	0.15.8
@fluentui/theme		1.7.8	1.7.11
@iconify/icons-bi		1.2.8	1.2.9
@iconify/icons-logos		1.2.15	1.2.17
@iconify/icons-simple-icons		1.2.24	1.2.27
@iconify/types		1.1.0	2.0.0
@microsoft/load-themed-styles		1.10.290	1.10.295
@react-spring/animated		9.5.2	9.5.4
@react-spring/core		9.5.2	9.5.4
@react-spring/konva		9.5.2	9.5.4
@react-spring/native		9.5.2	9.5.4
@react-spring/rafz		9.5.2	9.5.4
@react-spring/shared		9.5.2	9.5.4
@react-spring/three		9.5.2	9.5.4
@react-spring/types		9.5.2	9.5.4
@react-spring/web		9.5.2	9.5.4
@react-spring/zdog		9.5.2	9.5.4
@remix-run/router		-	1.0.0
@testing-library/dom		8.17.1	8.18.0
@tweenjs/tween.js		-	18.6.4
@types/lodash		4.14.184	4.14.185
@types/minimatch		5.1.1	5.1.2
@types/node		14.18.26	14.18.29
@types/react		18.0.17	18.0.20
@types/three		-	0.144.0
@types/webxr		-	0.5.0
@udecode/zustood		1.1.1	1.1.3
@uifabric/merge-styles		7.19.2	7.20.0
@uifabric/styling		7.21.3	7.22.3
@uifabric/utilities		7.36.0	7.38.0
@vitejs/plugin-react		2.0.1	2.1.0
3d-force-graph-ar		-	1.7.5
3d-force-graph-vr		-	2.0.15
3d-force-graph		-	1.70.13
accessor-fn		-	1.3.2
aframe-extras		-	6.1.1
aframe-forcegraph-component		-	3.0.6
aframe		-	1.3.0
an-array		-	1.0.0
ansi-styles		6.1.0	6.1.1
array-shuffle		-	1.0.1
as-number		-	1.0.0
bezier-js		-	6.1.0
browserslist		4.21.3	4.21.4
buffer-to-arraybuffer		-	0.0.5
caniuse-lite		1.0.30001385	1.0.30001406
canvas-color-tracker		-	1.1.6
cardboard-vr-display		-	1.0.19
ci-info		3.3.2	3.4.0
core-js		3.25.0	3.25.2
csstype		3.1.0	3.1.1
custom-event-polyfill		-	1.0.7
d3-array		-	3.2.0
d3-binarytree		-	0.2.2
d3-color		-	3.1.0
d3-dispatch		-	3.0.1
d3-drag		-	3.0.0
d3-ease		-	3.0.1
d3-force-3d		-	3.0.3
d3-format		-	3.1.0
d3-interpolate		-	3.0.1
d3-octree		-	0.2.2
d3-quadtree		-	3.0.1
d3-scale-chromatic		-	3.0.0
d3-scale		-	4.0.2
d3-selection		-	3.0.0
d3-time-format		-	4.1.0
d3-time		-	3.0.0
d3-timer		-	3.0.1
d3-transition		-	3.0.1
d3-zoom		-	3.0.0
data-joint		-	1.2.6
date-fns		2.29.2	2.29.3
debounce		-	1.2.1
decode-uri-component		-	0.2.0
deep-assign		-	2.0.0
document-register-element		-	0.5.4
dom-walk		-	0.1.2
downshift		6.1.9	6.1.11
dtype		-	2.0.0
electron-to-chromium		1.4.234	1.4.254
es-abstract		1.20.1	1.20.2
esbuild-android-64		0.14.54	0.15.8
esbuild-android-arm64		0.14.54	0.15.8
esbuild-darwin-64		0.14.54	0.15.8
esbuild-darwin-arm64		0.14.54	0.15.8
esbuild-freebsd-64		0.14.54	0.15.8
esbuild-freebsd-arm64		0.14.54	0.15.8
esbuild-linux-32		0.14.54	0.15.8
esbuild-linux-64		0.14.54	0.15.8
esbuild-linux-arm		0.14.54	0.15.8
esbuild-linux-arm64		0.14.54	0.15.8
esbuild-linux-mips64le		0.14.54	0.15.8
esbuild-linux-ppc64le		0.14.54	0.15.8
esbuild-linux-riscv64		0.14.54	0.15.8
esbuild-linux-s390x		0.14.54	0.15.8
esbuild-netbsd-64		0.14.54	0.15.8
esbuild-openbsd-64		0.14.54	0.15.8
esbuild-sunos-64		0.14.54	0.15.8
esbuild-wasm		-	0.15.8
esbuild-windows-32		0.14.54	0.15.8
esbuild-windows-64		0.14.54	0.15.8
esbuild-windows-arm64		0.14.54	0.15.8
esbuild		0.14.54	0.15.8
eslint-plugin-react		7.31.1	7.31.8
fast-glob		3.2.11	3.2.12
flatten-vertex-data		-	1.0.2
follow-redirects		1.15.1	1.15.2
force-graph		-	1.42.13
fromentries		-	1.3.2
get-intrinsic		1.1.2	1.1.3
gl-preserve-state		-	1.0.0
global		-	4.4.0
index-array-by		-	1.3.3
internmap		-	2.0.3
is-callable		1.2.4	1.2.6
is-function		-	1.0.2
jerrypick		-	1.0.5
jotai		1.8.2	1.8.4
kapsule		-	1.13.8
layout-bmfont-text		-	1.3.4
load-bmfont		-	1.4.1
lodash.throttle		-	4.1.1
map-limit		-	0.0.1
mdast-util-to-hast		12.2.1	12.2.2
min-document		-	2.19.0
new-array		-	1.0.0
ngraph.events		-	1.2.2
ngraph.forcelayout		-	3.3.0
ngraph.graph		-	20.0.0
ngraph.merge		-	1.0.0
ngraph.random		-	1.1.0
nice-color-palettes		-	1.0.1
nosleep.js		-	0.7.0
parse-bmfont-ascii		-	1.0.6
parse-bmfont-binary		-	1.0.6
parse-bmfont-xml		-	1.1.4
parse-headers		-	2.0.5
phin		-	2.9.3
present		-	0.0.6
process		-	0.11.10
promise-polyfill		-	3.1.0
quad-indices		-	2.0.1
query-string		-	5.1.1
rc-util		5.23.0	5.24.4
react-force-graph		-	1.41.14
react-hook-form		7.34.2	7.35.0
react-hot-toast		2.3.0	2.4.0
react-kapsule		-	2.2.5
react-responsive		9.0.0-beta.10	9.0.0
react-router-dom		6.3.0	6.4.0
react-router		6.3.0	6.4.0
react-spring		9.5.2	9.5.4
react-virtuoso		2.17.2	2.19.0
react-vis-network-graph		3.0.1	-
rollup		2.77.3	2.78.1
sanitize-html		2.7.1	2.7.2
strict-uri-encode		-	1.1.0
super-animejs		-	3.1.0
super-three		-	0.137.0
three-bmfont-text		-	2.4.0
three-buffer-vertex-data		-	1.1.0
three-forcegraph		-	1.39.5
three-pathfinding		-	0.7.0
three-render-objects		-	1.27.3
three-spritetext		-	1.6.5
three		-	0.144.0
timed-out		-	4.0.1
tinycolor2		-	1.4.2
ts-loader		9.3.1	9.4.0
typescript		4.8.2	4.8.3
update-browserslist-db		1.0.5	1.0.9
url-set-query		-	1.0.0
use-memo-one		1.1.2	1.1.3
uuid		2.0.3	-
vfile		5.3.4	5.3.5
vis-data		6.6.1	-
vis-network		7.10.2	-
vite		3.0.9	3.1.3
webvr-polyfill-dpdb		-	1.0.18
webvr-polyfill		-	0.10.12
word-wrapper		-	1.0.7
xhr-request		-	1.1.0
xhr		-	2.6.0
xml-parse-from-string		-	1.0.1
xml2js		-	0.4.23
xtend		-	4.0.2