feat!: implement group by list (#302) (#303)

DataBiosphere · Jan 3, 2025 · 36e4330 · 36e4330
1 parent 2003167
commit 36e4330
Show file tree

Hide file tree

Showing 65 changed files with 1,172 additions and 438 deletions.
diff --git a/...tail/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.tsx b/...tail/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.tsx
@@ -3,6 +3,7 @@ import React, { Fragment } from "react";
 import { isCollapsableRowDisabled } from "../../../../../../../Table/common/utils";
 import { CollapsableCell } from "../../../../../../../Table/components/TableCell/components/CollapsableCell/collapsableCell";
 import { TableRow } from "../../../../../../../Table/components/TableRow/tableRow.styles";
+import { useCollapsableRows } from "../../../../../../../Table/components/TableRows/components/CollapsableRows/hook";
 
 export interface CollapsableRowsProps<T extends RowData> {
   tableInstance: Table<T>;
@@ -13,6 +14,7 @@ export const CollapsableRows = <T extends RowData>({
 }: CollapsableRowsProps<T>): JSX.Element => {
   const { getRowModel } = tableInstance;
   const { rows } = getRowModel();
+  useCollapsableRows(tableInstance);
   return (
     <Fragment>
       {rows.map((row) => {

diff --git a/src/components/Detail/components/Table/components/TableRows/tableRows.tsx b/src/components/Detail/components/Table/components/TableRows/tableRows.tsx
@@ -1,5 +1,5 @@
 import { TableCell } from "@mui/material";
-import { flexRender, Row, RowData, Table } from "@tanstack/react-table";
+import { flexRender, RowData, Table } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import {
   getTableCellAlign,
@@ -26,9 +26,9 @@ export const TableRows = <T extends RowData>({
       {rows.map((row) => {
         return (
           <TableRow
-            id={getRowId(row)}
-            isPreview={row.getIsPreview()}
             key={row.id}
+            isGrouped={row.getIsGrouped()}
+            isPreview={row.getIsPreview()}
           >
             {row.getVisibleCells().map((cell) => {
               if (cell.getIsAggregated()) return null; // Display of aggregated cells is currently not supported.
@@ -50,18 +50,3 @@ export const TableRows = <T extends RowData>({
     </Fragment>
   );
 };
-
-/**
- * Returns identifier for a row.
- * @param row - Row.
- * @returns row identifier.
- */
-function getRowId<T extends RowData>(row: Row<T>): string | undefined {
-  const { depth, getIsGrouped, id } = row;
-  if (getIsGrouped()) {
-    return `grouped-row-${id}`;
-  }
-  if (depth > 0) {
-    return `sub-row-${id}`;
-  }
-}
diff --git a/...s/Export/components/ExportForm/components/ExportFileSummaryForm/exportFileSummaryForm.tsx b/...s/Export/components/ExportForm/components/ExportFileSummaryForm/exportFileSummaryForm.tsx
@@ -8,7 +8,7 @@ import {
   TableHead,
   TableRow,
 } from "@mui/material";
-import React, { Fragment } from "react";
+import React from "react";
 import { formatCountSize } from "../../../../../../utils/formatCountSize";
 import { formatFileSize } from "../../../../../../utils/formatFileSize";
 import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
@@ -81,37 +81,33 @@ export const ExportFileSummaryForm = ({
             </TableRow>
           </TableHead>
           <TableBody>
-            <TableRow>
-              {fileSummaryFacet.terms.map(
-                ({ count, name, selected, size = 0 }) => (
-                  <Fragment key={name}>
-                    <TableCell>
-                      <FormControlLabel
-                        control={
-                          <Checkbox
-                            checked={selected}
-                            checkedIcon={<CheckedIcon />}
-                            icon={
-                              error ? <UncheckedErrorIcon /> : <UncheckedIcon />
-                            }
-                            onChange={(): void => {
-                              onClearError(error, ERROR.FILE_SUMMARY_ERROR);
-                              onFilter(fileSummaryFacet.name, name, selected);
-                            }}
-                          />
-                        }
-                        key={name}
-                        label={name}
-                      />
-                    </TableCell>
-                    <TableCell>{formatCountSize(count)}</TableCell>
-                    {hasFileSize && (
-                      <TableCell>{formatFileSize(size)}</TableCell>
-                    )}
-                  </Fragment>
-                )
-              )}
-            </TableRow>
+            {fileSummaryFacet.terms.map(
+              ({ count, name, selected, size = 0 }) => (
+                <TableRow key={name}>
+                  <TableCell>
+                    <FormControlLabel
+                      control={
+                        <Checkbox
+                          checked={selected}
+                          checkedIcon={<CheckedIcon />}
+                          icon={
+                            error ? <UncheckedErrorIcon /> : <UncheckedIcon />
+                          }
+                          onChange={(): void => {
+                            onClearError(error, ERROR.FILE_SUMMARY_ERROR);
+                            onFilter(fileSummaryFacet.name, name, selected);
+                          }}
+                        />
+                      }
+                      key={name}
+                      label={name}
+                    />
+                  </TableCell>
+                  <TableCell>{formatCountSize(count)}</TableCell>
+                  {hasFileSize && <TableCell>{formatFileSize(size)}</TableCell>}
+                </TableRow>
+              )
+            )}
           </TableBody>
         </GridTable>
       </GridPaper>

diff --git a/src/components/Links/components/Link/components/ExploreViewLink/exploreViewLink.tsx b/src/components/Links/components/Link/components/ExploreViewLink/exploreViewLink.tsx
@@ -1,6 +1,6 @@
-import { ColumnSort } from "@tanstack/react-table";
+import { ColumnSort, GroupingState } from "@tanstack/react-table";
 import Link from "next/link";
-import React, { useCallback } from "react";
+import React from "react";
 import { UrlObject } from "url";
 import { SelectedFilter } from "../../../../../../common/entities";
 import { useExploreState } from "../../../../../../hooks/useExploreState";
@@ -16,6 +16,7 @@ import {
 import { LinkProps } from "../../link";
 
 const PARAM_FILTER = "filter";
+const PARAM_GROUPING = "grouping";
 const PARAM_SORTING = "sorting";
 
 export interface ExploreViewLinkProps
@@ -36,22 +37,22 @@ export const ExploreViewLink = ({
     throwError(url);
   }
 
-  const onNavigate = useCallback(() => {
-    const entityListType = getEntityListType(url.href);
-    const filters = getSelectedFilters(url.query);
-    const sorting = getSorting(url.query);
-    exploreDispatch({
-      payload: { entityListType, filters, sorting },
-      type: ExploreActionKind.UpdateEntityFilters,
-    });
-    onClick?.();
-  }, [exploreDispatch, onClick, url]);
+  const entityListType = getEntityListType(url.href);
+  const filters = getSelectedFilters(url.query);
+  const grouping = getGrouping(url.query);
+  const sorting = getSorting(url.query);
 
   return (
     <Link
       className={className}
       href={url.href}
-      onClick={onNavigate}
+      onClick={(): void => {
+        exploreDispatch({
+          payload: { entityListType, filters, grouping, sorting },
+          type: ExploreActionKind.UpdateEntityFilters,
+        });
+        onClick?.();
+      }}
       rel={REL_ATTRIBUTE.NO_OPENER}
       target={target}
     >
@@ -69,6 +70,19 @@ function getEntityListType(href: UrlObjectWithHrefAndQuery["href"]): string {
   return href.substring(href.lastIndexOf("/") + 1);
 }
 
+/**
+ * Returns the grouping from the given query.
+ * @param query - Query.
+ * @returns grouping.
+ */
+function getGrouping(
+  query: UrlObjectWithHrefAndQuery["query"]
+): GroupingState | undefined {
+  const decodedQuery = decodeURIComponent(query);
+  const parsedQuery = JSON.parse(decodedQuery);
+  return parsedQuery[PARAM_GROUPING];
+}
+
 /**
  * Returns the selected filters from the given query.
  * @param query - Query.

diff --git a/src/components/Table/common/columnDef.ts b/src/components/Table/common/columnDef.ts
@@ -6,6 +6,7 @@ import { RowPositionCell } from "../components/TableCell/components/RowPositionC
 export const COLUMN_DEF: Record<string, ColumnDef<RowData>> = {
   ROW_POSITION: {
     cell: RowPositionCell,
+    enableGrouping: false,
     enableHiding: false,
     enableSorting: false,
     header: "",

diff --git a/src/components/Table/common/gridTable.styles.ts b/src/components/Table/common/gridTable.styles.ts
@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { Table as MTable } from "@mui/material";
-import { smokeLightest, white } from "../../../styles/common/mixins/colors";
+import { white } from "../../../styles/common/mixins/colors";
 
 export interface GridTableProps {
   gridTemplateColumns: string;
@@ -17,7 +17,10 @@ export const GridTable = styled(MTable, {
   tbody,
   thead,
   tr {
-    display: contents; /* required; allows grandchildren of grid template to appear as though direct child */
+    display: grid;
+    gap: inherit;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
   }
 
   tr {
@@ -39,13 +42,4 @@ export const GridTable = styled(MTable, {
       min-width: 0; /* required; flexbox child min-width property is "auto" by default making overflow-wrap ineffectual */
     }
   }
-
-  [id^="grouped-row"] {
-    background-color: ${smokeLightest};
-
-    td {
-      background-color: inherit;
-      grid-column: 1 / -1;
-    }
-  }
 `;