ORF table

Author: rlamacraft

src/main/webapp/ui/src/eln/gallery/components/CallableSnapGenePreview.js

@@ -489,21 +489,220 @@ function ViewAsFasta({
   );
 }
 
+const readingFrameOptions = {
+  ALL: { label: "All", filter: [-3, -2, -1, 1, 2, 3] },
+  FORWARD: { label: "Forward", filter: [1, 2, 3] },
+  REVERSE: { label: "Reverse", filter: [-1, -2, -3] },
+  FIRST_FORWARD: { label: "First forward", filter: [1] },
+  FIRST_REVERSE: { label: "First reverse", filter: [-1] },
+};
+
+const orfHeadCells = [
+  {
+    id: "fullRangeBegin",
+    numeric: false,
+    disablePadding: false,
+    label: "Full Range Begin",
+  },
+  {
+    id: "fullRangeEnd",
+    numeric: false,
+    disablePadding: false,
+    label: "Full Range End",
+  },
+  {
+    id: "molecularWeight",
+    numeric: false,
+    disablePadding: false,
+    label: "Molecular Weight",
+  },
+  {
+    id: "readingFrame",
+    numeric: false,
+    disablePadding: false,
+    label: "Reading Frame",
+  },
+  {
+    id: "translation",
+    numeric: false,
+    disablePadding: false,
+    label: "Translation",
+  },
+];
+
 function OrfTable({
   show,
+  file,
   idOfOrfTableTab,
 }: {|
   show: boolean,
+  file: GalleryFile,
   idOfOrfTableTab: string,
 |}) {
+  const [order, setOrder] = React.useState("desc");
+  const [orderBy, setOrderBy] = React.useState("version");
+  const [page, setPage] = React.useState(0);
+  const [rowsPerPage, setRowsPerPage] = React.useState(10);
+  const [loading, setLoading] = React.useState(true);
+  const [readingFrameOption, setReadingFrameOption] = React.useState("ALL");
+  const [results, setResults] = React.useState([]);
+  const [filteredResults, setFilteredResults] = React.useState([]);
+
+  const filterResults = (passed_results) => {
+    passed_results = passed_results || results; // in case the results are not set yet
+    const to_include = readingFrameOptions[readingFrameOption].filter;
+    const filtered = passed_results.filter((r) =>
+      to_include.includes(r.readingFrame)
+    );
+    setFilteredResults(filtered);
+  };
+
+  const fetchData = () => {
+    setLoading(true);
+
+    const url = `/molbiol/dna/orfs/${file.id}`;
+    axios
+      .get(url)
+      .then((response) => {
+        setResults(response.data.ORFs);
+        filterResults(response.data.ORFs);
+      })
+      .catch((error) => {
+        RS.confirm(error.response.data, "warning", "infinite");
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
+  React.useEffect(() => {
+    fetchData();
+    /* eslint-disable-next-line react-hooks/exhaustive-deps --
+     * - fetchData will not meaningfully change
+     */
+  }, []);
+
+  React.useEffect(() => {
+    setPage(0);
+    filterResults();
+    /* eslint-disable-next-line react-hooks/exhaustive-deps --
+     * - filterResultswill not meaningfully change
+     */
+  }, [readingFrameOption]);
+
+  const handleRequestSort = (event, property) => {
+    const isDesc = orderBy === property && order === "desc";
+    setOrder(isDesc ? "asc" : "desc");
+    setOrderBy(property);
+    setPage(0);
+  };
+
+  const handleChangePage = (event, newPage) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+  const emptyRows =
+    rowsPerPage -
+    Math.min(rowsPerPage, filteredResults.length - page * rowsPerPage);
+
   return (
-    <section
+    <Grid
+      container
+      spacing={2}
+      flexWrap="nowrap"
+      component="section"
       role="tabpanel"
       style={{ display: show ? "flex" : "none" }}
       aria-labelledby={idOfOrfTableTab}
     >
-      ORF Table
-    </section>
+      <Grid item sx={{ minWidth: 0 }}>
+        {loading && <LoadingCircular />}
+        {!loading && (
+          <>
+            <TableContainer style={{ maxHeight: "449px" }}>
+              <Table
+                stickyHeader
+                aria-labelledby="ORF table"
+                size="small"
+                aria-label="enhanced table"
+              >
+                <EnhancedTableHead
+                  headCells={orfHeadCells}
+                  order={order}
+                  orderBy={orderBy}
+                  onRequestSort={handleRequestSort}
+                  rowCount={filteredResults.length}
+                />
+                <TableBody>
+                  {stableSort(filteredResults, getSorting(order, orderBy))
+                    .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                    .map((result) => (
+                      <TableRow hover tabIndex={-1} key={result.id}>
+                        <TableCell align="left">
+                          {result.fullRangeBegin}
+                        </TableCell>
+                        <TableCell align="left">
+                          {result.fullRangeEnd}
+                        </TableCell>
+                        <TableCell align="left">
+                          {result.molecularWeight}
+                        </TableCell>
+                        <TableCell align="left">
+                          {result.readingFrame}
+                        </TableCell>
+                        <TableCell align="left">{result.translation}</TableCell>
+                      </TableRow>
+                    ))}
+                  {emptyRows > 0 && (
+                    <TableRow style={{ height: 33 * emptyRows }}>
+                      <TableCell colSpan={6} />
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+            </TableContainer>
+            <TablePagination
+              rowsPerPageOptions={paginationOptions(filteredResults.length)}
+              component="div"
+              count={filteredResults.length}
+              rowsPerPage={rowsPerPage}
+              page={page}
+              onPageChange={handleChangePage}
+              onRowsPerPageChange={handleChangeRowsPerPage}
+            />
+          </>
+        )}
+      </Grid>
+
+      <Grid item sx={{ minWidth: "200px" }}>
+        <FormControl component="fieldset">
+          <FormLabel component="legend" sx={{ textAlign: "right" }}>
+            Open Reading Frames
+          </FormLabel>
+          <RadioGroup
+            aria-label="Enzyme type"
+            name="enzymeSet"
+            value={readingFrameOption}
+            onChange={(event) => setReadingFrameOption(event.target.value)}
+          >
+            {Object.keys(readingFrameOptions).map((key) => (
+              <FormControlLabel
+                value={key}
+                key={key}
+                control={<Radio color="primary" />}
+                label={readingFrameOptions[key].label}
+                labelPlacement="start"
+              />
+            ))}
+          </RadioGroup>
+        </FormControl>
+      </Grid>
+    </Grid>
   );
 }
 
@@ -653,7 +852,7 @@ export function CallableSnapGenePreview({
                   </ListItemButton>
                 </ListItem>
               </CustomDrawer>
-              <Stack orientation="vertical" spacing={1} flexGrow={1}>
+              <Stack orientation="vertical" spacing={1} flexGrow={1} sx={{ minWidth: 0 }}>
                 <DialogContent>
                   <DnaPreview
                     show={tab === "DNA preview"}
@@ -672,6 +871,7 @@ export function CallableSnapGenePreview({
                   />
                   <OrfTable
                     show={tab === "ORF table"}
+                    file={file}
                     idOfOrfTableTab={idOfOrfTableTab}
                   />
                 </DialogContent>