Make sunburst compatible with React 18 rendering mode

Author: vbanos

src/components/sunburst/d3-sunburst.jsx

@@ -1,93 +1,79 @@
-// Display a d3 Sunburst diagram
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import round from 'lodash/round';
 import { select } from 'd3-selection';
 import { hierarchy, partition } from 'd3-hierarchy';
 import { arc } from 'd3-shape';
 import { getSize } from './sunburst-container-utils.js';
 
-function getDistance (capture) {
+function getDistance(capture) {
   if (capture.similarity !== -1) {
     return `${capture.name} - Differences: ${round(capture.similarity, 2)}%`;
   }
 }
 
-export default class D3Sunburst extends React.Component {
-  static propTypes = {
-    simhashData: PropTypes.object,
-    url: PropTypes.string,
-    urlPrefix: PropTypes.string
-  };
+export default function D3Sunburst({ simhashData, urlPrefix, url }) {
+  const chartRef = useRef(null);
+  const [hint, setHint] = useState('');
 
-  state = {
-    hint: ''
-  };
-
-  constructor (props) {
-    super(props);
-    this.chartRef = React.createRef();
-  }
-
-  componentDidMount () {
-    const { simhashData, urlPrefix, url } = this.props;
+  useEffect(() => {
     const width = getSize();
     const height = getSize();
     const radius = Math.min(width, height) / 2;
 
-    // Create primary <g> element
-    const g = select(this.chartRef.current)
+    const svg = select(chartRef.current)
       .attr('width', width)
-      .attr('height', height)
-      .append('g')
-      .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
+      .attr('height', height);
+
+    const g = svg.append('g')
+      .attr('transform', `translate(${width / 2},${height / 2})`);
 
-    // Data strucure
     const structure = partition().size([2 * Math.PI, radius]);
 
-    // Find data root
-    const root = hierarchy(simhashData).sum(function (d) { return 5; });
-    // Size arcs
+    const root = hierarchy(simhashData).sum(() => 5);
     structure(root);
-    const myarc = arc()
-      .startAngle(function (d) { return d.x0; })
-      .endAngle(function (d) { return d.x1; })
-      .innerRadius(function (d) { return d.y0; })
-      .outerRadius(function (d) { return d.y1; });
-    const component = this;
 
-    // Put it all together
+    const myArc = arc()
+      .startAngle(d => d.x0)
+      .endAngle(d => d.x1)
+      .innerRadius(d => d.y0)
+      .outerRadius(d => d.y1);
+
     g.selectAll('path')
       .data(root.descendants())
       .enter().append('path')
-      .attr('display', function (d) { return d.depth ? null : 'none'; })
-      .attr('d', myarc)
+      .attr('display', d => (d.depth ? null : 'none'))
+      .attr('d', myArc)
       .style('stroke', '#fff')
-      .style('fill', function (d) { return d.data.clr; })
+      .style('fill', d => d.data.clr)
       .on('mouseover', function (e, d) {
         select(e.currentTarget).style('cursor', 'pointer').style('stroke', 'black');
-        component.setState({ hint: getDistance(d.data) });
+        setHint(getDistance(d.data));
       })
-      .on('mouseleave', function (e, d) {
+      .on('mouseleave', function (e) {
         select(e.currentTarget).style('cursor', 'default').style('stroke', '');
-        component.setState({ hint: '' });
+        setHint('');
       })
       .on('click', function (e, d) {
         if (d.data.timestamp !== simhashData.timestamp) {
-          const captureUrl = urlPrefix + d.data.timestamp + '/' + simhashData.timestamp + '/' + url;
+          const captureUrl = `${urlPrefix}${d.data.timestamp}/${simhashData.timestamp}/${url}`;
           window.open(captureUrl, '_blank');
         }
       });
-  }
+  }, [simhashData, urlPrefix, url]);
 
-  render () {
-    return (
-      <>
-        <p className="text-center" style={{ marginTop: '10px' }}>{ this.state.hint } &nbsp;</p>
-        <div className="text-center">
-          <svg ref={this.chartRef}></svg>
-        </div>
-      </>
-    );
-  }
+  return (
+    <>
+      <p className="text-center" style={{ marginTop: '10px' }}>{hint}&nbsp;</p>
+      <div className="text-center">
+        <svg ref={chartRef}></svg>
+      </div>
+    </>
+  );
 }
+
+D3Sunburst.propTypes = {
+  simhashData: PropTypes.object,
+  url: PropTypes.string,
+  urlPrefix: PropTypes.string
+};

src/components/sunburst/sunburst-container.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import D3Sunburst from './d3-sunburst.jsx';
 import scaleCluster from 'd3-scale-cluster';
 import '../../css/diffgraph.css';
-import { similarityWithDistance, checkResponse, fetchWithTimeout, getUTCDateFormat }
+import { similarityWithDistance, checkResponse, getUTCDateFormat }
   from '../../js/utils.js';
 import { decodeCompressedJson, decodeUncompressedJson } from './sunburst-container-utils.js';
 import ErrorMessage from '../errors.jsx';
@@ -47,15 +47,25 @@ export default class SunburstContainer extends React.Component {
   constructor (props) {
     super(props);
     this.state = {
+      timestamp: this.props.timestamp,
       isPending: false,
       simhashData: null
     };
     this._clusters = [];
   }
 
+  componentDidMount () {
+    if (this.state.timestamp) {
+      this._fetchTimestampSimhashData();
+    } else {
+      this._validateTimestamp();
+    }
+  }
+
   render () {
     const { url, conf, loader } = this.props;
     const { countCaptures, error, simhashData, timestamp } = this.state;
+    const Loader = () => isNil(loader) ? <Loading/> : loader;
 
     if (error) {
       return (
@@ -80,13 +90,6 @@ export default class SunburstContainer extends React.Component {
         </div>
       );
     }
-    // TODO Must move this outside here.
-    const Loader = () => isNil(loader) ? <Loading/> : loader;
-    if (timestamp) {
-      this._fetchTimestampSimhashData();
-    } else {
-      this._validateTimestamp();
-    }
     return <div className="loading"><Loader/></div>;
   }
 
@@ -100,7 +103,7 @@ export default class SunburstContainer extends React.Component {
     reqUrl.searchParams.append('limit', '1');
     reqUrl.searchParams.append('fl', 'timestamp');
 
-    fetchWithTimeout(reqUrl)
+    fetch(reqUrl)
       .then(checkResponse)
       .then(response => response.json())
       .then(data => {
@@ -124,10 +127,11 @@ export default class SunburstContainer extends React.Component {
   }
 
   _fetchTimestampSimhashData () {
+    console.log('_fetchTimestampSimhashData');
     const { url, conf } = this.props;
     const { timestamp } = this.state;
     const fetchUrl = conf.waybackDiscoverDiff + '/simhash?url=' + encodeURIComponent(url) + '&timestamp=' + timestamp;
-    fetchWithTimeout(fetchUrl).then(checkResponse)
+    fetch(fetchUrl).then(checkResponse)
       .then(response => response.json())
       .then((jsonResponse) => {
         if (jsonResponse.status) {
@@ -141,13 +145,14 @@ export default class SunburstContainer extends React.Component {
   }
 
   _fetchSimhashData (timestampJson) {
+    console.log('_fetchSimhashData');
     const { url, conf } = this.props;
     const { timestamp } = this.state;
     let fetchUrl = conf.waybackDiscoverDiff + '/simhash?url=' + encodeURIComponent(url) + '&year=' + timestamp.substring(0, 4);
     if (conf.compressedSimhash) {
       fetchUrl += '&compress=1';
     }
-    fetchWithTimeout(fetchUrl).then(checkResponse)
+    fetch(fetchUrl).then(checkResponse)
       .then(response => response.json())
       .then((jsonResponse) => {
         this.setState({ isPending: jsonResponse.status === 'PENDING' });