Refactor table cells + precisions / attrTypes / visibilities.

src/components/app.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { InteractiveState, useCodapState } from "../hooks/useCodapState";
-import { NestedTable } from "./nested-table";
+import { NestedTable } from "./nested-table-view/nested-table";
 import { Hierarchy } from "./hierarchy-view/hierarchy";
 import { CardView } from "./card-view/card-view";
 import { ICaseObjCommon } from "../types";
@@ -100,7 +100,7 @@ function App() {
         <NestedTable
           selectedDataSet={selectedDataSet}
           dataSets={dataSets}
-          collections={collections}
+          collectionsModel={collectionsModel}
           cases={cases}
           interactiveState={interactiveState}
           handleSelectDataSet={handleSelectDataSet}

src/components/add-attribute-button.tsx → src/components/nested-table-view/common/add-attribute-button.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { ICollection, ICollections } from "../types";
+import { ICollection, ICollections } from "../../../types";
 
-import AddIcon from "../assets/add-icon.svg";
+import AddIcon from "../../../assets/add-icon.svg";
 
 import css from "./add-attribute-button.scss";
 

src/components/draggable-table-tags.tsx → src/components/nested-table-view/common/draggable-table-tags.tsx

@@ -2,16 +2,17 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { observer } from "mobx-react-lite";
 import { getAttribute, IResult } from "@concord-consortium/codap-plugin-api";
-import { useDraggableTableContext, Side } from "../hooks/useDraggableTable";
-import { useTableTopScrollTopContext } from "../hooks/useTableScrollTop";
-import { getCollectionById } from "../utils/apiHelpers";
-import { ICollection, ICollections, IProcessedCaseObj, PropsWithChildren } from "../types";
+import { useDraggableTableContext, Side } from "../../../hooks/useDraggableTable";
+import { useTableTopScrollTopContext } from "../../../hooks/useTableScrollTop";
+import { getCollectionById } from "../../../utils/apiHelpers";
+import { getDisplayValue } from "../../../utils/utils";
+import { ICollection, ICollections, IProcessedCaseObj, PropsWithChildren } from "../../../types";
 import { EditableTableCell } from "./editable-table-cell";
 import { AddAttributeButton } from "./add-attribute-button";
 import { EditableTableHeader } from "./editable-table-header";
 
-import AddIcon from "../assets/plus-level-1.svg";
-import DropdownIcon from "../assets/dropdown-arrow-icon.svg";
+import AddIcon from "../../../assets/plus-level-1.svg";
+import DropdownIcon from "../../../assets/dropdown-arrow-icon.svg";
 
 import css from "./tables.scss";
 
@@ -192,15 +193,18 @@ interface DraggagleTableDataProps {
   isParent?: boolean;
   parentLevel?: number;
   selectedDataSetName: string;
+  precisions: Record<string, number>;
+  attrTypes: Record<string, string | undefined | null>;
   editCaseValue: (newValue: string, caseObj: IProcessedCaseObj, attrTitle: string) => Promise<IResult | undefined>;
 }
 
 export const DraggagleTableData: React.FC<PropsWithChildren<DraggagleTableDataProps>> =
   observer(function DraggagleTableData(props) {
-    const {collectionId, attrTitle, children, caseObj, isParent, parentLevel=0, editCaseValue} = props;
+    const {collectionId, attrTitle, attrTypes, caseObj, isParent, parentLevel=0, precisions, editCaseValue} = props;
     const {dragOverId, dragSide} = useDraggableTableContext();
     const {style} = getIdAndStyle(collectionId, attrTitle, dragOverId, dragSide);
     const {tableScrollTop, scrollY} = useTableTopScrollTopContext();
+    const cellValue = caseObj.values.get(attrTitle);
 
     const cellRef = useRef<HTMLTableCellElement | null>(null);
 
@@ -242,6 +246,8 @@ export const DraggagleTableData: React.FC<PropsWithChildren<DraggagleTableDataPr
           attrTitle={attrTitle}
           case={caseObj}
           editCaseValue={editCaseValue}
+          precisions={precisions}
+          attrTypes={attrTypes}
         />
       );
     };
@@ -255,7 +261,9 @@ export const DraggagleTableData: React.FC<PropsWithChildren<DraggagleTableDataPr
       <td style={style} className={`draggable-table-data ${isParent ? css.parentData : ""}`} ref={cellRef}>
         {isParent
           ? <>
-              <span style={{opacity: 0}}>{children}</span>
+              <span style={{opacity: 0}}>
+                {getDisplayValue(cellValue, attrTitle, attrTypes, precisions)}
+              </span>
               <div style={textStyle} className={css.cellTextValue}>
                 <EditableCell />
               </div>

src/components/editable-table-cell.tsx → src/components/nested-table-view/common/editable-table-cell.tsx

@@ -2,19 +2,23 @@ import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Editable, EditablePreview, EditableInput } from "@chakra-ui/react";
 import { IResult } from "@concord-consortium/codap-plugin-api";
-import { IProcessedCaseObj } from "../types";
+import { IProcessedCaseObj } from "../../../types";
 
 import css from "./editable-table-cell.scss";
+import { getDisplayValue } from "../../../utils/utils";
 
 interface IProps {
   attrTitle: string;
   case: IProcessedCaseObj;
   editCaseValue: (newValue: string, cCase: IProcessedCaseObj, attrTitle: string) => Promise<IResult | undefined>;
+  precisions: Record<string, number>;
+  attrTypes: Record<string, string | undefined | null>;
 }
 
 export const EditableTableCell = observer(function EditableTableCell(props: IProps) {
-  const { attrTitle, case: cCase, editCaseValue } = props;
-  const displayValue = cCase.values.get(attrTitle);
+  const { attrTitle, case: cCase, editCaseValue, attrTypes, precisions } = props;
+  const cellValue = cCase.values.get(attrTitle);
+  const displayValue = getDisplayValue(cellValue, attrTitle, attrTypes, precisions);
   const [editingValue, setEditingValue] = useState(displayValue);
   const [isEditing, setIsEditing] = useState(false);
 

src/components/nested-table-view/common/table-cells.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { IProcessedCaseObj } from "../../../types";
+import { DraggagleTableData } from "./draggable-table-tags";
+import { IResult } from "@concord-consortium/codap-plugin-api";
+
+interface IProps {
+  collectionId: number;
+  rowKey: string;
+  cCase: IProcessedCaseObj;
+  precisions: Record<string, number>;
+  attrTypes: Record<string, string | undefined | null>;
+  attrVisibilities: Record<string, boolean>;
+  isParent?: boolean;
+  parentLevel?: number;
+  selectedDataSetName: string;
+  editCaseValue: (newValue: string, caseObj: IProcessedCaseObj, attrTitle: string) => Promise<IResult | undefined>;
+}
+
+export const TableCells = (props: IProps) => {
+  const { collectionId, rowKey, cCase, precisions, attrTypes, attrVisibilities, isParent, parentLevel,
+    selectedDataSetName, editCaseValue } = props;
+  if (!selectedDataSetName) return null;
+  const aCase = cCase.values;
+  return (
+    <>
+      {[...aCase.keys()].map((key, index) => {
+        const cellValue = aCase.get(key);
+        const isHidden = attrVisibilities[key];
+        if (key === "id" || (typeof cellValue !== "string" && typeof cellValue !== "number") || isHidden ) {
+          return null;
+        }
+
+        return (
+          <DraggagleTableData
+            collectionId={collectionId}
+            attrTitle={String(key)}
+            key={`${rowKey}-${cellValue}-${index}}`}
+            isParent={isParent}
+            caseObj={cCase}
+            precisions={precisions}
+            attrTypes={attrTypes}
+            parentLevel={parentLevel}
+            selectedDataSetName={selectedDataSetName}
+            editCaseValue={editCaseValue}
+          />
+        );
+      })}
+    </>
+  );
+};

src/components/table-headers.tsx → src/components/nested-table-view/common/table-headers.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { DraggableTableHeader } from "./draggable-table-tags";
-import { IDataSet, Values } from "../types";
-import { isNewAttribute } from "../utils/utils";
+import { IDataSet, Values } from "../../../types";
+import { isNewAttribute } from "../../../utils/utils";
 
 interface MapHeadersFromValuesProps {
   collectionId: number;

src/components/tables.scss → src/components/nested-table-view/common/tables.scss

@@ -265,10 +265,9 @@ table.draggableTableContainer {
   position: relative;
   .cellTextValue{
     position: absolute;
-    width: calc(100% - 8px);
     display: flex;
     flex-wrap: wrap;
-    top: 0;
+    width: calc(100% - 8px);
   }
 }
 

src/components/flat-table.tsx → src/components/nested-table-view/flat/flat-table.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
 import { IResult } from "@concord-consortium/codap-plugin-api";
-import { IProcessedCaseObj, ITableProps } from "../types";
-import { DraggableTableContainer, DraggableTableHeader } from "./draggable-table-tags";
-import { isNewAttribute, getAttrPrecisions, getAttrTypes, getAttrVisibility } from "../utils/utils";
-import { TableCell } from "./table-cell";
-import { AddAttributeButton } from "./add-attribute-button";
+import { IProcessedCaseObj, ITableProps } from "../../../types";
+import { DraggableTableContainer, DraggableTableHeader } from "../common/draggable-table-tags";
+import { isNewAttribute } from "../../../utils/utils";
+import { TableCells } from "../common/table-cells";
+import { AddAttributeButton } from "../common/add-attribute-button";
 
-import css from "./tables.scss";
+import css from "../common/tables.scss";
 
 interface IFlatProps extends ITableProps {
   cases: IProcessedCaseObj[]
@@ -16,15 +16,13 @@ interface IFlatProps extends ITableProps {
 }
 
 export const FlatTable = observer(function FlatTable(props: IFlatProps) {
-  const {selectedDataSet, collections, collectionClasses, handleSortAttribute, showHeaders,
+  const {selectedDataSet, collectionsModel, collectionClasses, handleSortAttribute, showHeaders,
          editCaseValue, renameAttribute, handleAddAttribute } = props;
-  const collection = collections[0];
+  const { collections, attrVisibilities, attrPrecisions, attrTypes } = collectionsModel;
+  const collection = collectionsModel.collections[0];
   const {className} = collectionClasses[0];
-  const attrVisibilities = getAttrVisibility(collections);
   const collectionAttrsToUse = collection.attrs.filter(attr => !attrVisibilities[attr.title]);
   const titles = collectionAttrsToUse.map(attr => attr.title);
-  const precisions = getAttrPrecisions(collections);
-  const attrTypes = getAttrTypes(collections);
 
   return (
     <DraggableTableContainer collectionId="root">
@@ -70,25 +68,16 @@ export const FlatTable = observer(function FlatTable(props: IFlatProps) {
             });
             return (
               <tr key={`${index}-${c.id}`}>
-                {caseValuesKeys.map((key, i) => {
-                  return (
-                    <TableCell
-                      key={`${i}-${c.id}-${key}`}
-                      collectionId={collection.id}
-                      rowKey={`${index}-${c.id}`}
-                      index={i}
-                      caseObj={c}
-                      attributeName={String(key)}
-                      cellValue={c.values.get(key)}
-                      precision={precisions[key]}
-                      attrType={attrTypes[key]}
-                      isHidden={attrVisibilities[key]}
-                      isParent={false}
-                      selectedDataSet={selectedDataSet.name}
-                      editCaseValue={editCaseValue}
-                    />
-                  );
-                })}
+                <TableCells
+                  collectionId={collection.id}
+                  rowKey={`row-${index}`}
+                  cCase={c}
+                  precisions={attrPrecisions}
+                  attrTypes={attrTypes}
+                  attrVisibilities={attrVisibilities}
+                  selectedDataSetName={selectedDataSet.name}
+                  editCaseValue={editCaseValue}
+                />
               </tr>
             );
           })}

src/components/landscape-view.tsx → src/components/nested-table-view/landscape/landscape-table.tsx

@@ -1,15 +1,16 @@
 import React from "react";
 import { observer } from "mobx-react-lite";
-import { ICollection, IProcessedCaseObj, ITableProps } from "../types";
-import { DraggableTableHeader } from "./draggable-table-tags";
-import { getAttrPrecisions, getAttrTypes, getAttrVisibility } from "../utils/utils";
-import { TableHeaders } from "./table-headers";
+import { ICollection, IProcessedCaseObj, ITableProps } from "../../../types";
+import { DraggableTableHeader } from "../common/draggable-table-tags";
+import { TableHeaders } from "../common/table-headers";
+import { TableCells } from "../common/table-cells";
 
-import css from "./tables.scss";
+import css from "../common/tables.scss";
 
-export const LandscapeView = observer(function LandscapeView(props: ITableProps) {
-  const {mapCellsFromValues, showHeaders, collectionClasses, getClassName, selectedDataSet,
-         collections, getValueLength, paddingStyle, handleSortAttribute, renameAttribute} = props;
+export const LandscapeTable = observer(function LandscapeView(props: ITableProps) {
+  const { showHeaders, collectionClasses, getClassName, selectedDataSet, collectionsModel, getValueLength,
+    paddingStyle, handleSortAttribute, renameAttribute, editCaseValue } = props;
+  const { collections, attrPrecisions, attrTypes, attrVisibilities } = collectionsModel;
 
   const renderNestedTable = (parentColl: ICollection) => {
     const headers = parentColl.cases.map((caseObj) => caseObj.values);
@@ -20,9 +21,6 @@ export const LandscapeView = observer(function LandscapeView(props: ITableProps)
     const parentCase = parentColl.cases[0];
     const valueCount = getValueLength(firstRowValues);
     const className = getClassName(parentColl.cases[0]);
-    const precisions = getAttrPrecisions(collections);
-    const attrTypes = getAttrTypes(collections);
-    const attrVisibilities = getAttrVisibility(collections);
     return (
       <>
         {showHeaders &&
@@ -38,19 +36,29 @@ export const LandscapeView = observer(function LandscapeView(props: ITableProps)
                 rowKey={`first-row`}
                 values={values}
                 attrVisibilities={attrVisibilities}
-                selectedDataSet={props.selectedDataSet}
+                selectedDataSet={selectedDataSet}
                 handleSortAttribute={handleSortAttribute}
                 renameAttribute={renameAttribute}
               />
             );
           })}
         </tr>
         <tr className={css[className]}>
-          {firstRowValues.map(values =>
-            mapCellsFromValues(
-              parentColl.id, "first-row", parentCase, precisions, attrTypes, attrVisibilities
-            ))
-          }
+          {firstRowValues.map((values, idx) => {
+            return (
+              <TableCells
+                key={`row-${parentColl.id}-${idx}`}
+                collectionId={parentColl.id}
+                rowKey={`first-row`}
+                cCase={parentCase}
+                precisions={attrPrecisions}
+                attrTypes={attrTypes}
+                attrVisibilities={attrVisibilities}
+                selectedDataSetName={selectedDataSet.name}
+                editCaseValue={editCaseValue}
+              />
+              );
+            })}
         </tr>
         <tr className={css[className]}>
           {parentColl.cases.map((caseObj) => {
@@ -74,9 +82,6 @@ export const LandscapeView = observer(function LandscapeView(props: ITableProps)
   const renderColFromCaseObj = (collection: ICollection, caseObj: IProcessedCaseObj, index?: number) => {
     const {children, values} = caseObj;
     const isFirstIndex = index === 0;
-    const precisions = getAttrPrecisions(collections);
-    const attrTypes = getAttrTypes(collections);
-    const attrVisibilities = getAttrVisibility(collections);
 
     if (!children.length) {
       const className = getClassName(caseObj);
@@ -94,17 +99,23 @@ export const LandscapeView = observer(function LandscapeView(props: ITableProps)
                 rowKey={`first-row-${index}`}
                 values={values}
                 attrVisibilities={attrVisibilities}
-                selectedDataSet={props.selectedDataSet}
+                selectedDataSet={selectedDataSet}
                 handleSortAttribute={handleSortAttribute}
                 renameAttribute={renameAttribute}
               />
             </tr>
           }
           <tr>
-            {mapCellsFromValues(
-                collection.id, `row-${index}`, caseObj, precisions, attrTypes, attrVisibilities
-              )
-            }
+            <TableCells
+              collectionId={collection.id}
+              rowKey={`row-${index}`}
+              cCase={caseObj}
+              precisions={attrPrecisions}
+              attrTypes={attrTypes}
+              attrVisibilities={attrVisibilities}
+              selectedDataSetName={selectedDataSet.name}
+              editCaseValue={editCaseValue}
+            />
           </tr>
         </>
       );