refactor: further integrate models, update functions, types

concord-consortium · Sep 20, 2024 · 850a240 · 850a240
1 parent 7bd048d
commit 850a240
Show file tree

Hide file tree

Showing 26 changed files with 571 additions and 442 deletions.
diff --git a/src/components/app.tsx b/src/components/app.tsx
@@ -11,10 +11,10 @@ function App() {
   const {connected, selectedDataSet, dataSets, collections, cases, interactiveState,
          updateInteractiveState: _updateInteractiveState, init,
          handleSelectDataSet: _handleSelectDataSet, handleUpdateAttributePosition,
-         handleAddCollection, handleAddAttribute, handleSetCollections, handleSelectSelf,
+         handleAddCollection, handleAddAttribute, handleSelectSelf,
          updateTitle, selectCODAPCases, listenForSelectionChanges,
-         handleCreateCollectionFromAttribute, handleUpdateCollections
-        } = useCodapState();
+         handleCreateCollectionFromAttribute, handleSetCollections,
+         handleSortAttribute, editCaseValue } = useCodapState();
 
   useEffect(() => {
     init();
@@ -102,9 +102,9 @@ function App() {
           updateInteractiveState={updateInteractiveState}
           handleShowComponent={handleShowComponent}
           handleUpdateAttributePosition={handleUpdateAttributePosition}
-          handleSetCollections={handleSetCollections}
           handleCreateCollectionFromAttribute={handleCreateCollectionFromAttribute}
-          handleUpdateCollections={handleUpdateCollections}
+          editCaseValue={editCaseValue}
+          handleSortAttribute={handleSortAttribute}
         />
       );
 
@@ -120,8 +120,8 @@ function App() {
           updateInteractiveState={updateInteractiveState}
           handleAddCollection={handleAddCollection}
           handleAddAttribute={handleAddAttribute}
-          handleSetCollections={handleSetCollections}
           handleShowComponent={handleShowComponent}
+          handleSetCollections={handleSetCollections}
         />
       );
 

diff --git a/src/components/card-view/card-view.tsx b/src/components/card-view/card-view.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useMemo } from "react";
+import { observer } from "mobx-react-lite";
 import { InteractiveState } from "../../hooks/useCodapState";
 import { IDataSet, ICollections, ICaseObjCommon, ICollection } from "../../types";
 import { Menu } from "../menu";
@@ -7,7 +8,7 @@ import { CaseView } from "./case-view";
 import css from "./card-view.scss";
 
 interface ICardViewProps {
-  selectedDataSet: any;
+  selectedDataSet: IDataSet | null;
   dataSets: IDataSet[];
   collections: ICollections;
   interactiveState: InteractiveState
@@ -17,23 +18,30 @@ interface ICardViewProps {
   codapSelectedCase: ICaseObjCommon|undefined;
 }
 
-export const CardView = (props: ICardViewProps) => {
+export const CardView = observer(function CardView(props: ICardViewProps) {
   const {collections, dataSets, selectedDataSet, updateTitle, selectCases, codapSelectedCase,
          handleSelectDataSet} = props;
 
-  const rootCollection = useMemo(() => {
-    return collections.find((c: ICollection) => !c.parent);
-  }, [collections]);
+  // const rootCollection = useMemo(() => {
+  //   return collections.find((c: ICollection) => !c.parent);
+  // }, [collections]);
+  const rootCollection = collections.find((c: ICollection) => !c.parent);
 
-  const attrs = useMemo(() => {
-    const result: Record<string, any> = {};
-    collections.forEach(collection => {
-      collection.attrs.forEach(attr => {
-        result[attr.name] = attr;
-      });
+  // const attrs = useMemo(() => {
+  //   const result: Record<string, any> = {};
+  //   collections.forEach(collection => {
+  //     collection.attrs.forEach(attr => {
+  //       result[attr.name] = attr;
+  //     });
+  //   });
+  //   return result;
+  // }, [collections]);
+  const attrs: Record<string, any> = {};
+  collections.forEach(collection => {
+    collection.attrs.forEach(attr => {
+      attrs[attr.name] = attr;
     });
-    return result;
-  }, [collections]);
+  });
 
   useEffect(() => {
     if (selectedDataSet?.title) {
@@ -88,5 +96,4 @@ export const CardView = (props: ICardViewProps) => {
       />
     </div>
   );
-};
-
+});
diff --git a/src/components/card-view/case-attr-view.tsx b/src/components/card-view/case-attr-view.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { observer } from "mobx-react-lite";
 
 import css from "./card-view.scss";
 
@@ -8,7 +9,7 @@ interface ICaseAttrViewProps {
   attr: any;
 }
 
-export const CaseAttrView = ({name, value, attr}: ICaseAttrViewProps) => {
+export const CaseAttrView = observer(function CaseAttrView({name, value, attr}: ICaseAttrViewProps) {
   const unit = attr.unit ? ` (${attr.unit})` : "";
 
   return (
@@ -17,4 +18,4 @@ export const CaseAttrView = ({name, value, attr}: ICaseAttrViewProps) => {
       <td className={css.value}>{value}</td>
     </tr>
   );
-};
+});
diff --git a/src/components/card-view/case-attrs-view.tsx b/src/components/card-view/case-attrs-view.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { observer } from "mobx-react-lite";
 import { IProcessedCaseObj } from "../../types";
 import { CaseAttrView } from "./case-attr-view";
 
@@ -9,14 +10,14 @@ interface ICaseAttrsViewProps {
   attrs: Record<string, any>;
 }
 
-export const CaseAttrsView = ({caseItem: {values}, attrs}: ICaseAttrsViewProps) => {
-  const keys = Object.keys(values);
+export const CaseAttrsView = observer(function CaseAttrsView({caseItem: {values}, attrs}: ICaseAttrsViewProps) {
+  const keys = [...values.keys()];
 
   return (
     <table className={`${css.caseAttrs} ${css.fadeIn}`}>
       <tbody>
-        {keys.map(key => <CaseAttrView key={key} name={key} value={values[key]} attr={attrs[key]} />)}
+        {keys.map(key => <CaseAttrView key={key} name={String(key)} value={values.get(key)} attr={attrs[key]} />)}
       </tbody>
     </table>
   );
-};
+});
diff --git a/src/components/card-view/case-view.tsx b/src/components/card-view/case-view.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { observer } from "mobx-react-lite";
 import { IProcessedCaseObj } from "../../types";
 import { CaseAttrsView } from "./case-attrs-view";
 import Arrow from "../../assets/arrow.svg";
@@ -22,7 +23,7 @@ interface ICaseViewProps {
   codapSelectedCaseLineage: number[];
 }
 
-export const CaseView = (props: ICaseViewProps) => {
+export const CaseView = observer(function CaseView(props: ICaseViewProps) {
   const {cases, attrs, level, selectCases, codapSelectedCaseLineage} = props;
 
   // default to the first case
@@ -84,4 +85,4 @@ export const CaseView = (props: ICaseViewProps) => {
       }
     </div>
   );
-};
+});