feat: add ungrouped column filters to read run (#700)

app/components/Entity/components/ConfigureWorkflowInputs/components/Main/components/Stepper/components/Step/SequencingStep/components/ENASequencingData/components/CollectionSelector/collectionSelector.styles.ts

@@ -26,10 +26,10 @@ export const StyledDialog = styled(Dialog)`
     }
 
     .MuiDialogContent-root {
-      align-content: flex-start;
+      align-content: stretch;
       background-color: ${PALETTE.SMOKE_LIGHT};
       display: grid;
-      grid-template-columns: 1fr;
+      grid-template-columns: 264px 1fr;
       padding: 0;
     }
 

app/components/Entity/components/ConfigureWorkflowInputs/components/Main/components/Stepper/components/Step/SequencingStep/components/ENASequencingData/components/CollectionSelector/collectionSelector.tsx

@@ -7,6 +7,7 @@ import { useState } from "react";
 import { Table } from "./components/Table/table";
 import { RowSelectionState } from "@tanstack/table-core";
 import { buildEnaSequencingReads } from "../../utils";
+import { ColumnFilters } from "./components/ColumnFilters/columnFilters";
 
 export const CollectionSelector = ({
   onClose,
@@ -24,6 +25,7 @@ export const CollectionSelector = ({
     >
       <DialogTitle onClose={onClose} title="Select Sequencing Runs" />
       <DialogContent>
+        <ColumnFilters table={table} />
         <Table table={table} />
       </DialogContent>
       <DialogActions>

app/components/Entity/components/ConfigureWorkflowInputs/components/Main/components/Stepper/components/Step/SequencingStep/components/ENASequencingData/components/CollectionSelector/components/ColumnFilters/columnFilters.styles.ts

@@ -0,0 +1,7 @@
+import styled from "@emotion/styled";
+import { PALETTE } from "@databiosphere/findable-ui/lib/styles/common/constants/palette";
+
+export const StyledContainer = styled("div")`
+  box-shadow: inset -1px 0 ${PALETTE.SMOKE_MAIN};
+  overflow: auto;
+`;

app/components/Entity/components/ConfigureWorkflowInputs/components/Main/components/Stepper/components/Step/SequencingStep/components/ENASequencingData/components/CollectionSelector/components/ColumnFilters/columnFilters.tsx

@@ -0,0 +1,22 @@
+import { Props } from "./types";
+import { ColumnFiltersAdapter } from "@databiosphere/findable-ui/lib/components/Filter/components/adapters/tanstack/ColumnFiltersAdapter/columnFiltersAdapter";
+import { SurfaceProps } from "@databiosphere/findable-ui/lib/components/Filter/components/surfaces/types";
+import { Filters } from "@databiosphere/findable-ui/lib/components/Filter/components/Filters/filters";
+import { StyledContainer } from "./columnFilters.styles";
+import { Controls } from "@databiosphere/findable-ui/lib/components/Filter/components/controls/Controls/controls";
+
+export const ColumnFilters = ({ table }: Props): JSX.Element => {
+  return (
+    <StyledContainer>
+      <ColumnFiltersAdapter
+        renderSurface={(props: SurfaceProps) => (
+          <>
+            <Controls onFilter={props.onFilter} />
+            <Filters {...props} />
+          </>
+        )}
+        table={table}
+      />
+    </StyledContainer>
+  );
+};

app/components/Entity/components/ConfigureWorkflowInputs/components/Main/components/Stepper/components/Step/SequencingStep/components/ENASequencingData/components/CollectionSelector/components/ColumnFilters/types.ts

@@ -0,0 +1,6 @@
+import { Table } from "@tanstack/react-table";
+import { ReadRun } from "../../../../types";
+
+export interface Props {
+  table: Table<ReadRun>;
+}

app/components/Entity/components/ConfigureWorkflowInputs/components/Main/components/Stepper/components/Step/SequencingStep/components/ENASequencingData/components/CollectionSelector/components/Table/table.styles.ts

@@ -1,14 +1,20 @@
 import { RoundedPaper } from "@databiosphere/findable-ui/lib/components/common/Paper/components/RoundedPaper/roundedPaper";
 import styled from "@emotion/styled";
+import { Grid } from "@mui/material";
 import { PALETTE } from "@databiosphere/findable-ui/lib/styles/common/constants/palette";
 
-export const StyledRoundedPaper = styled(RoundedPaper)`
-  background-color: ${PALETTE.SMOKE_MAIN};
+export const StyledGrid = styled(Grid)`
+  align-content: flex-start;
   margin: 24px;
   max-height: 100%;
   max-width: 100%;
   min-height: 0;
   min-width: 0;
+`;
+
+export const StyledRoundedPaper = styled(RoundedPaper)`
+  background-color: ${PALETTE.SMOKE_MAIN};
+  max-height: 100%;
 
   .MuiTableContainer-root {
     height: 100%;

app/components/Entity/components/ConfigureWorkflowInputs/components/Main/components/Stepper/components/Step/SequencingStep/components/ENASequencingData/components/CollectionSelector/components/Table/table.tsx

@@ -2,28 +2,31 @@ import { GridTable } from "@databiosphere/findable-ui/lib/components/Table/table
 import { TableHead } from "@databiosphere/findable-ui/lib/components/Table/components/TableHead/tableHead";
 import { ROW_DIRECTION } from "@databiosphere/findable-ui/lib/components/Table/common/entities";
 import { TableBody } from "@databiosphere/findable-ui/lib/components/Detail/components/Table/components/TableBody/tableBody";
+import { StyledGrid } from "./table.styles";
 import { StyledRoundedPaper } from "./table.styles";
 import { TableContainer } from "@mui/material";
 import { getColumnTrackSizing } from "@databiosphere/findable-ui/lib/components/TableCreator/options/columnTrackSizing/utils";
 import { Props } from "./types";
 
 export const Table = ({ table }: Props): JSX.Element => {
   return (
-    <StyledRoundedPaper elevation={0}>
-      <TableContainer>
-        <GridTable
-          gridTemplateColumns={getColumnTrackSizing(
-            table.getVisibleFlatColumns()
-          )}
-          stickyHeader
-        >
-          <TableHead tableInstance={table} />
-          <TableBody
-            rowDirection={ROW_DIRECTION.DEFAULT}
-            tableInstance={table}
-          />
-        </GridTable>
-      </TableContainer>
-    </StyledRoundedPaper>
+    <StyledGrid container>
+      <StyledRoundedPaper elevation={0}>
+        <TableContainer>
+          <GridTable
+            gridTemplateColumns={getColumnTrackSizing(
+              table.getVisibleFlatColumns()
+            )}
+            stickyHeader
+          >
+            <TableHead tableInstance={table} />
+            <TableBody
+              rowDirection={ROW_DIRECTION.DEFAULT}
+              tableInstance={table}
+            />
+          </GridTable>
+        </TableContainer>
+      </StyledRoundedPaper>
+    </StyledGrid>
   );
 };

app/components/Entity/components/ConfigureWorkflowInputs/components/Main/components/Stepper/components/Step/SequencingStep/components/ENASequencingData/components/CollectionSelector/hooks/UseTable/categoryConfigs.ts

@@ -0,0 +1,28 @@
+import { CategoryConfig } from "@databiosphere/findable-ui/lib/common/categories/config/types";
+
+export const CATEGORY_CONFIGS: Record<string, CategoryConfig> = {
+  BASE_COUNT: {
+    key: "base_count",
+    label: "Base Count",
+  },
+  EXPERIMENT_ACCESSION: {
+    key: "experiment_accession",
+    label: "Experiment Accession",
+  },
+  FASTQ_FTP: { key: "fastq_ftp", label: "Fastq FTP" },
+  INSTRUMENT_MODEL: { key: "instrument_model", label: "Instrument Model" },
+  INSTRUMENT_PLATFORM: {
+    key: "instrument_platform",
+    label: "Instrument Platform",
+  },
+  LIBRARY_LAYOUT: { key: "library_layout", label: "Library Layout" },
+  LIBRARY_STRATEGY: { key: "library_strategy", label: "Library Strategy" },
+  READ_COUNT: {
+    key: "read_count",
+    label: "Read Count",
+  },
+  RUN_ACCESSION: { key: "run_accession", label: "Run Accession" },
+  SAMPLE_ACCESSION: { key: "sample_accession", label: "Sample Accession" },
+  SCIENTIFIC_NAME: { key: "scientific_name", label: "Scientific Name" },
+  STUDY_ACCESSION: { key: "study_accession", label: "Study Accession" },
+} as const;

app/components/Entity/components/ConfigureWorkflowInputs/components/Main/components/Stepper/components/Step/SequencingStep/components/ENASequencingData/components/CollectionSelector/hooks/UseTable/columnDef.ts

@@ -0,0 +1,116 @@
+import { ColumnDef, ColumnMeta } from "@tanstack/react-table";
+import { ReadRun } from "../../../../types";
+import { buildFastqFTP } from "./viewBuilders";
+import { COLUMN_DEF } from "@databiosphere/findable-ui/lib/components/Table/common/columnDef";
+import { BasicCell } from "../../components/Table/components/TableCell/components/BasicCell/basicCell";
+import { CATEGORY_CONFIGS } from "./categoryConfigs";
+
+// const RANGE_FILTER_FN = "inNumberRange";
+const SELECT_FILTER_FN = "arrIncludesSome";
+
+const META: ColumnMeta<ReadRun, unknown> = {
+  width: { max: "1.2fr", min: "120px" },
+};
+
+const BASE_COUNT: ColumnDef<ReadRun> = {
+  accessorKey: CATEGORY_CONFIGS.BASE_COUNT.key,
+  // filterFn: RANGE_FILTER_FN,
+  filterFn: SELECT_FILTER_FN,
+  header: CATEGORY_CONFIGS.BASE_COUNT.label,
+  meta: META,
+};
+
+const EXPERIMENT_ACCESSION: ColumnDef<ReadRun> = {
+  accessorKey: CATEGORY_CONFIGS.EXPERIMENT_ACCESSION.key,
+  filterFn: SELECT_FILTER_FN,
+  header: CATEGORY_CONFIGS.EXPERIMENT_ACCESSION.label,
+  meta: META,
+};
+
+const FASTQ_FTP: ColumnDef<ReadRun> = {
+  accessorKey: CATEGORY_CONFIGS.FASTQ_FTP.key,
+  cell: (ctx) => BasicCell(buildFastqFTP(ctx)),
+  filterFn: SELECT_FILTER_FN,
+  header: CATEGORY_CONFIGS.FASTQ_FTP.label,
+  meta: { width: { max: "1.8fr", min: "200px" } },
+};
+
+const INSTRUMENT_MODEL: ColumnDef<ReadRun> = {
+  accessorKey: CATEGORY_CONFIGS.INSTRUMENT_MODEL.key,
+  filterFn: SELECT_FILTER_FN,
+  header: CATEGORY_CONFIGS.INSTRUMENT_MODEL.label,
+  meta: META,
+};
+
+const INSTRUMENT_PLATFORM: ColumnDef<ReadRun> = {
+  accessorKey: CATEGORY_CONFIGS.INSTRUMENT_PLATFORM.key,
+  filterFn: SELECT_FILTER_FN,
+  header: CATEGORY_CONFIGS.INSTRUMENT_PLATFORM.label,
+  meta: META,
+};
+
+const LIBRARY_LAYOUT: ColumnDef<ReadRun> = {
+  accessorKey: CATEGORY_CONFIGS.LIBRARY_LAYOUT.key,
+  filterFn: SELECT_FILTER_FN,
+  header: CATEGORY_CONFIGS.LIBRARY_LAYOUT.label,
+  meta: META,
+};
+
+const LIBRARY_STRATEGY: ColumnDef<ReadRun> = {
+  accessorKey: CATEGORY_CONFIGS.LIBRARY_STRATEGY.key,
+  filterFn: SELECT_FILTER_FN,
+  header: CATEGORY_CONFIGS.LIBRARY_STRATEGY.label,
+  meta: META,
+};
+
+const READ_COUNT: ColumnDef<ReadRun> = {
+  accessorKey: CATEGORY_CONFIGS.READ_COUNT.key,
+  // filterFn: RANGE_FILTER_FN,
+  filterFn: SELECT_FILTER_FN,
+  header: CATEGORY_CONFIGS.READ_COUNT.label,
+  meta: META,
+};
+
+const RUN_ACCESSION: ColumnDef<ReadRun> = {
+  accessorKey: CATEGORY_CONFIGS.RUN_ACCESSION.key,
+  filterFn: SELECT_FILTER_FN,
+  header: CATEGORY_CONFIGS.RUN_ACCESSION.label,
+  meta: { width: { max: "1fr", min: "140px" } },
+};
+
+const SAMPLE_ACCESSION: ColumnDef<ReadRun> = {
+  accessorKey: CATEGORY_CONFIGS.SAMPLE_ACCESSION.key,
+  filterFn: SELECT_FILTER_FN,
+  header: CATEGORY_CONFIGS.SAMPLE_ACCESSION.label,
+  meta: META,
+};
+
+const SCIENTIFIC_NAME: ColumnDef<ReadRun> = {
+  accessorKey: CATEGORY_CONFIGS.SCIENTIFIC_NAME.key,
+  filterFn: SELECT_FILTER_FN,
+  header: CATEGORY_CONFIGS.SCIENTIFIC_NAME.label,
+  meta: META,
+};
+
+const STUDY_ACCESSION: ColumnDef<ReadRun> = {
+  accessorKey: CATEGORY_CONFIGS.STUDY_ACCESSION.key,
+  filterFn: SELECT_FILTER_FN,
+  header: CATEGORY_CONFIGS.STUDY_ACCESSION.label,
+  meta: META,
+};
+
+export const columns: ColumnDef<ReadRun>[] = [
+  COLUMN_DEF.ROW_SELECTION as ColumnDef<ReadRun>,
+  RUN_ACCESSION,
+  FASTQ_FTP,
+  EXPERIMENT_ACCESSION,
+  SAMPLE_ACCESSION,
+  STUDY_ACCESSION,
+  SCIENTIFIC_NAME,
+  INSTRUMENT_PLATFORM,
+  INSTRUMENT_MODEL,
+  LIBRARY_STRATEGY,
+  LIBRARY_LAYOUT,
+  READ_COUNT,
+  BASE_COUNT,
+];