feat: render primers as a colour-coded tag

davidlougheed · Oct 21, 2023 · 2105232 · 2105232
1 parent e648e5d
commit 2105232
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 7 deletions.
diff --git a/src/bits/Primer.js b/src/bits/Primer.js
@@ -0,0 +1,23 @@
+import { memo, useMemo } from "react";
+import { Tag } from "antd";
+
+const colors = [
+    "magenta",
+    "red",
+    "volcano",
+    "orange",
+    "gold",
+    "lime",
+    "green",
+    "cyan",
+    "blue",
+    "geekblue",
+    "purple",
+];
+
+const Primer = memo(({ name }) => {
+    const colorIndex = Array.from(new TextEncoder().encode(name)).reduce((acc, x) => acc + x, 0) % colors.length;
+    return <Tag color={colors[colorIndex]} style={{ margin: "0.2em 0.5em 0.2em 0" }}>{name}</Tag>;
+});
+
+export default Primer;
diff --git a/src/lib/datasets.js b/src/lib/datasets.js
@@ -1,5 +1,6 @@
 import groupBy from "lodash/groupBy";
 import { Popover } from "antd";
+import Primer from "../bits/Primer";
 
 export const PRIMER_GROUPINGS = ["Taxa_group", "Phylum", "Order", "Family", "Genus", "Final_ID"];
 
@@ -23,11 +24,9 @@ const taxaRecGroup = (arr, groupings, pathStr) => {
         const baseRecord = {
             title: isSpeciesLevel ? <span>
                 <em>{k.split("_").join(" ")}</em>{" "}
-                <Popover title="Primers" content={<ul style={{ margin: 0, paddingLeft: "1em" }}>
-                    {v.map(p => <li key={`${k}-${p["Primer_name"]}`} style={{ fontFamily: "monospace" }}>
-                        {p["Primer_name"]}
-                    </li>)}
-                </ul>}>
+                <Popover title="Primers" content={
+                    v.map(p => <Primer key={`${k}-${p["Primer_name"]}`} name={p["Primer_name"]} />)
+                }>
                     (<a href="#" onClick={preventDefault}>
                         {v.length} available {v.length === 1 ? "primer" : "primers"}
                     </a>)

diff --git a/src/steps/DatasetStep.js b/src/steps/DatasetStep.js
@@ -30,7 +30,7 @@ const DatasetStep = ({ visible, dataset, setDataset, onFinish }) => {
                     if (onParseFinish) onParseFinish();
 
                     const dataset = createDataset(data);
-                    console.log(dataset);
+                    console.debug("dataset:", dataset);
                     setDataset(dataset);
                 });
             } finally {

diff --git a/src/steps/DiscoverStep.js b/src/steps/DiscoverStep.js
@@ -21,6 +21,8 @@ import {
     Typography
 } from "antd";
 import { ArrowLeftOutlined, ArrowRightOutlined, SearchOutlined } from "@ant-design/icons";
+
+import Primer from "../bits/Primer";
 import { pluralize } from "../lib/utils";
 
 const DiscoverStep = ({ visible, dataset, onBack, onFinish }) => {
@@ -244,7 +246,7 @@ const DiscoverStep = ({ visible, dataset, onBack, onFinish }) => {
                                                         <div>
                                                             <strong>Primers:</strong><br />
                                                             {Array.from(r.primers).map((p) => (
-                                                                <Tag style={{ marginRight: "0.5em" }}>{p}</Tag>
+                                                                <Primer key={p} name={p} />
                                                             ))}
                                                         </div>
                                                         <div>