From c4b5c31111a8862d6552b402b218f0f320ee067b Mon Sep 17 00:00:00 2001
From: Khoroshevskyi <sasha99250@gmail.com>
Date: Fri, 7 Jun 2024 09:50:46 -0400
Subject: [PATCH] updated search window

---
 .../search/search-results-table.tsx           | 193 ++++++++++--------
 1 file changed, 105 insertions(+), 88 deletions(-)

diff --git a/ui/src/components/search/search-results-table.tsx b/ui/src/components/search/search-results-table.tsx
index 0a108be..61f6010 100644
--- a/ui/src/components/search/search-results-table.tsx
+++ b/ui/src/components/search/search-results-table.tsx
@@ -1,97 +1,114 @@
-import { ProgressBar } from 'react-bootstrap';
-import { components } from '../../../bedbase-types';
-import { roundToTwoDecimals } from '../../utils';
-import { useBedCart } from '../../contexts/bedcart-context';
+import {ProgressBar} from 'react-bootstrap';
+import {components} from '../../../bedbase-types';
+import {roundToTwoDecimals} from '../../utils';
+import {useBedCart} from '../../contexts/bedcart-context';
+import {OverlayTrigger, Tooltip} from 'react-bootstrap';
 import toast from 'react-hot-toast';
 
 type SearchResponse = components['schemas']['BedListSearchResult'];
 
 type Props = {
-  results: SearchResponse;
+    results: SearchResponse;
 };
 
 export const SearchResultsTable = (props: Props) => {
-  const { results } = props;
-  const { cart, addBedToCart, removeBedFromCart } = useBedCart();
-  return (
-    <table className="table text-sm">
-      <thead>
-        <tr>
-          <th scope="col">Name</th>
-          <th scope="col">Genome</th>
-          <td scope="col">Cell Type</td>
-          <th scope="col">Description</th>
-          <th scope="col">Score</th>
-          {/* <th scope="col">BEDbase ID</th> */}
-          <th scope="col">Submitted</th>
-          <th scope="col" style={{ minWidth: '140px' }}>
-            Actions
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        {results.results?.map((result) => (
-          <tr key={result.id}>
-            <td>{result?.metadata?.name || 'No name'}</td>
-            <td>
-              <span className="badge text-bg-primary">{result?.payload.genome || 'N/A'}</span>
-            </td>
-            <td>{result?.payload.cell_type || 'No cell type'}</td>
-            <td className="text-truncate">{result?.payload.description || 'No description'}</td>
-            <td>
-              <ProgressBar
-                min={5}
-                now={result.score * 100}
-                label={`${roundToTwoDecimals(result.score * 100)}`}
-                variant="primary"
-              />
-            </td>
-            {/* <td>{result?.metadata?.id || 'No id'}</td> */}
-            <td>
-              {result?.metadata?.submission_date === undefined
-                ? 'No date'
-                : new Date(result.metadata?.submission_date).toLocaleDateString()}
-            </td>
-
-            <td>
-              <a className="me-1" href={`/bed/${result.metadata?.id}`}>
-                <button className="btn btn-sm btn-outline-primary">
-                  <i className="bi bi-eye"></i>
-                </button>
-              </a>
-              {cart.includes(result?.metadata?.id || '') ? (
-                <button
-                  className="btn btn-sm btn-outline-danger"
-                  onClick={() => {
-                    if (result.metadata?.id === undefined) {
-                      toast.error('No bed ID found', { position: 'top-center' });
-                      return;
-                    }
-                    removeBedFromCart(result.metadata?.id);
-                  }}
-                >
-                  Remove
-                  <i className="bi bi-cart-dash ms-1"></i>
-                </button>
-              ) : (
-                <button
-                  className="btn btn-sm btn-outline-primary"
-                  onClick={() => {
-                    if (result.metadata?.id === undefined) {
-                      toast.error('No bed ID found', { position: 'top-center' });
-                      return;
-                    }
-                    addBedToCart(result.metadata?.id || '');
-                  }}
-                >
-                  Add
-                  <i className="bi bi-cart-plus ms-1"></i>
-                </button>
-              )}
-            </td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  );
+    const {results} = props;
+    const {cart, addBedToCart, removeBedFromCart} = useBedCart();
+    return (
+        <table className="table text-sm">
+            <thead>
+            <tr>
+                <th scope="col">Name</th>
+                <th scope="col">Genome</th>
+                <th scope="col">Tissue</th>
+                <th scope="col">Cell Type</th>
+                <th scope="col">Antibody</th>
+                <th scope="col">Description</th>
+                <th scope="col">Score</th>
+                {/* <th scope="col">BEDbase ID</th> */}
+                <th scope="col" style={{minWidth: '140px'}}>
+                    Actions
+                </th>
+            </tr>
+            </thead>
+            <tbody>
+            {results.results?.map((result) => (
+                <tr key={result.id}>
+                    <td>{result?.metadata?.name || 'No name'}</td>
+                    <td>
+                        <span className="badge text-bg-primary">{result?.payload.genome || 'N/A'}</span>
+                    </td>
+                    <td>{result?.payload.tissue || 'N/A'}</td>
+                    <td>{result?.payload.cell_type || 'N/A'}</td>
+                    <td>{result?.payload.antibody || 'N/A'}</td>
+                    {/*<td className="text-truncate">{result?.payload.description || 'No description'}</td>*/}
+                    {/*<td className="bi bi-info-circle text-truncate text-center"></td>*/}
+                    <td className="text-center">
+                        <OverlayTrigger
+                            placement="top"
+                            overlay={
+                                <Tooltip id={`tooltip-${result.id}`}>
+                                    {result?.payload.description || 'No description'}
+                                </Tooltip>
+                            }
+                        >
+                            <span className="bi bi-info-circle"></span>
+                        </OverlayTrigger>
+                    </td>
+                    <td>
+                        <ProgressBar
+                            min={5}
+                            now={result.score * 100}
+                            label={`${roundToTwoDecimals(result.score * 100)}`}
+                            variant="primary"
+                        />
+                    </td>
+                    {/* <td>{result?.metadata?.id || 'No id'}</td> */}
+                    {/*<td>*/}
+                    {/*  /!*{result?.metadata?.submission_date === undefined*!/*/}
+                    {/*  /!*  ? 'No date'*!/*/}
+                    {/*  /!*  : new Date(result.metadata?.submission_date).toLocaleDateString()}*!/\*/}
+                    {/*  */}
+                    {/*</td>*/}
+                    <td>
+                        <a className="me-1" href={`/bed/${result.metadata?.id}`}>
+                            <button className="btn btn-sm btn-outline-primary">
+                                <i className="bi bi-eye"></i>
+                            </button>
+                        </a>
+                        {cart.includes(result?.metadata?.id || '') ? (
+                            <button
+                                className="btn btn-sm btn-outline-danger"
+                                onClick={() => {
+                                    if (result.metadata?.id === undefined) {
+                                        toast.error('No bed ID found', {position: 'top-center'});
+                                        return;
+                                    }
+                                    removeBedFromCart(result.metadata?.id);
+                                }}
+                            >
+                                Remove
+                                <i className="bi bi-cart-dash ms-1"></i>
+                            </button>
+                        ) : (
+                            <button
+                                className="btn btn-sm btn-outline-primary"
+                                onClick={() => {
+                                    if (result.metadata?.id === undefined) {
+                                        toast.error('No bed ID found', {position: 'top-center'});
+                                        return;
+                                    }
+                                    addBedToCart(result.metadata?.id || '');
+                                }}
+                            >
+                                Add
+                                <i className="bi bi-cart-plus ms-1"></i>
+                            </button>
+                        )}
+                    </td>
+                </tr>
+            ))}
+            </tbody>
+        </table>
+    );
 };