[Platform]: table loading state (#627)

* feat: table skeleton loading row * feat: downloads page loading table * fix: table loading * feat: using table and chart loading
opentargets · Jan 15, 2025 · 622d918 · 622d918
1 parent 1dec32b
commit 622d918
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 67 deletions.
diff --git a/apps/platform/src/pages/DownloadsPage/DownloadsPage.jsx b/apps/platform/src/pages/DownloadsPage/DownloadsPage.jsx
@@ -1,12 +1,12 @@
 import { Fragment, useState, useEffect } from "react";
 import { gql, useQuery } from "@apollo/client";
-import { Paper, Box, Chip, Typography, Alert, AlertTitle, CircularProgress } from "@mui/material";
+import { Paper, Box, Chip, Typography, Alert, AlertTitle } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import { Link, OtTable } from "ui";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAlignLeft } from "@fortawesome/free-solid-svg-icons";
 
-import { defaultRowsPerPageOptions, formatMap } from "../../constants";
+import { formatMap } from "../../constants";
 import DownloadsDrawer from "./DownloadsDrawer";
 import datasetMappings from "./dataset-mappings.json";
 import config from "../../config";
@@ -183,21 +183,14 @@ function DownloadsPage() {
         </Alert>
       ) : null}
 
-      {loadingDownloadsData && (
-        <Box display="flex" justifyContent="center">
-          <CircularProgress />
-        </Box>
-      )}
-
-      {loadingDownloadsData || loading || error ? null : (
+      {error ? null : (
         <Paper variant="outlined" elevation={0}>
           <Box m={2}>
             <OtTable
               showGlobalFilter
               columns={columns}
               rows={rows}
-              loading={loadingDownloadsData}
-              rowsPerPageOptions={defaultRowsPerPageOptions}
+              loading={loadingDownloadsData || loading}
             />
           </Box>
         </Paper>

diff --git a/packages/sections/src/study/GWASCredibleSets/Body.tsx b/packages/sections/src/study/GWASCredibleSets/Body.tsx
@@ -186,7 +186,6 @@ function Body({ id, entity }: BodyProps): ReactElement {
       definition={definition}
       entity={entity}
       request={request}
-      showContentLoading
       loadingMessage="Loading data. This may take some time..."
       renderDescription={() => <Description studyId={request.data?.study.id} />}
       renderBody={() => (

diff --git a/packages/sections/src/variant/GWASCredibleSets/Body.tsx b/packages/sections/src/variant/GWASCredibleSets/Body.tsx
@@ -191,7 +191,7 @@ function getColumns({ id, referenceAllele, alternateAllele }: getColumnsType) {
       filterValue: ({ confidence }) => credsetConfidenceMap[confidence],
     },
     {
-      id: "topL2G",
+      id: "l2Gpredictions",
       label: "Top L2G",
       filterValue: ({ l2GPredictions }) => l2GPredictions?.rows[0]?.target?.approvedSymbol,
       tooltip: "Top gene prioritised by our locus-to-gene model",

diff --git a/packages/sections/src/variant/InSilicoPredictors/Body.tsx b/packages/sections/src/variant/InSilicoPredictors/Body.tsx
@@ -70,6 +70,8 @@ export function Body({ id, entity }: BodyProps): ReactElement {
     variables,
   });
 
+  const rows = getSortedRows(request);
+
   return (
     <SectionItem
       definition={definition}
@@ -84,7 +86,6 @@ export function Body({ id, entity }: BodyProps): ReactElement {
         />
       )}
       renderChart={() => {
-        const rows = getSortedRows(request);
         return (
           <InSilicoPredictorsVisualisation
             data={rows}
@@ -95,7 +96,6 @@ export function Body({ id, entity }: BodyProps): ReactElement {
         );
       }}
       renderBody={() => {
-        const rows = getSortedRows(request);
         return (
           <OtTable
             columns={columns}

diff --git a/packages/sections/src/variant/InSilicoPredictors/InSilicoPredictorsPlot.tsx b/packages/sections/src/variant/InSilicoPredictors/InSilicoPredictorsPlot.tsx
@@ -2,7 +2,7 @@ import { useRef, useEffect } from "react";
 import * as PlotLib from "@observablehq/plot";
 import { rgb } from "d3";
 import { useMeasure } from "@uidotdev/usehooks";
-import { Box, Fade, linkClasses } from "@mui/material";
+import { Box, Fade, linkClasses, Skeleton } from "@mui/material";
 import { grey } from "@mui/material/colors";
 import { DataDownloader } from "ui";
 
@@ -20,8 +20,9 @@ const PRIORITISATION_COLORS = [
   rgb("#2f735f"),
 ];
 
-function InSilicoPredictorsPlot({ data, query, variables, columns }) {
+function InSilicoPredictorsPlot({ data, query, variables, columns, loading }) {
   const [ref, { width }] = useMeasure();
+  if (loading) return <Skeleton sx={{ height: 325 }} variant="rectangular" />;
   return (
     <div>
       <Box>

diff --git a/packages/ui/src/components/OtTable/OtTable.tsx b/packages/ui/src/components/OtTable/OtTable.tsx
@@ -1,5 +1,5 @@
-import { ReactElement, ReactNode, useEffect, useState } from "react";
-import { Box, CircularProgress, Grid, IconButton, NativeSelect, Skeleton } from "@mui/material";
+import { ReactElement, ReactNode, useEffect, useMemo, useState } from "react";
+import { Box, Grid, IconButton, NativeSelect, Skeleton } from "@mui/material";
 import {
   useReactTable,
   ColumnFiltersState,
@@ -26,7 +26,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import OtTableColumnFilter from "./OtTableColumnFilter";
 // import { naLabel } from "../../constants";
 import OtTableSearch from "./OtTableSearch";
-import { loadingTableRows, OtTableProps } from "./table.types";
+import { OtTableProps } from "./table.types";
 import {
   FontAwesomeIconPadded,
   OtTableContainer,
@@ -79,7 +79,6 @@ const searchFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
 
 function OtTable({
   showGlobalFilter = true,
-  tableDataLoading = false,
   columns = [],
   rows = [],
   verticalHeaders = false,
@@ -97,18 +96,25 @@ function OtTable({
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
 
   const mappedColumns = mapTableColumnToTanstackColumns(columns);
-  // const loadingRows = getLoadingRows(mappedColumns, 10);
+  const loadingRows = getLoadingRows(10);
+  const loadingCells = getLoadingCells(mappedColumns);
+
+  const tableData = useMemo(() => (loading ? loadingRows : rows), [loading]);
+  const tableColumns = useMemo(() => (loading ? loadingCells : mappedColumns), [loading]);
+
+  function getCellData(cell: Record<string, unknown>): ReactNode {
+    return <>{flexRender(cell.column.columnDef.cell, cell.getContext())}</>;
+  }
 
   const table = useReactTable({
-    data: rows,
-    columns: mappedColumns,
+    data: tableData,
+    columns: tableColumns,
     filterFns: {
       searchFilterFn: searchFilter,
     },
     state: {
       columnFilters,
       globalFilter,
-      loading,
     },
     initialState: {
       sorting: getDefaultSortObj(sortBy, order),
@@ -208,11 +214,8 @@ function OtTable({
                     return (
                       <OtTD key={cell.id} stickyColumn={cell.column.columnDef.sticky}>
                         <OtTableCellContainer numeric={cell.column.columnDef.numeric}>
-                          {table.getState().loading ? (
-                            <Skeleton sx={{ minWidth: "50px" }} variant="text" />
-                          ) : (
-                            <>{flexRender(cell.column.columnDef.cell, cell.getContext())}</>
-                          )}
+                          {getCellData(cell)}
+                          {/* {flexRender(cell.column.columnDef.cell, cell.getContext())} */}
                           {/* TODO: check NA value */}
                           {/* {Boolean(flexRender(cell.column.columnDef.cell, cell.getContext())) ||
                             naLabel} */}
@@ -241,11 +244,11 @@ function OtTable({
           padding: theme => `${theme.spacing(2)} 0 `,
         }}
       >
-        {tableDataLoading && <CircularProgress sx={{ mx: theme => theme.spacing(2) }} size={25} />}
         <div>
           <span>Rows per page:</span>
           <NativeSelect
             disableUnderline
+            disabled={loading}
             sx={{ pl: theme => theme.spacing(2) }}
             value={table.getState().pagination.pageSize}
             onChange={e => {
@@ -305,4 +308,11 @@ function OtTable({
   );
 }
 
+function getLoadingCells(columms: Array<Record<string, unknown>>) {
+  return columms.map(column => ({
+    ...column,
+    cell: () => <Skeleton sx={{ minWidth: "50px" }} variant="text" />,
+  }));
+}
+
 export default OtTable;
diff --git a/packages/ui/src/components/OtTable/table.types.ts b/packages/ui/src/components/OtTable/table.types.ts
@@ -33,7 +33,7 @@ export type OtTableProps = {
 };
 
 export type loadingTableRows = {
-  id: string;
+  id: Record<string, unknown>;
 };
 
 /*************************

diff --git a/packages/ui/src/components/OtTable/tableUtil.ts b/packages/ui/src/components/OtTable/tableUtil.ts
@@ -104,13 +104,10 @@ export function getCurrentPagePosition(
 /*****************************************************************
  * CREATES EMPTY ROWS WITH COLUMN OBJECT TO IMITATE LOADING ROWS *
  *****************************************************************/
-export function getLoadingRows(columns, size = 10): loadingTableRows[] {
-  const rowObject: Record<string, null> = {};
-  for (const e in columns) {
-    const item = columns[e].id;
-    rowObject[item] = null;
-  }
-  return new Array(size).fill(rowObject);
+export function getLoadingRows(size = 10): loadingTableRows[] {
+  const rows = new Array(size).fill({});
+  console.log(rows);
+  return rows;
 }
 
 /***********************************

diff --git a/packages/ui/src/components/Section/SectionItem.tsx b/packages/ui/src/components/Section/SectionItem.tsx
@@ -8,7 +8,7 @@ import sectionStyles from "./sectionStyles";
 import { createShortName } from "../Summary/utils";
 import PartnerLockIcon from "../PartnerLockIcon";
 import SectionViewToggle from "./SectionViewToggle";
-import { ReactNode, useState } from "react";
+import { ReactNode, useEffect, useState } from "react";
 import { VIEW } from "../../constants";
 import { SummaryLoader } from "../PublicationsDrawer";
 
@@ -46,7 +46,7 @@ function SectionItem({
   entity,
   showEmptySection = false,
   showContentLoading = false,
-  loadingMessage,
+  loadingMessage = "Loading data. This may take some time...",
   renderChart,
   defaultView = VIEW.table,
 }: SectionItemProps): ReactNode {
@@ -55,13 +55,39 @@ function SectionItem({
   const shortName = createShortName(definition);
   let hasData = false;
   const [selectedView, setSelectedView] = useState(defaultView);
+  const [showDelayLoadingMessage, setShowDelayLoadingMessage] = useState(false);
+
+  useEffect(() => {
+    const delayLoaderTimer = setTimeout(() => setShowDelayLoadingMessage(true), 5000);
+
+    return () => {
+      clearTimeout(delayLoaderTimer);
+    };
+  }, []);
 
   if (data && entity && data[entity]) {
     hasData = definition.hasData(data[entity]);
   }
 
   if (!hasData && !showEmptySection && !loading) return null;
 
+  function getSelectedView(): ReactNode {
+    if (error) return <SectionError error={error} />;
+    if (showContentLoading && loading)
+      return (
+        <>
+          <Box sx={{ display: "flex", justifyContent: "center" }}>
+            {showDelayLoadingMessage && loadingMessage}
+          </Box>
+          <Skeleton sx={{ height: 390 }} variant="rectangular" />
+        </>
+      );
+    if (selectedView === VIEW.table) return renderBody();
+    if (selectedView === VIEW.chart) return renderChart();
+    // if (!loading && !hasData && showEmptySection)
+    return <div className={classes.noData}> No data available for this {entity}. </div>;
+  }
+
   return (
     <Grid item xs={12}>
       <section>
@@ -109,32 +135,7 @@ function SectionItem({
                 </Box>
               </Box>
               <Divider />
-              <CardContent className={classes.cardContent}>
-                <>
-                  {error && <SectionError error={error} />}
-                  {showContentLoading &&
-                    loading &&
-                    (loadingMessage ? (
-                      <Box
-                        width="100%"
-                        height={390}
-                        bgcolor={theme => theme.palette.grey[100]}
-                        display="flex"
-                        flexDirection="column"
-                        justifyContent="center"
-                      >
-                        <SummaryLoader message={loadingMessage} />
-                      </Box>
-                    ) : (
-                      <Skeleton sx={{ height: 390 }} variant="rectangular" />
-                    ))}
-                  {hasData && selectedView === VIEW.table && renderBody()}
-                  {hasData && selectedView === VIEW.chart && renderChart()}
-                  {showEmptySection && (
-                    <div className={classes.noData}> No data available for this {entity}. </div>
-                  )}
-                </>
-              </CardContent>
+              <CardContent className={classes.cardContent}>{getSelectedView()}</CardContent>
             </ErrorBoundary>
           </Card>
         </Element>