From 3f0cbf3edd6dbde141c039d01f6ad076d596ff3f Mon Sep 17 00:00:00 2001
From: Nathan LeRoy <NLeRoy917@gmail.com>
Date: Thu, 22 Feb 2024 09:41:23 -0500
Subject: [PATCH] checkbox to disable popup for large sample tables

---
 .../modals/sample-table-too-large.tsx         | 27 ++++++++++++++-----
 web/src/components/tables/sample-table.tsx    | 14 +++++-----
 web/src/pages/Project.tsx                     |  7 +++--
 3 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/web/src/components/modals/sample-table-too-large.tsx b/web/src/components/modals/sample-table-too-large.tsx
index f0600e4a..cff7d4af 100644
--- a/web/src/components/modals/sample-table-too-large.tsx
+++ b/web/src/components/modals/sample-table-too-large.tsx
@@ -1,5 +1,7 @@
 import { FC } from 'react';
-import { Modal } from 'react-bootstrap';
+import { FormCheck, Modal } from 'react-bootstrap';
+
+import { useLocalStorage } from '../../hooks/useLocalStorage';
 
 interface Props {
   show: boolean;
@@ -8,6 +10,7 @@ interface Props {
 }
 
 export const LargeSampleTableModal: FC<Props> = ({ show, onHide, namespace }) => {
+  const [_, setHideLargeSampleTableModal] = useLocalStorage('hideLargeSampleTableModal', 'false');
   return (
     <Modal
       centered
@@ -33,16 +36,28 @@ export const LargeSampleTableModal: FC<Props> = ({ show, onHide, namespace }) =>
           Use the dropdown in the top right to select a view, or use the API directly to fetch slices of the sample
           table.
         </p>
+        <form>
+          <input
+            type="checkbox"
+            id="dont-show-again"
+            className="form-check-input"
+            onChange={(e) => {
+              if (e.target.checked) {
+                setHideLargeSampleTableModal('true');
+              } else {
+                setHideLargeSampleTableModal('false');
+              }
+            }}
+          />
+          <label htmlFor="dont-show-again" className="ms-1 form-check-label">
+            Don't show this message again
+          </label>
+        </form>
       </Modal.Body>
       <Modal.Footer>
         <button onClick={onHide} type="button" className="btn btn-dark">
           Dismiss
         </button>
-        <a href={namespace ? `/${namespace}` : '/'}>
-          <button type="button" className="btn btn-outline-dark" onClick={onHide}>
-            Back
-          </button>
-        </a>
       </Modal.Footer>
     </Modal>
   );
diff --git a/web/src/components/tables/sample-table.tsx b/web/src/components/tables/sample-table.tsx
index 70e4b5b0..19f47a1e 100644
--- a/web/src/components/tables/sample-table.tsx
+++ b/web/src/components/tables/sample-table.tsx
@@ -1,6 +1,6 @@
 import { HotTable } from '@handsontable/react';
-import { FC } from 'react';
 import Handsontable from 'handsontable';
+import { FC } from 'react';
 
 import { Sample } from '../../../types';
 import { arraysToSampleList, sampleListToArrays } from '../../utils/sample-table';
@@ -47,19 +47,19 @@ export const SampleTable: FC<Props> = ({ data, readOnly = false, onChange, heigh
           colHeaders={true}
           renderer={(instance, td, row, col, prop, value, cellProperties) => {
             Handsontable.renderers.TextRenderer.apply(this, [instance, td, row, col, prop, value, cellProperties]);
-            td.innerHTML = `<div class="truncated">${value || '' }</div>`
+            td.innerHTML = `<div class="truncated">${value || ''}</div>`;
             td.addEventListener('click', function (event) {
-                const innerDiv = td.querySelector('.truncated');
-                if (innerDiv && event.target === innerDiv) {
-                    innerDiv.classList.toggle('expanded');
-                }
+              const innerDiv = td.querySelector('.truncated');
+              if (innerDiv && event.target === innerDiv) {
+                innerDiv.classList.toggle('expanded');
+              }
             });
           }}
           dropdownMenu={true}
           hiddenColumns={{
             indicators: true,
           }}
-          minCols={1}
+          minCols={5}
           minRows={minRows || 50}
           contextMenu={[
             'row_above',
diff --git a/web/src/pages/Project.tsx b/web/src/pages/Project.tsx
index a6a1834b..9879653a 100644
--- a/web/src/pages/Project.tsx
+++ b/web/src/pages/Project.tsx
@@ -1,7 +1,7 @@
 import { FC, Fragment, MouseEvent, forwardRef, useEffect, useRef, useState } from 'react';
 import { Breadcrumb, Dropdown } from 'react-bootstrap';
-import { set } from 'react-hook-form';
 import { useParams, useSearchParams } from 'react-router-dom';
+import { useLocalStorage } from 'usehooks-ts';
 
 import { Sample } from '../../types';
 import { StatusIcon } from '../components/badges/status-icons';
@@ -66,6 +66,9 @@ export const ProjectPage: FC = () => {
   // user info
   const { user, jwt, login } = useSession();
 
+  // auto-dismiss popup for large sample tables
+  const [hideLargeSampleTableModal] = useLocalStorage('hideLargeSampleTableModal', 'false');
+
   // os info
   const os = getOS();
 
@@ -169,7 +172,7 @@ export const ProjectPage: FC = () => {
   }, [fork]);
 
   useEffect(() => {
-    if (projectInfo !== undefined) {
+    if (projectInfo !== undefined && hideLargeSampleTableModal === 'false') {
       setShowLargeSampleTableModal(!fetchSampleTable);
     }
   }, [fetchSampleTable, projectInfo]);