feat: GroupTreePlot --- Refactor to typescript + better D3 and React …

…integration + some small features (#2367)

Resolves #1829 

* `refactor`: Fully rewrites the old D3-only `GroupTreePlot` component
to more seemlessly use both D3 and React to build the graph
* In essence; D3 is now purely used to calculate hierarchies and node
positions, whilst React handles the rendering of said nodes
* D3 is also used to animate transitions between graph states (assisted
by React to trigger the animation changes)
* ~`dependency`: Installed the `react-transition-group` package to
facilitate leave-enter transitions for graph elements~
* `dependency`: Installed the [`motion` library](https://motion.dev/) to
facilitate leave-enter transitions for graph elements
* `refactor`: `groupTreeAssembler` has been replaced; it has been split
it into by react components (to handle svg rendering), and the new
`DataAssembler` class, to handle the data itself. Rewritten in proper
Typescript
* _Note, the old assembler would display dummy data if an empty data
tree list was fed to the constructor. The new version is more picky, and
will throw an error if this is done. The Core component will instead
display an error showing that the data is invalid, to make it more clear
that something is wrong_
* `fix`: The rendered tree is now more centered in the SVG
* `fix`: The tree will now fill the entire width of the SVG
* `feature/fix`: Child nodes can now be minimized and expanded, as
intended
* `feature`: Added `initialVisibleDepth`; renders the tree with all
nodes from the given depth collapsed
* `feature`: The plot is now fully resizable.
* An example of resizing is show in the "Resizable" Story
(`/?path=/story/grouptreeplot-demo--resizable`)

### Known issue (slight animation regression)
Because each component initializes their own enter/leave animations in
their enter/leave-callbakcs, the D3 animations get slightly
de-synchronized, so new/old tree edges get slightly "detached" from the
tree when it grows shrinks (only during the animation). The d3 only
version did not have this issue (as it set up all animations in one
single update), so it's a regression.

However, this is only noticable in slower animations, and with a 200ms
transition duration, it's more or less impossible to notice, so I'm
leaving it unresolved for now

typescript/packages/group-tree-plot/example-data/dated-trees.ts

@@ -152,7 +152,7 @@ const secondDatedTree: DatedTree = {
                 },
                 edge_label: "VFP14",
                 edge_data: {
-                    waterrate: [20, 30],
+                    waterrate: [20, 0],
                     oilrate: [30, 40],
                     gasrate: [40, 50],
                     waterinjrate: [50, 60],

typescript/packages/group-tree-plot/package.json

@@ -17,7 +17,8 @@
     "license": "MPL-2.0",
     "dependencies": {
         "d3": "^7.8.2",
-        "lodash": "^4.17.21"
+        "lodash": "^4.17.21",
+        "motion": "^11.18.0"
     },
     "peerDependencies": {
         "react": "^17 || ^18",