backport fixes from complexdatacollective/Fresco#77

Author: jthrilly

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": false
+}

package-lock.json

@@ -20,6 +20,7 @@
     "build:ci": "cross-env NC_TARGET_PLATFORM=electron REACT_APP_NO_FULLSCREEN=true REACT_APP_NO_PERSIST=true node scripts/build.js",
     "build:ios": "cross-env NC_TARGET_PLATFORM=ios node scripts/build.js && cordova prepare ios",
     "lint": "eslint src && eslint public",
+    "lint:fix": "eslint src --fix && eslint public --fix",
     "sass-lint": "stylelint '**/*.scss'",
     "test": "node scripts/test.js",
     "test:integration": "cross-env TEST_ENV=development jest --config=integration-tests/jest.config.js --runInBand",

package.json

@@ -1,85 +1,107 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { entityAttributesProperty } from '@codaco/shared-consts';
 import { findIndex } from 'lodash';
-import getAbsoluteBoundingRect from '../../utils/getAbsoluteBoundingRect';
-import { ConvexHull } from './ConvexHull';
+import PropTypes from 'prop-types';
+import React, {
+  useEffect, useMemo, useRef, useState,
+} from 'react';
+import { useSelector } from 'react-redux';
+import { getCategoricalOptions } from '../../selectors/network';
+import ConvexHull from './ConvexHull';
+import { getStageForCurrentSession } from '../../selectors/session';
+
+const useResizeObserver = (callback, elementRef, options) => {
+  useEffect(() => {
+    if (!elementRef.current) return;
+
+    const resizeObserver = new ResizeObserver(callback);
+    resizeObserver.observe(elementRef.current, options);
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [callback, elementRef, options]);
+};
 
 const getColor = (group, options) => {
   const colorIndex = findIndex(options, ['value', group]) + 1 || 1;
   const color = `cat-color-seq-${colorIndex}`;
   return color;
 };
 
-class ConvexHulls extends Component {
-  constructor() {
-    super();
+const getNodesByGroup = (nodes, categoricalVariable) => {
+  const groupedList = {};
 
-    this.hullComponent = React.createRef();
-    this.state = {
-      size: { width: 0, height: 0 },
-    };
-  }
-
-  componentDidMount() {
-    this.updateSize();
-  }
-
-  shouldComponentUpdate() {
-    this.updateSize();
-    return true;
-  }
-
-  updateSize = () => {
-    const { size } = this.state;
-    if (this.hullComponent.current && (
-      size.width !== getAbsoluteBoundingRect(this.hullComponent.current).width
-      || size.height !== getAbsoluteBoundingRect(this.hullComponent.current).height)) {
-      this.setState({
-        size: {
-          width: getAbsoluteBoundingRect(this.hullComponent.current).width,
-          height: getAbsoluteBoundingRect(this.hullComponent.current).height,
-        },
-      });
+  nodes.forEach((node) => {
+    const categoricalValues = node[entityAttributesProperty][categoricalVariable];
+
+    // Filter out nodes with no value for this variable.
+    if (!categoricalValues) {
+      return;
     }
-  }
-
-  render() {
-    const {
-      nodesByGroup,
-      layoutVariable,
-      categoricalOptions,
-    } = this.props;
-    const {
-      size,
-    } = this.state;
-
-    return (
-      <div style={{ width: '100%', height: '100%' }} ref={this.hullComponent}>
-        {Object.values(nodesByGroup).map(({ group, nodes }, index) => {
-          const color = getColor(group, categoricalOptions);
-          return (
-            <ConvexHull
-              windowDimensions={size}
-              color={color}
-              nodePoints={nodes}
-              key={index}
-              layoutVariable={layoutVariable}
-            />
-          );
-        })}
-      </div>
-    );
-  }
-}
 
-ConvexHulls.propTypes = {
-  layoutVariable: PropTypes.string.isRequired,
-  nodesByGroup: PropTypes.object.isRequired,
-  categoricalOptions: PropTypes.array,
+    categoricalValues.forEach((categoricalValue) => {
+      if (groupedList[categoricalValue]) {
+        groupedList[categoricalValue].nodes.push(node);
+      } else {
+        groupedList[categoricalValue] = { group: categoricalValue, nodes: [] };
+        groupedList[categoricalValue].nodes.push(node);
+      }
+    });
+  });
+
+  return groupedList;
+};
+
+const ConvexHulls = ({ nodes, groupVariable, layoutVariable }) => {
+  const hullRef = useRef(null);
+  const [size, setSize] = useState({ width: 0, height: 0 });
+
+  const nodesByGroup = useMemo(
+    () => getNodesByGroup(nodes, groupVariable),
+    [nodes, groupVariable],
+  );
+  const categoricalOptions = useSelector((state) => getCategoricalOptions(state, {
+    stage: getStageForCurrentSession(state),
+    variableId: groupVariable,
+  }));
+
+  useResizeObserver(hullRef, () => {
+    setSize({
+      width: hullRef.contentRect.width,
+      height: hullRef.contentRect.height,
+    });
+  });
+
+  useEffect(() => {
+    setSize({
+      width: hullRef.current.clientWidth,
+      height: hullRef.current.clientHeight,
+    });
+  }, [hullRef]);
+
+  return (
+    <div style={{ width: '100%', height: '100%' }} ref={hullRef}>
+      {Object.values(nodesByGroup).map(({ group, nodes: groupNodes }, index) => {
+        const color = getColor(group, categoricalOptions);
+        return (
+          <ConvexHull
+            windowDimensions={size}
+            color={color}
+            nodePoints={groupNodes}
+            key={index}
+            layoutVariable={layoutVariable}
+          />
+        );
+      })}
+    </div>
+  );
 };
 
-ConvexHulls.defaultProps = {
-  categoricalOptions: [],
+ConvexHulls.propTypes = {
+  layoutVariable: PropTypes.string.isRequired,
+  nodes: PropTypes.array.isRequired,
+  groupVariable: PropTypes.string.isRequired,
 };
 
 export default ConvexHulls;

src/components/Canvas/ConvexHulls.js

@@ -2,6 +2,5 @@
 
 export { default as PresetSwitcherKey } from './PresetSwitcherKey';
 export { default as Annotations } from './Annotations';
-export { default as ConvexHulls } from './ConvexHulls';
 export { default as Accordion } from './Accordion';
 export { default as PresetSwitcher } from './PresetSwitcher';