feat: link atlas task counts to filtered tasks (#248) (#260)

* feat: link atlas task counts to filtered tasks (#248)

* feat: updated tasks count link to url object (#248)

* feat: added progress indicator (#248)

* feat: updated progress indicator (#248)

* chore: updated findable-ui (#248)

---------

Co-authored-by: Fran McDade <[email protected]>

app/components/Table/components/TableCell/components/TaskCountsCell/taskCountsCell.styles.ts

@@ -0,0 +1,13 @@
+import styled from "@emotion/styled";
+
+export const Cell = styled.div`
+  align-items: center;
+  display: grid;
+  gap: 4px;
+  grid-auto-flow: column;
+  justify-content: flex-start;
+
+  .MuiCircularProgress-root {
+    margin: 2px;
+  }
+`;

app/components/Table/components/TableCell/components/TaskCountsCell/taskCountsCell.tsx

@@ -0,0 +1,46 @@
+import {
+  CircularProgress,
+  CircularProgressProps,
+} from "@databiosphere/findable-ui/lib/components/common/Progress/components/CircularProgress/circularProgress";
+import {
+  Link,
+  LinkProps,
+} from "@databiosphere/findable-ui/lib/components/Links/components/Link/link";
+import { Cell } from "./taskCountsCell.styles";
+
+export interface TaskCountsCellProps {
+  label: LinkProps["label"];
+  url: LinkProps["url"];
+  value: CircularProgressProps["value"];
+}
+
+export const TaskCountsCell = ({
+  label,
+  url,
+  value,
+}: TaskCountsCellProps): JSX.Element => {
+  return (
+    <Cell>
+      <CircularProgress
+        color={getProgressColor(value)}
+        size={16}
+        thickness={6}
+        value={value}
+        variant="determinate"
+      />
+      <Link {...{ label, url }} />
+    </Cell>
+  );
+};
+
+/**
+ * Returns circular progress color.
+ * @param value - Circular progress value.
+ * @returns circular progress color.
+ */
+function getProgressColor(value = 0): CircularProgressProps["color"] {
+  if (value < 50) {
+    return "warning";
+  }
+  return "success";
+}

app/components/index.ts

@@ -25,3 +25,4 @@ export { Hero } from "./Layout/components/IndexPage/components/Hero/hero";
 export { BioNetworkCell } from "./Table/components/TableCell/components/BioNetworkCell/bioNetworkCell";
 export { AtlasCell } from "./Table/components/TableCell/components/Cell/AtlasCell/atlasCell";
 export { SourceStudyStatusCell } from "./Table/components/TableCell/components/SourceStudyStatusCell/sourceStudyStatusCell";
+export { TaskCountsCell } from "./Table/components/TableCell/components/TaskCountsCell/taskCountsCell";

app/viewModelBuilders/catalog/hca-atlas-tracker/common/viewModelBuilders.ts

@@ -1,4 +1,5 @@
 import { STATUS_BADGE_COLOR } from "@databiosphere/findable-ui/lib/components/common/StatusBadge/statusBadge";
+import { LinkProps } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link";
 import { ColumnDef, Row } from "@tanstack/react-table";
 import {
   NETWORKS,
@@ -307,15 +308,17 @@ export const buildTaskBioNetworks = (
 };
 
 /**
- * Build props for the task counts cell component.
+ * Build props for the task counts TaskCountsCell component.
  * @param atlas - Atlas entity.
- * @returns Props to be used for the cell.
+ * @returns Props to be used for the TaskCountsCell.
  */
 export const buildTaskCounts = (
   atlas: HCAAtlasTrackerListAtlas
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.TaskCountsCell> => {
   return {
-    value: `${atlas.completedTaskCount}/${atlas.taskCount}`,
+    label: `${atlas.completedTaskCount}/${atlas.taskCount}`,
+    url: getTaskCountUrlObject(atlas),
+    value: getProgressValue(atlas.completedTaskCount, atlas.taskCount),
   };
 };
 
@@ -493,6 +496,17 @@ function getDateFromIsoString(isoString: string): string {
   return /\d{4}-\d{2}-\d{2}/.exec(isoString)?.[0] ?? isoString;
 }
 
+/**
+ * Returns the progress value as a percentage.
+ * @param numerator - Numerator.
+ * @param denominator - Denominator.
+ * @returns Progress value as a percentage.
+ */
+function getProgressValue(numerator: number, denominator: number): number {
+  if (denominator === 0) return 0;
+  return (numerator / denominator) * 100;
+}
+
 /**
  * Returns source study is in Cap column def.
  * @returns Column def.
@@ -595,3 +609,25 @@ function getSourceStudyTitleColumnDef(
     header: "Title",
   };
 }
+
+/**
+ * Returns the URL object for the task count link.
+ * @param atlas - Atlas entity.
+ * @returns URL object for the task count link.
+ */
+function getTaskCountUrlObject(
+  atlas: HCAAtlasTrackerListAtlas
+): LinkProps["url"] {
+  const params = {
+    filter: [
+      {
+        categoryKey: "atlasNames",
+        value: [atlas.name],
+      },
+    ],
+  };
+  return {
+    href: ROUTE.TASKS,
+    query: encodeURIComponent(JSON.stringify(params)),
+  };
+}

package.json

@@ -16,7 +16,7 @@
     "migrate": "ts-node -O '{\"module\": \"commonjs\"}' ./scripts/migration-runner.ts -j ts"
   },
   "dependencies": {
-    "@databiosphere/findable-ui": "3.1.0",
+    "@databiosphere/findable-ui": "3.2.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@hookform/resolvers": "^3.3.4",

site-config/hca-atlas-tracker/local/index/atlasEntityConfig.ts

@@ -139,9 +139,9 @@ export const atlasEntityConfig: EntityConfig = {
       },
       {
         componentConfig: {
-          component: C.Cell,
+          component: C.TaskCountsCell,
           viewBuilder: V.buildTaskCounts,
-        } as ComponentConfig<typeof C.Cell, HCAAtlasTrackerListAtlas>,
+        } as ComponentConfig<typeof C.TaskCountsCell, HCAAtlasTrackerListAtlas>,
         header: HCA_ATLAS_TRACKER_CATEGORY_LABEL.TASK_COUNTS,
         width: { max: "0.5fr", min: "68px" },
       },