chore: add mobx, wrap model changes with runInAction

package.json

@@ -136,6 +136,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/user-event": "^13.5.0",
     "iframe-phone": "^1.3.1",
+    "mobx": "^6.13.2",
     "mobx-react-lite": "^4.0.7",
     "mobx-state-tree": "^6.0.1",
     "react": "^18.3.1",

src/hooks/useCodapState.tsx

@@ -14,6 +14,7 @@ import {
   updateAttributePosition,
   updateCaseById,
 } from "@concord-consortium/codap-plugin-api";
+import { runInAction } from "mobx";
 import { applySnapshot, unprotect } from "mobx-state-tree";
 import { getCases, getDataSetCollections, sortAttribute } from "../utils/apiHelpers";
 import { ICollection, IDataSet, IProcessedCaseObj } from "../types";
@@ -166,7 +167,7 @@ export const useCodapState = () => {
     if (selectedDataSet) {
       updateCollections();
     } else {
-      collections.clear();
+      runInAction(() => collections.clear());
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedDataSet]);
@@ -295,7 +296,7 @@ export const useCodapState = () => {
     try {
       request = await updateCaseById(selectedDataSetName, caseObj.id, {[attrTitle]: newValue});
       if (request.success) {
-        caseObj.values.set(attrTitle, newValue);
+        runInAction(() => caseObj.values.set(attrTitle, newValue));
       }
     } catch (e) {
       console.error("Case not updated: ", e);