[Platform]: fix section/table crash (#521)

opentargets · Nov 7, 2024 · 79e7e35 · 79e7e35
1 parent 9062be4
commit 79e7e35
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 27 deletions.
diff --git a/packages/ui/src/components/OtTable/OtTable.tsx b/packages/ui/src/components/OtTable/OtTable.tsx
@@ -95,20 +95,20 @@ function OtTable({
 }: OtTableProps): ReactElement {
   const [globalFilter, setGlobalFilter] = useState("");
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-  const [data, setData] = useState<Record<string, unknown>[] | loadingTableRows[]>([]);
 
   const mappedColumns = mapTableColumnToTanstackColumns(columns);
-  const loadingRows = getLoadingRows(mappedColumns, 10);
+  // const loadingRows = getLoadingRows(mappedColumns, 10);
 
   const table = useReactTable({
-    data,
+    data: rows,
     columns: mappedColumns,
     filterFns: {
       searchFilterFn: searchFilter,
     },
     state: {
       columnFilters,
       globalFilter,
+      loading,
     },
     initialState: {
       sorting: getDefaultSortObj(sortBy, order),
@@ -123,16 +123,6 @@ function OtTable({
     getFacetedUniqueValues: getFacetedUniqueValues(),
   });
 
-  function getCellData(cell: ReactNode): ReactNode {
-    if (loading) return <Skeleton sx={{ minWidth: "50px" }} variant="text" />;
-    return <>{cell}</>;
-  }
-
-  useEffect(() => {
-    const displayRows = loading ? loadingRows : rows;
-    setData(displayRows);
-  }, [loading]);
-
   return (
     <div>
       {/* Global Search */}
@@ -218,8 +208,11 @@ function OtTable({
                     return (
                       <OtTD key={cell.id} stickyColumn={cell.column.columnDef.sticky}>
                         <OtTableCellContainer numeric={cell.column.columnDef.numeric}>
-                          {getCellData(flexRender(cell.column.columnDef.cell, cell.getContext()))}
-                          {/* {flexRender(cell.column.columnDef.cell, cell.getContext())} */}
+                          {table.getState().loading ? (
+                            <Skeleton sx={{ minWidth: "50px" }} variant="text" />
+                          ) : (
+                            <>{flexRender(cell.column.columnDef.cell, cell.getContext())}</>
+                          )}
                           {/* TODO: check NA value */}
                           {/* {Boolean(flexRender(cell.column.columnDef.cell, cell.getContext())) ||
                             naLabel} */}

diff --git a/packages/ui/src/components/Section/SectionItem.tsx b/packages/ui/src/components/Section/SectionItem.tsx
@@ -40,7 +40,6 @@ function SectionItem({
   request,
   renderDescription,
   renderBody,
-  tags,
   chipText,
   entity,
   showEmptySection = false,
@@ -60,16 +59,6 @@ function SectionItem({
 
   if (!hasData && !showEmptySection && !loading) return null;
 
-  function getSelectedView(): ReactNode {
-    if (error) return <SectionError error={error} />;
-    if (showContentLoading && loading)
-      return <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>
@@ -117,7 +106,19 @@ function SectionItem({
                 </Box>
               </Box>
               <Divider />
-              <CardContent className={classes.cardContent}>{getSelectedView()}</CardContent>
+              <CardContent className={classes.cardContent}>
+                <>
+                  {error && <SectionError error={error} />}
+                  {showContentLoading && loading && (
+                    <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>
             </ErrorBoundary>
           </Card>
         </Element>