35423 Add Results tab to Generic Molecular Analysis

- Implemented Action button and column

packages/common-ui/lib/index.ts

@@ -123,3 +123,4 @@ export * from "./instance/useInstanceContext";
 export * from "./label/FieldLabel";
 export * from "./visibility/useIsVisible";
 export * from "./table/ScientificNameCell";
+export * from "./settings-button/SettingsButton";

packages/common-ui/lib/settings-button/SettingsButton.css

@@ -0,0 +1,59 @@
+/* SettingsButton Container */
+.settings-button-container {
+  position: relative; /* Make this the positioning context for the dropdown menu */
+  display: flex;
+  justify-content: center; /* Center horizontally */
+  align-items: center; /* Center vertically */
+  height: 100%; /* Ensures full height for proper vertical alignment */
+}
+
+.settings-container {
+  position: relative;
+  display: inline-block;
+}
+
+/* SettingsButton */
+.settings-button {
+  border: none;
+  cursor: pointer;
+  font-size: 20px;
+  background: grey; /* Grey background */
+  color: white; /* White ellipsis */
+  border-radius: 5px; /* Round borders */
+}
+
+.settings-button:focus {
+  outline: none;
+}
+
+.settings-button:hover {
+  background: darkgray; /* Color change on hover */
+}
+
+/* SettingsButton menu*/
+.settings-dropdown-menu {
+  position: absolute;
+  background: white;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  z-index: 9500;
+  margin-top: 4px; /* Slight gap below the button */
+  width: 12rem;
+}
+
+/* SettingsButton dropdown item*/
+.settings-dropdown-item {
+  display: block;
+  width: 100%;
+  padding: 8px 16px;
+  text-align: left;
+  background: none;
+  border: none;
+  cursor: pointer;
+  z-index: 9500;
+}
+
+.settings-dropdown-item:hover {
+  background: #f0f0f0;
+}

packages/common-ui/lib/settings-button/SettingsButton.tsx

@@ -0,0 +1,49 @@
+import React, { useState, useRef } from "react";
+import "./SettingsButton.css"; // For styling
+
+interface SettingsButtonProps {
+  menuItems: JSX.Element[];
+}
+
+export function SettingsButton({ menuItems }: SettingsButtonProps) {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  // Close the menu if clicked outside
+  const handleClickOutside = (event) => {
+    if (menuRef.current && !menuRef.current.contains(event.target)) {
+      setMenuOpen(false);
+    }
+  };
+
+  React.useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div className="settings-container" ref={menuRef}>
+      <button
+        className="settings-button"
+        onClick={() => setMenuOpen((prev) => !prev)}
+      >
+        &#x22EE; {/* Unicode for vertical ellipsis */}
+      </button>
+      {menuOpen && (
+        <div className="settings-dropdown-menu">
+          {menuItems.map((element, index) => {
+            return (
+              <div className="settings-dropdown-item" key={index}>
+                {element}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default SettingsButton;

packages/common-ui/lib/table/react-table.css

@@ -36,7 +36,6 @@
 .ReactTable td {
   text-overflow: ellipsis;
   padding: 7px 5px;
-  overflow: hidden;
   transition: 0.3s ease;
   transition-property: width, min-width, padding, opacity;
   white-space: normal;

packages/dina-ui/components/collection/material-sample/SplitMaterialSampleDropdownButton.tsx

@@ -4,7 +4,7 @@ import { writeStorage } from "@rehooks/local-storage";
 import { BULK_SPLIT_IDS, Tooltip, useAccount, useQuery } from "common-ui";
 import Dropdown from "react-bootstrap/Dropdown";
 import Select from "react-select";
-import React, { useState } from "react";
+import React, { CSSProperties, useState } from "react";
 import Button from "react-bootstrap/Button";
 import { SplitConfiguration } from "../../../types/collection-api/resources/SplitConfiguration";
 
@@ -26,13 +26,15 @@ interface SplitMaterialSampleDropdownButtonProps {
   disabled: boolean;
   materialSampleType?: string;
   className?: string;
+  style?: CSSProperties;
 }
 
 export function SplitMaterialSampleDropdownButton({
   ids,
   disabled,
   materialSampleType,
-  className
+  className,
+  style
 }: SplitMaterialSampleDropdownButtonProps) {
   const router = useRouter();
   const { groupNames, username } = useAccount();
@@ -157,7 +159,7 @@ export function SplitMaterialSampleDropdownButton({
     />
   ) : (
     <Dropdown>
-      <Dropdown.Toggle className={className ? className : "me-2"}>
+      <Dropdown.Toggle className={className ? className : "me-2"} style={style}>
         <DinaMessage id="splitButton" />
       </Dropdown.Toggle>
       <Dropdown.Menu as={CustomMenu} />

packages/dina-ui/components/molecular-analysis/useMolecularAnalysisRun.tsx

@@ -9,9 +9,12 @@ import {
 } from "react";
 import {
   BulkGetOptions,
+  DeleteButton,
+  EditButton,
   FieldHeader,
   filterBy,
   SaveArgs,
+  SettingsButton,
   useApiClient,
   useQuery,
   useStringComparator
@@ -36,6 +39,7 @@ import {
 } from "./useMetagenomicsWorkflowMolecularAnalysisRun";
 import { QualityControl } from "packages/dina-ui/types/seqdb-api/resources/QualityControl";
 import useVocabularyOptions from "../collection/useVocabularyOptions";
+import { SplitMaterialSampleDropdownButton } from "../collection/material-sample/SplitMaterialSampleDropdownButton";
 
 export interface UseMolecularAnalysisRunProps {
   seqBatchId: string;
@@ -861,6 +865,7 @@ export function getMolecularAnalysisRunColumns(
   >,
   readOnly?: boolean
 ) {
+  const { save } = useApiClient();
   // Table columns to display for the sequencing run.
   const SEQ_REACTION_COLUMNS: ColumnDef<SequencingRunItem>[] = [
     {
@@ -1195,7 +1200,54 @@ export function getMolecularAnalysisRunColumns(
       {
         id: "action",
         cell: ({ row: { original } }) => {
-          return <></>;
+          return (
+            <div className="settings-button-container">
+              <SettingsButton
+                menuItems={[
+                  <EditButton
+                    entityId={original.materialSampleId ?? ""}
+                    entityLink="collection/material-sample"
+                    style={{ width: "10rem" }}
+                    key={0}
+                  />,
+                  <SplitMaterialSampleDropdownButton
+                    ids={[original.materialSampleId ?? ""]}
+                    disabled={
+                      !original.materialSampleSummary?.materialSampleName
+                    }
+                    style={{ width: "10rem" }}
+                    key={1}
+                  />,
+                  <DeleteButton
+                    key={2}
+                    id={original.materialSampleId}
+                    options={{ apiBaseUrl: "/collection-api" }}
+                    postDeleteRedirect="/collection/material-sample/list"
+                    type="material-sample"
+                    style={{ width: "10rem" }}
+                    onDeleted={async () => {
+                      // Delete storageUnitUsage if there is one linked
+                      if (original.storageUnitUsage?.id) {
+                        await save<StorageUnitUsage>(
+                          [
+                            {
+                              delete: {
+                                id: original.storageUnitUsage?.id ?? null,
+                                type: "storage-unit-usage"
+                              }
+                            }
+                          ],
+                          {
+                            apiBaseUrl: "/collection-api"
+                          }
+                        );
+                      }
+                    }}
+                  />
+                ]}
+              />
+            </div>
+          );
         },
         header: () => <FieldHeader name={"action"} />,
         accessorKey: "action",