Fix styling issues, lint issues, + remove unnecessary components

src/components/CodapContext.tsx

@@ -1,48 +1,23 @@
 import React, { createContext, ReactNode, useContext, useEffect } from "react";
-import { ICollection, ICollections, IDataSet } from "../types";
-import { InteractiveState, useCodapState } from "../hooks/useCodapState";
-
-export type CodapState = {
-  init: () => Promise<void>,
-  handleSelectSelf: () => Promise<void>,
-  dataSets: IDataSet[],
-  selectedDataSet: any,
-  collections: ICollections,
-  handleSetCollections: (collections: ICollections) => void,
-  handleSelectDataSet: (name: string) => void,
-  getCollectionNameFromId: (id: number) => string | undefined,
-  handleUpdateInteractiveState: (update: Partial<InteractiveState>) => void,
-  interactiveState: InteractiveState,
-  cases: any[],
-  connected: boolean,
-  handleUpdateAttributePosition: (coll: ICollection, attrName: string, position: number) => Promise<void>,
-  handleAddCollection: (newCollectionName: string) => Promise<void>,
-  handleSortAttribute: (context: string, attrId: number, isDescending: boolean) => Promise<void>,
-  handleAddAttribute: (collection: ICollection, attrName: string) => Promise<void>,
-  updateTitle: (title: string) => Promise<void>,
-  selectCODAPCases: (caseIds: number[]) => Promise<void>,
-  listenForSelectionChanges: (callback: (notification: any) => void) => void,
-  handleCreateCollectionFromAttribute: (collection: ICollection, attr: any, parent: number|string) => Promise<void>,
-  handleUpdateCollections: () => Promise<void>
-};
+import { CodapState } from "../types";
+import { useCodapState } from "../hooks/useCodapState";
 
 const CodapContext = createContext({} as CodapState);
 
-
 export const useCodapContext = () => {
   return useContext(CodapContext);
 };
 
 export const CodapProvider = ({ children }: { children: ReactNode }) => {
-  const codapState = useCodapState(); // Now useCodapState is called here
+  const codapState = useCodapState();
 
   useEffect(() => {
     codapState.init();
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   if (!codapState.connected) {
-    return <div>Loading...</div>;  // Handle loading state in the provider itself
+    return <div>Loading...</div>;
   }
 
   return (

src/components/app.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { InteractiveState } from "../hooks/useCodapState";
+import { useCodapContext } from "./CodapContext";
+import { InteractiveState } from "../types";
 import { NestedTable } from "./nested-table";
 import { Hierarchy } from "./hierarchy-view/hierarchy";
 import { CardView } from "./card-view/card-view";
-import { useCodapContext } from "./CodapContext";
 
 import css from "./app.scss";
 

src/components/card-view/card-view.tsx

@@ -12,7 +12,7 @@ interface ICardViewProps {
 
 export const CardView = (props: ICardViewProps) => {
   const { onSelectDataSet } = props;
-  const { dataSets, selectedDataSet, collections, selectCODAPCases, listenForSelectionChanges,
+  const { selectedDataSet, collections, selectCODAPCases, listenForSelectionChanges,
     updateTitle } = useCodapState();
   const listeningToDataSetId = useRef(0);
   const [codapSelectedCase, setCodapSelectedCase] = useState<ICaseObjCommon|undefined>(undefined);

src/components/flat-table.tsx

@@ -68,8 +68,7 @@ export const FlatTable = (props: ITableProps) => {
                       isHidden={attrVisibilities[key]}
                       isParent={false}
                     />
-                  )
-
+                  );
                 })}
               </tr>
             );

src/components/hierarchy-view/hierarchy.tsx

@@ -17,7 +17,7 @@ interface IProps {
 
 export const Hierarchy = (props: IProps) => {
   const { onSelectDataSet } = props;
-  const { dataSets, selectedDataSet, collections, handleSetCollections, handleAddCollection,
+  const { selectedDataSet, collections, handleSetCollections, handleAddCollection,
     handleAddAttribute, handleUpdateAttributePosition, handleSelectSelf } = useCodapState();
 
   const {activeAttr, handleDragStart, handleDragOver, handleDragEnd} = useDragging({collections,

src/components/landscape-view.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ICollection, INestedTableProps, IProcessedCaseObj, ITableProps, Values } from "../types";
+import { ICollection, INestedTableProps, IProcessedCaseObj, Values } from "../types";
 import { DraggagleTableHeader } from "./draggable-table-tags";
 import { getAttrPrecisions, getAttrTypes, getAttrVisibility } from "../utils/utils";
 import { TableHeaders } from "./table-headers";
@@ -8,7 +8,6 @@ import { useCodapContext } from "./CodapContext";
 
 import css from "./tables.scss";
 
-
 export const LandscapeView = (props: INestedTableProps) => {
   const {collectionClasses, getClassName, getValueLength, paddingStyle} = props;
   const {collections, selectedDataSet, interactiveState} = useCodapContext();
@@ -39,7 +38,7 @@ export const LandscapeView = (props: INestedTableProps) => {
                 values={headerValues}
                 attrVisibilities={attrVisibilities}
               />
-            )
+            );
           })}
         </tr>
         <tr className={css[className]}>
@@ -124,7 +123,7 @@ export const LandscapeView = (props: INestedTableProps) => {
                   precision={precisions[key]}
                   isHidden={attrVisibilities[key]}
                 />
-              )
+              );
             })}
           </tr>
         </>

src/components/menu.tsx

@@ -1,7 +1,8 @@
 import React from "react";
-import css from "./menu.scss";
 import { useCodapContext } from "./CodapContext";
 
+import css from "./menu.scss";
+
 interface IProps {
   onSelectDataSet: (e: React.ChangeEvent<HTMLSelectElement>) => void,
 

src/components/nested-table.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { InteractiveState } from "../hooks/useCodapState";
 import { ICollection, ICollectionClass, IProcessedCaseObj, Values } from "../types";
 import { Menu } from "./menu";
 import { PortraitView } from "./portrait-view";
@@ -90,26 +89,21 @@ export const NestedTable = (props: IProps) => {
 
   const renderTable = () => {
     const isNoHierarchy = collections.length === 1;
-    // const classesExist = collectionClasses.length > 0;
-    const tableProps = {
-        getValueLength,
-        collectionClasses,
-        getClassName,
-        paddingStyle
-    };
+    const flatProps = {getValueLength, paddingStyle};
+    const nestedTableProps = {...flatProps, collectionClasses, getClassName};
     if (isNoHierarchy) {
       return (
         <FlatTable
           getValueLength={getValueLength}
           paddingStyle={paddingStyle}
         />
-      )
+      );
     } else {
       return (
         interactiveState.displayMode === portrait ?
-          <PortraitView {...tableProps} /> :
+          <PortraitView {...nestedTableProps} /> :
           interactiveState.displayMode === landscape ?
-          <LandscapeView {...tableProps} /> :
+          <LandscapeView {...nestedTableProps} /> :
           <div/>
       );
     }
@@ -126,6 +120,8 @@ export const NestedTable = (props: IProps) => {
         toggleShowHeaders={toggleShowHeaders}
         displayMode={interactiveState?.displayMode}
         showDisplayMode={showDisplayMode}
+        padding={interactiveState?.padding}
+        showHeaders={interactiveState?.showHeaders}
       />
       <DraggableTableContext.Provider value={draggableTable}>
         {/* <FocusProvider> */}

src/components/portrait-view.tsx

@@ -1,14 +1,14 @@
-import React, { useRef, useState } from "react";
+import React, { useRef } from "react";
 import { ICollection, INestedTableProps, IProcessedCaseObj, Values } from "../types";
 import { DraggableTableContainer, DroppableTableData, DroppableTableHeader } from "./draggable-table-tags";
 import { TableScrollTopContext, useTableScrollTop } from "../hooks/useTableScrollTop";
 import { getAttrPrecisions, getAttrTypes, getAttrVisibility } from "../utils/utils";
-
-import css from "./tables.scss";
 import { TableHeaders } from "./table-headers";
 import { useCodapContext } from "./CodapContext";
 import { TableCell } from "./table-cell";
 
+import css from "./tables.scss";
+
 interface IPortraitViewRowProps extends INestedTableProps {
   collectionId: number;
   caseObj: IProcessedCaseObj;
@@ -46,7 +46,7 @@ export const PortraitViewRow = (props: IPortraitViewRowProps) => {
               precision={precisions[key]}
               isHidden={attrVisibilities[key]}
             />
-          )
+          );
         })}
       </tr>
     );
@@ -79,6 +79,7 @@ export const PortraitViewRow = (props: IPortraitViewRowProps) => {
               attrType={attrTypes[i]}
               precision={precisions[i]}
               isHidden={attrVisibilities[key]}
+              isParent={isParent}
             />
           ))}
           <DroppableTableData collectionId={collectionId} style={paddingStyle}>
@@ -130,7 +131,7 @@ export const PortraitView = (props: INestedTableProps) => {
 
   const renderTable = () => {
     const parentColl = collections.filter((coll: ICollection) => !coll.parent)[0];
-    const className = "collections0";
+    const className = `collection0`;
     const firstRowValues = parentColl.cases.map(caseObj => caseObj.values);
     const valueCount = getValueLength(firstRowValues);
     const precisions = getAttrPrecisions(collections);
@@ -139,8 +140,8 @@ export const PortraitView = (props: INestedTableProps) => {
 
     return (
       <DraggableTableContainer>
-        <table className={`${css.mainTable} ${css.portraitTable} ${css[className]}`} ref={tableRef}>
-          <tbody className={`table-body ${css[className]}`}>
+        <table className={`${css.mainTable} ${css.portraitTable} ${`tables-${className}`}`} ref={tableRef}>
+          <tbody className={`table-body ${className}`}>
             <tr className={css.mainHeader}>
               <th className={css.datasetNameHeader} colSpan={valueCount}>{selectedDataSet.name}</th>
             </tr>

src/components/table-headers.tsx

@@ -21,7 +21,6 @@ export const TableHeaders: React.FC<MapHeadersFromValuesProps> = ({
     <>
       {Object.keys(values).map((key, index) => {
         if (!attrVisibilities[key] && (typeof values[key] === "string" || typeof values[key] === "number")) {
-          console.log("Rendering header for key:", key); // Debugging log
           return (
             <DraggagleTableHeader
               key={`${collectionId}-${rowKey}-${key}-${index}`}
@@ -34,7 +33,7 @@ export const TableHeaders: React.FC<MapHeadersFromValuesProps> = ({
             </DraggagleTableHeader>
           );
         }
-        return null; // Return null if the condition is not met
+        return null;
       })}
     </>
   );

src/hooks/useCodapState.tsx

@@ -14,7 +14,7 @@ import {
   updateAttributePosition,
 } from "@concord-consortium/codap-plugin-api";
 import { getCases, getDataSetCollections, sortAttribute } from "../utils/apiHelpers";
-import { ICollections, ICollection, IDataSet } from "../types";
+import { ICollections, ICollection, IDataSet, InteractiveState } from "../types";
 
 const iFrameDescriptor = {
   version: "0.5.0",
@@ -26,14 +26,6 @@ const iFrameDescriptor = {
   }
 };
 
-export interface InteractiveState {
-  view: "nested-table" | "hierarchy" | "card-view" | null
-  dataSetName: string|null;
-  padding: boolean;
-  showHeaders: boolean;
-  displayMode: string;
-}
-
 export const useCodapState = () => {
   const [connected, setConnected] = useState(false);
   const [dataSets, setDataSets] = useState<IDataSet[]>([]);