Upgraded npm package versions

package.json

@@ -6,58 +6,55 @@
     "array.prototype.flatmap": "^1.2.4",
     "canvas-toBlob": "^1.0.0",
     "d3-array": "^2.12.1",
-    "d3-interpolate": "^1.4.0",
+    "d3-interpolate": "^2.0.1",
-    "d3-selection": "^1.4.1",
+    "d3-selection": "^2.0.0",
-    "d3-transition": "^1.3.2",
+    "d3-transition": "^2.0.0",
-    "d3-zoom": "^1.8.3",
+    "d3-zoom": "^2.0.0",
     "debounce": "^1.2.1",
-    "detect-browser": "^4.1.0",
+    "detect-browser": "^5.2.0",
     "file-saver": "^2.0.5",
-    "history": "^4.7.2",
     "javascript-natural-sort": "^0.7.1",
     "js-cookie": "^2.2.1",
-    "jspdf": "^1.5.3",
+    "jspdf": "^2.3.1",
-    "lunr": "^2.3.6",
+    "lunr": "^2.3.9",
     "lunr-languages": "^1.4.0",
-    "md5": "^2.2.1",
+    "md5": "^2.3.0",
     "parse-gedcom": "^1.0.5",
-    "query-string": "^5.1.1",
+    "query-string": "^7.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-intl": "^2.8.0",
     "react-linkify": "^0.2.2",
-    "react-router-dom": "^4.3.1",
+    "react-router-dom": "^5.2.0",
     "semantic-ui-css": "^2.4.1",
-    "semantic-ui-react": "^0.84.0",
+    "semantic-ui-react": "^1.3.1",
-    "topola": "^3.3.2"
+    "topola": "^3.3.4"
   },
   "devDependencies": {
-    "@types/array.prototype.flatmap": "^1.2.0",
+    "@types/array.prototype.flatmap": "^1.2.2",
     "@types/d3-array": "^2.9.0",
-    "@types/d3-interpolate": "^1.4.2",
+    "@types/d3-interpolate": "^2.0.0",
-    "@types/d3-selection": "^1.4.3",
+    "@types/d3-selection": "^2.0.0",
-    "@types/d3-transition": "^1.3.1",
+    "@types/d3-transition": "^2.0.0",
-    "@types/d3-zoom": "^1.8.2",
+    "@types/d3-zoom": "^2.0.0",
     "@types/debounce": "^1.2.0",
-    "@types/file-saver": "^2.0.0",
+    "@types/file-saver": "^2.0.1",
     "@types/history": "^4.7.8",
     "@types/js-cookie": "^2.2.4",
-    "@types/jspdf": "^1.2.2",
+    "@types/lunr": "^2.3.3",
-    "@types/lunr": "^2.3.2",
     "@types/md5": "^2.3.0",
-    "@types/query-string": "6.2.0",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
     "@types/react-intl": "^2.3.15",
-    "@types/react-router-dom": "^4.3.1",
+    "@types/react-router-dom": "^5.1.7",
     "@typescript-eslint/eslint-plugin": "^4.19.0",
     "@typescript-eslint/parser": "^4.19.0",
-    "cypress": "^4.0.1",
+    "cypress": "^6.8.0",
-    "gh-pages": "^2.0.1",
+    "gh-pages": "^3.1.0",
-    "prettier": "^1.15.3",
+    "prettier": "^2.2.1",
-    "react-scripts": "^3.4.4",
+    "react-scripts": "^4.0.3",
     "start-server-and-test": "^1.12.1",
-    "tslint-config-prettier": "^1.17.0",
+    "tslint-config-prettier": "^1.18.0",
     "typescript": "^4.2.3"
   },
   "scripts": {

src/chart.tsx

@@ -1,11 +1,17 @@
 import * as React from 'react';
-import {event, select, Selection} from 'd3-selection';
+import {select, Selection} from 'd3-selection';
 import {interpolateNumber} from 'd3-interpolate';
 import {intlShape} from 'react-intl';
 import {max, min} from 'd3-array';
 import {Responsive} from 'semantic-ui-react';
 import {saveAs} from 'file-saver';
-import {zoom, ZoomBehavior, zoomTransform} from 'd3-zoom';
+import {
+  D3ZoomEvent,
+  zoom,
+  ZoomBehavior,
+  ZoomedElementBaseType,
+  zoomTransform,
+} from 'd3-zoom';
 import 'd3-transition';
 import {
   JsonGedcomData,
@@ -27,7 +33,10 @@ const ZOOM_FACTOR = 1.3;
  *
  * @param size the size of the chart
  */
-function zoomed(size: [number, number]) {
+function zoomed(
+  size: [number, number],
+  event: D3ZoomEvent<ZoomedElementBaseType, unknown>,
+) {
   const parent = select('#svgContainer').node() as Element;
 
   const scale = event.transform.k;
@@ -229,10 +238,8 @@ export class Chart extends React.PureComponent<ChartProps, {}> {
     this.zoomBehavior = zoom()
       .scaleExtent(extent)
       .translateExtent([[0, 0], chartInfo.size])
-      .on('zoom', () => zoomed(chartInfo.size));
+      .on('zoom', (event) => zoomed(chartInfo.size, event));
-    select(parent)
+    select(parent).on('scroll', scrolled).call(this.zoomBehavior);
-      .on('scroll', scrolled)
-      .call(this.zoomBehavior);
 
     const scrollTopTween = (scrollTop: number) => {
       return () => {
@@ -261,10 +268,7 @@ export class Chart extends React.PureComponent<ChartProps, {}> {
       0,
       (parent.clientHeight - chartInfo.size[1] * scale) / 2,
     ]);
-    const svgTransition = svg
+    const svgTransition = svg.transition().delay(200).duration(500);
-      .transition()
-      .delay(200)
-      .duration(500);
     const transition = args.initialRender ? svg : svgTransition;
     transition
       .attr('transform', `translate(${offsetX}, ${offsetY})`)

tsconfig.json

@@ -15,10 +15,11 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "allowSyntheticDefaultImports": true,
     "suppressImplicitAnyIndexErrors": true,
-    "sourceMap": true
+    "sourceMap": true,
+    "noFallthroughCasesInSwitch": true
   },
   "include": [
     "src"