188497360 v3 Update Categorical Point Color (#1580)

* Move point properties reaction from useGraphModel to usePlot

v3/src/components/graph/components/graph.tsx

@@ -30,7 +30,6 @@ import {useGraphModel} from "../hooks/use-graph-model"
 import {setNiceDomain} from "../utilities/graph-utils"
 import { EmptyAxisModel, IAxisModel, isNumericAxisModel } from "../../axis/models/axis-model"
 import {GraphPlace} from "../../axis-graph-shared"
-import {useInstanceIdContext} from "../../../hooks/use-instance-id-context"
 import {MarqueeState} from "../../data-display/models/marquee-state"
 import {DataTip} from "../../data-display/components/data-tip"
 import {MultiLegend} from "../../data-display/components/legend/multi-legend"
@@ -55,7 +54,6 @@ export const Graph = observer(function Graph({graphController, graphRef, pixiPoi
     {plotType} = graphModel,
     pixiPoints = pixiPointsArray[0],
     {startAnimation} = useDataDisplayAnimation(),
-    instanceId = useInstanceIdContext(),
     marqueeState = useMemo<MarqueeState>(() => new MarqueeState(), []),
     dataset = useDataSetContext(),
     layout = useGraphLayoutContext(),
@@ -339,7 +337,7 @@ export const Graph = observer(function Graph({graphController, graphRef, pixiPoi
     return droppables
   }
 
-  useGraphModel({pixiPoints, graphModel, instanceId})
+  useGraphModel({graphModel})
 
   const getTipAttrs = useCallback((plotNum: number) => {
     const dataConfig = graphModel.dataConfiguration

v3/src/components/graph/hooks/use-graph-model.ts

@@ -1,45 +1,23 @@
-import {comparer} from "mobx"
-import {useCallback, useEffect} from "react"
-import {mstReaction} from "../../../utilities/mst-reaction"
+import {useEffect} from "react"
 import {onAnyAction} from "../../../utilities/mst-utils"
 import {useDataSetContext} from "../../../hooks/use-data-set-context"
-import { matchCirclesToData } from "../../data-display/data-display-utils"
 import { dataDisplayGetNumericValue } from "../../data-display/data-display-value-utils"
 import {setNiceDomain} from "../utilities/graph-utils"
-import {PixiPoints} from "../../data-display/pixi/pixi-points"
 import {IGraphContentModel} from "../models/graph-content-model"
 import {IBaseNumericAxisModel} from "../../axis/models/axis-model"
 
 interface IProps {
   graphModel: IGraphContentModel
-  pixiPoints: PixiPoints
-  instanceId: string | undefined
 }
 
 export function useGraphModel(props: IProps) {
-  const {graphModel, instanceId, pixiPoints} = props,
+  const {graphModel} = props,
     dataConfig = graphModel.dataConfiguration,
     yAxisModel = graphModel.getAxis('left'),
     yAttrID = graphModel.getAttributeID('y'),
     dataset = useDataSetContext(),
     startAnimation = graphModel.startAnimation
 
-  const callMatchCirclesToData = useCallback(() => {
-    const pointStrokeColor = graphModel.pointsFusedIntoBars
-      ? graphModel.pointDescription.pointColor
-      : graphModel.pointDescription.pointStrokeColor
-
-    dataConfig && matchCirclesToData({
-      dataConfiguration: dataConfig,
-      pixiPoints,
-      pointRadius: graphModel.getPointRadius(),
-      pointColor: graphModel.pointDescription.pointColor,
-      pointDisplayType: graphModel.pointDisplayType,
-      pointStrokeColor,
-      startAnimation, instanceId
-    })
-  }, [dataConfig, pixiPoints, graphModel, startAnimation, instanceId])
-
   // respond to change in plotType
   useEffect(function installPlotTypeAction() {
     const disposer = onAnyAction(graphModel, action => {
@@ -58,17 +36,4 @@ export function useGraphModel(props: IProps) {
     })
     return () => disposer()
   }, [dataConfig, dataset, startAnimation, graphModel, yAttrID, yAxisModel])
-
-  // respond to point properties change
-  useEffect(function respondToPointVisualChange() {
-    return mstReaction(() => {
-      const { pointColor, pointStrokeColor, pointStrokeSameAsFill, pointSizeMultiplier } =
-        graphModel.pointDescription
-      return [pointColor, pointStrokeColor, pointStrokeSameAsFill, pointSizeMultiplier]
-    },
-      () => callMatchCirclesToData(),
-      {name: "respondToPointVisualChange", equals: comparer.structural}, graphModel
-    )
-  }, [callMatchCirclesToData, graphModel])
-
 }

v3/src/components/graph/hooks/use-plot.ts

@@ -1,5 +1,5 @@
 import {useEffect} from "react"
-import {reaction} from "mobx"
+import {comparer, reaction} from "mobx"
 import {isAlive} from "mobx-state-tree"
 import {onAnyAction} from "../../../utilities/mst-utils"
 import {mstAutorun} from "../../../utilities/mst-autorun"
@@ -285,4 +285,16 @@ export const usePlotResponders = (props: IPlotResponderProps) => {
         !graphModel.dataConfiguration.pointsNeedUpdating && callRefreshPointPositions(false)
       }, {name: "usePlot [callRefreshPointPositions]"}, graphModel)
   }, [graphModel, callRefreshPointPositions])
+
+  // respond to point properties change
+  useEffect(function respondToPointVisualChange() {
+    return mstReaction(() => {
+      const { pointColor, pointStrokeColor, pointStrokeSameAsFill, pointSizeMultiplier } =
+        graphModel.pointDescription
+      return [pointColor, pointStrokeColor, pointStrokeSameAsFill, pointSizeMultiplier]
+    },
+      () => callRefreshPointPositions(false),
+      {name: "respondToPointVisualChange", equals: comparer.structural}, graphModel
+    )
+  }, [callRefreshPointPositions, graphModel])
 }