Adds utility function to get attribute visibilities.

Plugin mirrors CODAP attribute visibility
concord-consortium · Mar 27, 2024 · ec5dbea · ec5dbea
1 parent fe7a7cd
commit ec5dbea
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 21 deletions.
diff --git a/src/components/flat-table.tsx b/src/components/flat-table.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { ITableProps, IValues } from "../types";
 import { DraggableTableContainer, DraggagleTableHeader } from "./draggable-table-tags";
-import { getAttrPrecisions, getAttrTypes } from "../utils/utils";
+import { getAttrPrecisions, getAttrTypes, getAttrVisibility } from "../utils/utils";
 
 import css from "./tables.scss";
 
@@ -13,8 +13,10 @@ export const FlatTable = (props: IFlatProps) => {
   const {selectedDataSet, collections, collectionClasses, items, mapCellsFromValues, showHeaders} = props;
   const collection = collections[0];
   const {className} = collectionClasses[0];
+  const attrVisibilities = getAttrVisibility(collections);
+  const collectionAttrsToUse = collection.attrs.filter(attr => !attrVisibilities[attr.title]);
 
-  const titles = collection.attrs.map(attr => attr.title);
+  const titles = collectionAttrsToUse.map(attr => attr.title);
   const precisions = getAttrPrecisions(collections);
   const attrTypes = getAttrTypes(collections);
   const orderedItems = items.map(item => {
@@ -37,7 +39,7 @@ export const FlatTable = (props: IFlatProps) => {
             <th colSpan={items.length}>{collections[0].title}</th>
           </tr>}
           <tr>
-            {collection.attrs.map((attr: any) =>
+            {collectionAttrsToUse.map((attr: any) =>
               <DraggagleTableHeader
                 key={attr.title}
                 collectionId={collection.id}
@@ -49,7 +51,7 @@ export const FlatTable = (props: IFlatProps) => {
           {orderedItems.map((item, index) => {
             return (
               <tr key={`${index}-${item.id}`}>
-                {mapCellsFromValues(collection.id, `row-${index}`, item, precisions, attrTypes)}
+                {mapCellsFromValues(collection.id, `row-${index}`, item, precisions, attrTypes, attrVisibilities)}
               </tr>
             );
           })}

diff --git a/src/components/landscape-view.tsx b/src/components/landscape-view.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { ICollection, IProcessedCaseObj, ITableProps } from "../types";
 import { DraggagleTableHeader } from "./draggable-table-tags";
-import { getAttrPrecisions, getAttrTypes } from "../utils/utils";
+import { getAttrPrecisions, getAttrTypes, getAttrVisibility } from "../utils/utils";
 
 import css from "./tables.scss";
 
@@ -15,17 +15,20 @@ export const LandscapeView = (props: ITableProps) => {
     const className = getClassName(parentColl.cases[0]);
     const precisions = getAttrPrecisions(collections);
     const attrTypes = getAttrTypes(collections);
+    const attrVisibilities = getAttrVisibility(collections);
     return (
       <>
         {showHeaders &&
         <tr className={css[className]}>
           <th colSpan={valueCount}>{parentColl.name}</th>
         </tr> }
         <tr className={css[className]}>
-          {firstRowValues.map(values => mapHeadersFromValues(parentColl.id, "first-row", values))}
+          {firstRowValues.map(values => mapHeadersFromValues(parentColl.id, "first-row", values, attrVisibilities))}
         </tr>
         <tr className={css[className]}>
-          {firstRowValues.map(values => mapCellsFromValues(parentColl.id, "first-row", values, precisions, attrTypes))}
+          {firstRowValues.map(values =>
+            mapCellsFromValues(parentColl.id, "first-row", values, precisions, attrTypes, attrVisibilities))
+          }
         </tr>
         <tr className={css[className]}>
           {parentColl.cases.map((caseObj) => {
@@ -51,6 +54,8 @@ export const LandscapeView = (props: ITableProps) => {
     const isFirstIndex = index === 0;
     const precisions = getAttrPrecisions(collections);
     const attrTypes = getAttrTypes(collections);
+    const attrVisibilities = getAttrVisibility(collections);
+
     if (!children.length) {
       const className = getClassName(caseObj);
       return (
@@ -62,10 +67,10 @@ export const LandscapeView = (props: ITableProps) => {
           }
           {isFirstIndex &&
             <tr className={css[className]}>
-              {mapHeadersFromValues(collection.id, `first-row-${index}`, values)}
+              {mapHeadersFromValues(collection.id, `first-row-${index}`, values, attrVisibilities)}
             </tr>
           }
-          <tr>{mapCellsFromValues(collection.id, `row-${index}`, values, precisions, attrTypes)}</tr>
+          <tr>{mapCellsFromValues(collection.id, `row-${index}`, values, precisions, attrTypes, attrVisibilities)}</tr>
         </>
       );
     } else {

diff --git a/src/components/nested-table.tsx b/src/components/nested-table.tsx
@@ -89,11 +89,12 @@ export const NestedTable = (props: IProps) => {
     updateInteractiveState({displayMode: e.target.value});
   }, [updateInteractiveState]);
 
-  const mapHeadersFromValues = (collectionId: number, rowKey: string, values: IValues) => {
+  const mapHeadersFromValues = (collectionId: number, rowKey: string, values: IValues,
+      attrVisibilities: Record<string, boolean>) => {
     return (
       <>
         {(Object.keys(values)).map((key, index) => {
-          if (typeof values[key] === "string" || typeof values[key] === "number") {
+          if (!attrVisibilities[key] && (typeof values[key] === "string" || typeof values[key] === "number")) {
             return (
               <DraggagleTableHeader
                 key={`${collectionId}-${rowKey}-${key}-${index}`}
@@ -110,8 +111,11 @@ export const NestedTable = (props: IProps) => {
 
   const mapCellsFromValues = (collectionId: number, rowKey: string, values: IValues,
       precisions: Record<string, number>, attrTypes: Record<string, string | undefined | null>,
-      isParent?: boolean, resizeCounter?: number, parentLevel?: number) => {
+      attrVisibilities: Record<string, boolean>, isParent?: boolean, resizeCounter?: number, parentLevel?: number) => {
     return Object.keys(values).map((key, index) => {
+      if (attrVisibilities[key]) {
+        return null;
+      }
       const val = attrTypes[key] === "numeric" ? parseFloat(values[key]) : values[key];
       if (typeof val === "string" || typeof val === "number") {
         if (typeof val === "number") {

diff --git a/src/components/portrait-view.tsx b/src/components/portrait-view.tsx
@@ -2,39 +2,40 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import { ICollection, IProcessedCaseObj, ITableProps } from "../types";
 import { DraggableTableContainer, DroppableTableData, DroppableTableHeader } from "./draggable-table-tags";
 import { TableScrollTopContext, useTableScrollTop } from "../hooks/useTableScrollTop";
-import { getAttrPrecisions, getAttrTypes } from "../utils/utils";
+import { getAttrPrecisions, getAttrTypes, getAttrVisibility } from "../utils/utils";
 
 import css from "./tables.scss";
 
 export type PortraitViewRowProps = {collectionId: number, caseObj: IProcessedCaseObj, index?: null|number,
                                     precisions: Record<string, number>,
                                     attrTypes: Record<string, string | undefined | null>,
+                                    attrVisibilities: Record<string, boolean>,
                                     isParent: boolean, resizeCounter: number, parentLevel?: number}
                                     & ITableProps;
 
 export const PortraitViewRow = (props: PortraitViewRowProps) => {
-  const {paddingStyle, mapCellsFromValues, mapHeadersFromValues, showHeaders, precisions, attrTypes,
+  const {paddingStyle, mapCellsFromValues, mapHeadersFromValues, showHeaders, precisions, attrTypes, attrVisibilities,
           getClassName, collectionId, caseObj, index, isParent, resizeCounter, parentLevel} = props;
 
   const {children, values} = caseObj;
 
   if (!children.length) {
     return (
-        <tr>{mapCellsFromValues(collectionId, `row-${index}`, values, precisions, attrTypes)}</tr>
+        <tr>{mapCellsFromValues(collectionId, `row-${index}`, values, precisions, attrTypes, attrVisibilities)}</tr>
     );
   } else {
     return (
       <>
         {index === 0 &&
           <tr className={`${css[getClassName(caseObj)]}`}>
-            {mapHeadersFromValues(collectionId, `first-row-${index}`, values)}
+            {mapHeadersFromValues(collectionId, `first-row-${index}`, values, attrVisibilities)}
             {showHeaders ? (
                 <DroppableTableHeader collectionId={collectionId}>{children[0].collection.name}</DroppableTableHeader>
               ) : <th />}
           </tr>
         }
         <tr className={`${css[getClassName(caseObj)]} parent-row`}>
-          {mapCellsFromValues(collectionId, `parent-row-${index}`, values, precisions, attrTypes,
+          {mapCellsFromValues(collectionId, `parent-row-${index}`, values, precisions, attrTypes, attrVisibilities,
                               isParent, resizeCounter, parentLevel)}
           <DroppableTableData collectionId={collectionId} style={paddingStyle}>
             <DraggableTableContainer collectionId={collectionId}>
@@ -53,7 +54,8 @@ export const PortraitViewRow = (props: PortraitViewRowProps) => {
                       return (
                         <React.Fragment key={child.collection.id}>
                           <tr className={`${css[getClassName(child)]}`}>
-                            {mapHeadersFromValues(child.collection.id, `child-row-${index}-${i}`, child.values)}
+                            {mapHeadersFromValues(child.collection.id, `child-row-${index}-${i}`, child.values,
+                                attrVisibilities)}
                           </tr>
                           <PortraitViewRow {...nextProps} />
                         </React.Fragment>
@@ -110,6 +112,7 @@ export const PortraitView = (props: ITableProps) => {
     const valueCount = getValueLength(firstRowValues);
     const precisions = getAttrPrecisions(collections);
     const attrTypes = getAttrTypes(collections);
+    const attrVisibilities = getAttrVisibility(collections);
 
     return (
       <DraggableTableContainer>
@@ -130,6 +133,7 @@ export const PortraitView = (props: ITableProps) => {
                 index={index}
                 precisions={precisions}
                 attrTypes={attrTypes}
+                attrVisibilities={attrVisibilities}
                 isParent={true}
                 resizeCounter={resizeCounter}
                 parentLevel={0}

diff --git a/src/types.tsx b/src/types.tsx
@@ -56,9 +56,10 @@ export interface ITableProps {
   selectedDataSet: IDataSet,
   collections: Array<ICollection>,
   mapCellsFromValues: (collectionId: number, rowKey: string, values: IValues, precisions: Record<string, number>,
-      attrTypes: Record<string, string | undefined | null>, isParent?: boolean, resizeCounter?: number,
-      parentLevel?: number) => void,
-  mapHeadersFromValues: (collectionId: number, rowKey: string, values: IValues) => void,
+      attrTypes: Record<string, string | undefined | null>, attrVisibilities: Record<string, boolean>,
+      isParent?: boolean, resizeCounter?: number, parentLevel?: number) => void,
+  mapHeadersFromValues: (collectionId: number, rowKey: string, values: IValues,
+      attrVisibilities: Record<string, boolean>) => void,
   getValueLength: (firstRow: Array<IValues>) => number
   paddingStyle: Record<string, string>
 }

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -27,3 +27,13 @@ export const getAttrTypes = (collections: any) => {
   }, {});
   return attrTypes;
 };
+
+export const getAttrVisibility = (collections: any) => {
+  const attrs = getAllAttributesFromCollections(collections);
+  const attrVisibilities = attrs.reduce(
+      (acc: Record<string, boolean>, attr: any) => {
+    acc[attr.name] = attr.hidden || false;
+    return acc;
+  }, {});
+  return attrVisibilities;
+};