chore: update mobx-state-tree to v6.0.0 (#1281)

v3/package.json

@@ -178,7 +178,7 @@
   "dependencies": {
     "@chakra-ui/react": "^2.8.2",
     "@concord-consortium/cloud-file-manager": "^2.0.0-pre.3",
-    "@concord-consortium/mobx-state-tree": "^5.4.0-cc.1",
+    "@concord-consortium/mobx-state-tree": "^6.0.0-cc.1",
     "@dnd-kit/core": "^6.1.0",
     "@floating-ui/react": "^0.26.9",
     "clsx": "^2.1.0",

v3/src/components/case-card/nav-buttons.v2.test.tsx

@@ -7,6 +7,7 @@ import "./nav-buttons.v2"
 const { NavButtons } = DG.React.Components as any
 
 describe("Case card NavButtons", () => {
+  jest.setTimeout(10000)
   it("renders", async () => {
     const user = userEvent.setup()
     const collectionClient = {

v3/src/components/graph/adornments/adornments-base-store.ts

@@ -2,7 +2,9 @@ import {Instance, types} from "mobx-state-tree"
 import {getAdornmentComponentInfo} from "./adornment-component-info"
 import {AdornmentModelUnion, kDefaultFontSize} from "./adornment-types"
 import {IAdornmentModel, IUpdateCategoriesOptions} from "./adornment-models"
+import {IMovableValueAdornmentModel} from "./movable-value/movable-value-adornment-model"
 import {kMovableValueType} from "./movable-value/movable-value-adornment-types"
+import {IUnivariateMeasureAdornmentModel} from "./univariate-measures/univariate-measure-adornment-model"
 import {ScaleNumericBaseType} from "../../axis/axis-types"
 
 /**
@@ -17,6 +19,18 @@ export const AdornmentsBaseStore = types.model("AdornmentsBaseStore", {
   showMeasureLabels: false,
   showSquaresOfResiduals: false
 })
+.views(self => ({
+  isShowingAdornment(type: string) {
+    return !!self.adornments.find(a => a.type === type)?.isVisible
+  },
+  get activeUnivariateMeasures() {
+    return self.adornments.filter(adornment => adornment.isUnivariateMeasure && adornment.isVisible) as
+            IUnivariateMeasureAdornmentModel[]
+  },
+  findAdornmentOfType<T extends IAdornmentModel = IAdornmentModel>(type: string): T | undefined {
+    return self.adornments.find(adornment => adornment.type === type) as T
+  }
+}))
 .actions(self => ({
   setDefaultFontSize(fontSize: number) {
     self.defaultFontSize = fontSize
@@ -47,21 +61,19 @@ export const AdornmentsBaseStore = types.model("AdornmentsBaseStore", {
   }
 }))
 .views(self => ({
-  isShowingAdornment(type: string) {
-    return !!self.adornments.find(a => a.type === type)?.isVisible
-  },
   get subPlotsHaveRegions() {
-    const movableValueAdornment = self.adornments.find(a => a.type === kMovableValueType)
+    const movableValueAdornment = self.findAdornmentOfType<IMovableValueAdornmentModel>(kMovableValueType)
     const movableValues = movableValueAdornment?.values
-    return movableValues?.size > 0
+    return !!movableValues?.size
   },
   subPlotRegionBoundaries(key: string, scale: ScaleNumericBaseType) {
     // When Movable Values are present, they define regions within a sub-plot which may affect the behavior of other
     // adornments. The Count/Percent adornment, for example, will show a count/percent per region. This view can be
     // used by those adornments to determine the sub-region boundaries. The boundaries are simply the numeric values
     // of each movable value in addition to the primary axis' min and max values.
     const [axisMin, axisMax] = scale.domain() as [number, number]
-    const movableValues = self.adornments.find(a => a.type === kMovableValueType)?.valuesForKey(key) ?? []
+    const movableValueAdornment = self.findAdornmentOfType<IMovableValueAdornmentModel>(kMovableValueType)
+    const movableValues = movableValueAdornment?.valuesForKey(key) ?? []
     return [axisMin, ...movableValues, axisMax].sort((a: number, b: number) => a - b)
   },
   get activeBannerCount() {
@@ -71,14 +83,6 @@ export const AdornmentsBaseStore = types.model("AdornmentsBaseStore", {
     }).length
   }
 }))
-.views(self => ({
-  get activeUnivariateMeasures() {
-    return self.adornments.filter(adornment => adornment.isUnivariateMeasure && adornment.isVisible)
-  },
-  findAdornmentOfType<T extends IAdornmentModel = IAdornmentModel>(type: string): T | undefined {
-    return self.adornments.find(adornment => adornment.type === type) as T
-  }
-}))
 .actions(self => ({
   addAdornment(adornment: IAdornmentModel, options: IUpdateCategoriesOptions) {
     self.hideAdornment(adornment.type)

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

@@ -17,6 +17,8 @@ import {usePixiDragHandlers, usePlotResponders} from "../hooks/use-plot"
 import {useDataSetContext} from "../../../hooks/use-data-set-context"
 import {useInstanceIdContext} from "../../../hooks/use-instance-id-context"
 import {ICase} from "../../../models/data/data-set-types"
+import { ILSRLAdornmentModel } from "../adornments/lsrl/lsrl-adornment-model"
+import { IMovableLineAdornmentModel } from "../adornments/movable-line/movable-line-adornment-model"
 import {ISquareOfResidual} from "../adornments/shared-adornment-types"
 import { scatterPlotFuncs } from "./scatter-plot-utils"
 import { IPixiPointMetadata } from "../../data-display/pixi/pixi-points"
@@ -50,8 +52,8 @@ export const ScatterDots = observer(function ScatterDots(props: PlotProps) {
   // LSRL adornments, so we need to get information from those adornments as well.
   const adornmentsStore = graphModel.adornmentsStore
   const showSquares = adornmentsStore.showSquaresOfResiduals
-  const movableLine = adornmentsStore.adornments.find(a => a.type === "Movable Line")
-  const lsrl = adornmentsStore.adornments.find(a => a.type === "LSRL")
+  const movableLine = adornmentsStore.findAdornmentOfType<IMovableLineAdornmentModel>("Movable Line")
+  const lsrl = adornmentsStore.findAdornmentOfType<ILSRLAdornmentModel>("LSRL")
   const movableLineSquaresRef = useRef<SVGGElement>(null)
   const lsrlSquaresRef = useRef<SVGGElement>(null)
 

v3/src/models/data/category-set.test.ts

@@ -1,4 +1,4 @@
-import { applySnapshot, getEnv, getSnapshot, types } from "mobx-state-tree"
+import { applySnapshot, getSnapshot, types } from "mobx-state-tree"
 import { kellyColors } from "../../utilities/color-utils"
 import { Attribute, IAttribute } from "./attribute"
 import { CategorySet, ICategorySet, createProvisionalCategorySet, getProvisionalDataSet } from "./category-set"
@@ -47,7 +47,6 @@ describe("CategorySet", () => {
 
     // getProvisionalDataSet returns undefined for simple attributes and null
     const c = Attribute.create({ id: "cId", name: "c" }, undefined)
-    expect(getEnv(c)).toEqual({})
     expect(getProvisionalDataSet(c)).toBeUndefined()
     expect(getProvisionalDataSet(null)).toBeUndefined()
   })

v3/src/models/data/category-set.ts

@@ -1,6 +1,6 @@
 import { observable, runInAction } from "mobx"
 import {
-  addDisposer, getEnv, IAnyStateTreeNode, Instance, isValidReference, resolveIdentifier, types
+  addDisposer, getEnv, hasEnv, IAnyStateTreeNode, Instance, isValidReference, resolveIdentifier, types
 } from "mobx-state-tree"
 import { kellyColors } from "../../utilities/color-utils"
 import { onAnyAction } from "../../utilities/mst-utils"
@@ -21,7 +21,7 @@ interface IProvisionalEnvironment {
 }
 
 export function getProvisionalDataSet(node: IAnyStateTreeNode | null) {
-  const env = node ? getEnv<IProvisionalEnvironment>(node) : {}
+  const env = node && hasEnv(node) ? getEnv<IProvisionalEnvironment>(node) : {}
   return env.provisionalDataSet
 }
 

v3/src/models/data/data-set.ts

@@ -43,7 +43,7 @@
  */
 
 import { observable, reaction, runInAction } from "mobx"
-import { addDisposer, addMiddleware, getEnv, Instance, isAlive, SnapshotIn, types } from "mobx-state-tree"
+import { addDisposer, addMiddleware, getEnv, hasEnv, Instance, isAlive, SnapshotIn, types } from "mobx-state-tree"
 import pluralize from "pluralize"
 import { Attribute, IAttribute, IAttributeSnapshot } from "./attribute"
 import {
@@ -811,8 +811,8 @@ export const DataSet = V2Model.named("DataSet").props({
      */
     actions: {
       afterCreate() {
-        const context: IEnvContext = getEnv(self),
-              { srcDataSet, } = context
+        const context: IEnvContext | Record<string, never> = hasEnv(self) ? getEnv(self) : {},
+              { srcDataSet } = context
 
         // build attrNameMap
         self.attributesMap.forEach(attr => {

v3/src/models/tiles/tile-environment.ts

@@ -1,5 +1,5 @@
 import iframePhone from "iframe-phone"
-import { getEnv, IAnyStateTreeNode } from "mobx-state-tree"
+import { getEnv, hasEnv, IAnyStateTreeNode } from "mobx-state-tree"
 import { DIMessage } from "../../data-interactive/iframe-phone-types"
 // There's nothing wrong in explicit ISharedModelManager interface, but probably dependency cycle could have been also
 // avoided using `import type { SharedModelManager } from ...`.
@@ -14,7 +14,7 @@ export interface ITileEnvironment {
 }
 
 export function getTileEnvironment(node?: IAnyStateTreeNode) {
-  return node ? getEnv<ITileEnvironment | undefined>(node) : undefined
+  return node && hasEnv(node) ? getEnv<ITileEnvironment | undefined>(node) : undefined
 }
 
 export function getSharedModelManager(node?: IAnyStateTreeNode) {