with some mobx sprinkling

package.json

@@ -35,6 +35,8 @@
     "litemol": "^2.4.2",
     "local-storage": "^2.0.0",
     "lodash": "^4.17.21",
+    "mobx": "^6.3.2",
+    "mobx-react-lite": "^3.2.0",
     "particles.js": "^2.0.0",
     "polished": "^2.3.0",
     "protvista-uniprot": "2.6.1",

src/pages/TargetPage/ClassicAssociationsBubbles.js

@@ -2,6 +2,8 @@ import React, { useRef, useState, useTransition } from 'react';
 import { Grid, Typography, useTheme } from '@material-ui/core';
 import { withContentRect } from 'react-measure';
 import * as d3 from 'd3';
+import { observable, action } from 'mobx';
+import { observer } from 'mobx-react-lite';
 
 import AssociationTooltip from './AssociationTooltip';
 import { colorRange } from '../../constants';
@@ -84,11 +86,15 @@ function ClassicAssociationsBubbles({
   measureRef,
   contentRect,
 }) {
-  const [minScore, setMinScore] = useState(0.1);
+  const [s] = useState(() =>
+    observable({
+      minScore: 0.1,
+    })
+  );
   const [isPending, startTransition] = useTransition();
   const svgRef = useRef(null);
   const theme = useTheme();
-  const assocs = associations.filter(assoc => assoc.score >= minScore);
+  const assocs = associations.filter(assoc => assoc.score >= s.minScore);
   const { width: size } = contentRect.bounds;
 
   const hierarchicalData = buildHierarchicalData(assocs, idToDisease);
@@ -107,12 +113,12 @@ function ClassicAssociationsBubbles({
         filenameStem={`${symbol}-associated-diseases-bubbles`}
       >
         <Slider
-          defaultValue={minScore}
-          onChange={(_, val) => {
+          defaultValue={s.minScore}
+          onChange={action((_, val) => {
             startTransition(() => {
-              setMinScore(val);
+              s.minScore = val;
             });
-          }}
+          })}
         />
         <Grid
           item
@@ -213,7 +219,7 @@ function ClassicAssociationsBubbles({
               </svg>
             ) : (
               <Typography>
-                No associations with score greater than or equal to {minScore}
+                No associations with score greater than or equal to {s.minScore}
               </Typography>
             )
           ) : null}
@@ -224,4 +230,4 @@ function ClassicAssociationsBubbles({
   );
 }
 
-export default withContentRect('bounds')(ClassicAssociationsBubbles);
+export default withContentRect('bounds')(observer(ClassicAssociationsBubbles));

yarn.lock

@@ -11363,6 +11363,16 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/mkpath/-/mkpath-1.0.0.tgz#ebb3a977e7af1c683ae6fda12b545a6ba6c5853d"
   integrity sha1-67Opd+evHGg65v2hK1Raa6bFhT0=
 
+mobx-react-lite@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-3.2.0.tgz#331d7365a6b053378dfe9c087315b4e41c5df69f"
+  integrity sha512-q5+UHIqYCOpBoFm/PElDuOhbcatvTllgRp3M1s+Hp5j0Z6XNgDbgqxawJ0ZAUEyKM8X1zs70PCuhAIzX1f4Q/g==
+
+mobx@^6.3.2:
+  version "6.3.2"
+  resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.3.2.tgz#125590961f702a572c139ab69392bea416d2e51b"
+  integrity sha512-xGPM9dIE1qkK9Nrhevp0gzpsmELKU4MFUJRORW/jqxVFIHHWIoQrjDjL8vkwoJYY3C2CeVJqgvl38hgKTalTWg==
+
 mocha@^2.0.1:
   version "2.5.3"
   resolved "https://registry.yarnpkg.com/mocha/-/mocha-2.5.3.tgz#161be5bdeb496771eb9b35745050b622b5aefc58"