From ea0fc471c7f97f029cc044dba0c0b0db6b7f8798 Mon Sep 17 00:00:00 2001
From: Sam Park <samp1800@live.com>
Date: Mon, 17 Jun 2024 16:21:43 -0400
Subject: [PATCH 01/13] added regex checking (alphanumeric, _, -) for updating
 project name and tag for metadata modal. added conditional helper text that
 appears if user enters invalid character.

---
 .../components/forms/edit-project-meta.tsx    | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/web/src/components/forms/edit-project-meta.tsx b/web/src/components/forms/edit-project-meta.tsx
index a087596e..f0bbd512 100644
--- a/web/src/components/forms/edit-project-meta.tsx
+++ b/web/src/components/forms/edit-project-meta.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect } from 'react';
+import { FC, useEffect, useState, setState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
 
@@ -119,6 +119,20 @@ export const ProjectMetaEditForm: FC<Props> = ({
     }
   }, [newPop]);
 
+  const [checkProjectNameText, setCheckProjectNameText] = useState(false);
+  const [checkProjectTagText, setCheckProjectTagText] = useState(false);
+  const checkChar = (e) => {
+    if (!/[0-9a-zA-Z_-]/.test(e.key)) {
+      e.preventDefault();
+      if (e.target.id === 'project-name') {
+        setCheckProjectNameText(true);
+      }
+      if (e.target.id === 'project-tag') {
+        setCheckProjectTagText(true);
+      }
+    }
+  };
+  
   return (
     <form>
       <div className="mb-3 form-check form-switch">
@@ -150,7 +164,9 @@ export const ProjectMetaEditForm: FC<Props> = ({
           className="form-control"
           id="project-name"
           aria-describedby="pep-name-help"
+          onKeyDown={(e)=>checkChar(e)}
         />
+        { checkProjectNameText ? <p style = {{fontSize: '12px', color: 'gray', paddingTop: '2px' }}>Project Name must contain only alphanumeric characters, '-', or '_'.</p> : null }
       </div>
       <div className="mb-3">
         <label htmlFor="schema-tag" className="form-label">
@@ -184,7 +200,9 @@ export const ProjectMetaEditForm: FC<Props> = ({
           className="form-control"
           id="project-tag"
           aria-describedby="pep-name-help"
+          onKeyDown={(e)=>checkChar(e)}
         />
+        { checkProjectTagText ? <p style = {{fontSize: '12px', color: 'gray', paddingTop: '2px' }}>Project Tag must contain only alphanumeric characters, '-', or '_'.</p> : null }
       </div>
       <div className="mb-3">
         <label htmlFor="project-description" className="form-label">

From 0acf9b20387cd63ec739157a7b65367ceba80f5a Mon Sep 17 00:00:00 2001
From: Sam Park <samp1800@live.com>
Date: Mon, 17 Jun 2024 17:12:42 -0400
Subject: [PATCH 02/13] added check project name and tag on paste

---
 web/src/components/forms/edit-project-meta.tsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/web/src/components/forms/edit-project-meta.tsx b/web/src/components/forms/edit-project-meta.tsx
index f0bbd512..c158fb69 100644
--- a/web/src/components/forms/edit-project-meta.tsx
+++ b/web/src/components/forms/edit-project-meta.tsx
@@ -122,6 +122,7 @@ export const ProjectMetaEditForm: FC<Props> = ({
   const [checkProjectNameText, setCheckProjectNameText] = useState(false);
   const [checkProjectTagText, setCheckProjectTagText] = useState(false);
   const checkChar = (e) => {
+    console.log(e.key)
     if (!/[0-9a-zA-Z_-]/.test(e.key)) {
       e.preventDefault();
       if (e.target.id === 'project-name') {
@@ -132,6 +133,18 @@ export const ProjectMetaEditForm: FC<Props> = ({
       }
     }
   };
+  const checkPaste = (e) => {
+    console.log(e.clipboardData.getData('text'))
+    if (/[^0-9a-zA-Z_-]/.test(e.clipboardData.getData('text'))) {
+      e.preventDefault();
+      if (e.target.id === 'project-name') {
+      setCheckProjectNameText(true);
+      }
+      if (e.target.id === 'project-tag') {
+        setCheckProjectTagText(true);
+      }
+    }
+  };
   
   return (
     <form>
@@ -165,6 +178,7 @@ export const ProjectMetaEditForm: FC<Props> = ({
           id="project-name"
           aria-describedby="pep-name-help"
           onKeyDown={(e)=>checkChar(e)}
+          onPaste={(e)=>checkPaste(e)}
         />
         { checkProjectNameText ? <p style = {{fontSize: '12px', color: 'gray', paddingTop: '2px' }}>Project Name must contain only alphanumeric characters, '-', or '_'.</p> : null }
       </div>
@@ -201,6 +215,7 @@ export const ProjectMetaEditForm: FC<Props> = ({
           id="project-tag"
           aria-describedby="pep-name-help"
           onKeyDown={(e)=>checkChar(e)}
+          onPaste={(e)=>checkPaste(e)}
         />
         { checkProjectTagText ? <p style = {{fontSize: '12px', color: 'gray', paddingTop: '2px' }}>Project Tag must contain only alphanumeric characters, '-', or '_'.</p> : null }
       </div>

From cfb32cde36a54cf9496f397dbde5aac032a18c6a Mon Sep 17 00:00:00 2001
From: Sam Park <samp1800@live.com>
Date: Tue, 18 Jun 2024 12:56:30 -0400
Subject: [PATCH 03/13] switch to useEffect()

---
 .../components/forms/edit-project-meta.tsx    | 50 +++++++------------
 1 file changed, 19 insertions(+), 31 deletions(-)

diff --git a/web/src/components/forms/edit-project-meta.tsx b/web/src/components/forms/edit-project-meta.tsx
index c158fb69..2a5a0d46 100644
--- a/web/src/components/forms/edit-project-meta.tsx
+++ b/web/src/components/forms/edit-project-meta.tsx
@@ -119,32 +119,24 @@ export const ProjectMetaEditForm: FC<Props> = ({
     }
   }, [newPop]);
 
-  const [checkProjectNameText, setCheckProjectNameText] = useState(false);
-  const [checkProjectTagText, setCheckProjectTagText] = useState(false);
-  const checkChar = (e) => {
-    console.log(e.key)
-    if (!/[0-9a-zA-Z_-]/.test(e.key)) {
-      e.preventDefault();
-      if (e.target.id === 'project-name') {
-        setCheckProjectNameText(true);
-      }
-      if (e.target.id === 'project-tag') {
-        setCheckProjectTagText(true);
-      }
+  const [badName, setBadName] = useState(false);
+  const [badTag, setBadTag] = useState(false);
+
+  useEffect(() => {
+    if (/[^0-9a-zA-Z_-]/.test(newName)) {
+      setBadName(true);
+    } else {
+      setBadName(false);
     }
-  };
-  const checkPaste = (e) => {
-    console.log(e.clipboardData.getData('text'))
-    if (/[^0-9a-zA-Z_-]/.test(e.clipboardData.getData('text'))) {
-      e.preventDefault();
-      if (e.target.id === 'project-name') {
-      setCheckProjectNameText(true);
-      }
-      if (e.target.id === 'project-tag') {
-        setCheckProjectTagText(true);
-      }
+  }, [newName]);
+
+  useEffect(() => {
+    if (/[^0-9a-zA-Z_-]/.test(newTag)) {
+      setBadTag(true);
+    } else {
+      setBadTag(false);
     }
-  };
+  }, [newTag]);
   
   return (
     <form>
@@ -177,10 +169,8 @@ export const ProjectMetaEditForm: FC<Props> = ({
           className="form-control"
           id="project-name"
           aria-describedby="pep-name-help"
-          onKeyDown={(e)=>checkChar(e)}
-          onPaste={(e)=>checkPaste(e)}
         />
-        { checkProjectNameText ? <p style = {{fontSize: '12px', color: 'gray', paddingTop: '2px' }}>Project Name must contain only alphanumeric characters, '-', or '_'.</p> : null }
+        { badName ? <p className = 'text-secondary pt-1' style = {{fontSize: '.75em'}}>Project Name must contain only alphanumeric characters, '-', or '_'.</p> : null }
       </div>
       <div className="mb-3">
         <label htmlFor="schema-tag" className="form-label">
@@ -214,10 +204,8 @@ export const ProjectMetaEditForm: FC<Props> = ({
           className="form-control"
           id="project-tag"
           aria-describedby="pep-name-help"
-          onKeyDown={(e)=>checkChar(e)}
-          onPaste={(e)=>checkPaste(e)}
         />
-        { checkProjectTagText ? <p style = {{fontSize: '12px', color: 'gray', paddingTop: '2px' }}>Project Tag must contain only alphanumeric characters, '-', or '_'.</p> : null }
+        { badTag ? <p className = 'text-secondary pt-1' style = {{fontSize: '.75em'}}>Project Tag must contain only alphanumeric characters, '-', or '_'.</p> : null }
       </div>
       <div className="mb-3">
         <label htmlFor="project-description" className="form-label">
@@ -252,7 +240,7 @@ export const ProjectMetaEditForm: FC<Props> = ({
         <button
           onClick={() => mutation.mutate()}
           id="metadata-save-btn"
-          disabled={(!isDirty && isValid) || mutation.isPending}
+          disabled={(!isDirty && isValid || badName || badTag) || mutation.isPending}
           type="button"
           className="btn btn-success me-1"
         >

From ac4a07faf1efa709ca5a2d93e91c6c0b8e00ed9f Mon Sep 17 00:00:00 2001
From: Sam Park <samp1800@live.com>
Date: Tue, 18 Jun 2024 14:04:14 -0400
Subject: [PATCH 04/13] add case for when name or tag are empty

---
 .../components/forms/edit-project-meta.tsx    | 28 ++++++++++++-------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/web/src/components/forms/edit-project-meta.tsx b/web/src/components/forms/edit-project-meta.tsx
index 2a5a0d46..cd9d229d 100644
--- a/web/src/components/forms/edit-project-meta.tsx
+++ b/web/src/components/forms/edit-project-meta.tsx
@@ -119,22 +119,30 @@ export const ProjectMetaEditForm: FC<Props> = ({
     }
   }, [newPop]);
 
-  const [badName, setBadName] = useState(false);
-  const [badTag, setBadTag] = useState(false);
+  const [badName, setBadName] = useState(null);
+  const [badTag, setBadTag] = useState(null);
 
   useEffect(() => {
-    if (/[^0-9a-zA-Z_-]/.test(newName)) {
-      setBadName(true);
+    if (newName) {
+      if (/[^0-9a-zA-Z_-]/.test(newName)) {
+        setBadName("Project Name must contain only alphanumeric characters, '-', or '_'.");
+      } else {
+        setBadName(null);
+      }
     } else {
-      setBadName(false);
+      setBadName("Project Name must not be empty.");
     }
   }, [newName]);
 
   useEffect(() => {
-    if (/[^0-9a-zA-Z_-]/.test(newTag)) {
-      setBadTag(true);
+    if (newTag) {
+      if (/[^0-9a-zA-Z_-]/.test(newTag)) {
+        setBadTag("Project Tag must contain only alphanumeric characters, '-', or '_'.");
+      } else {
+        setBadTag(null);
+      }
     } else {
-      setBadTag(false);
+      setBadTag("Project Tag must not be empty.");
     }
   }, [newTag]);
   
@@ -170,7 +178,7 @@ export const ProjectMetaEditForm: FC<Props> = ({
           id="project-name"
           aria-describedby="pep-name-help"
         />
-        { badName ? <p className = 'text-secondary pt-1' style = {{fontSize: '.75em'}}>Project Name must contain only alphanumeric characters, '-', or '_'.</p> : null }
+        { badName ? <p className = 'text-secondary pt-1' style = {{fontSize: '.75em'}}>{ badName }</p> : null }
       </div>
       <div className="mb-3">
         <label htmlFor="schema-tag" className="form-label">
@@ -205,7 +213,7 @@ export const ProjectMetaEditForm: FC<Props> = ({
           id="project-tag"
           aria-describedby="pep-name-help"
         />
-        { badTag ? <p className = 'text-secondary pt-1' style = {{fontSize: '.75em'}}>Project Tag must contain only alphanumeric characters, '-', or '_'.</p> : null }
+        { badTag ? <p className = 'text-secondary pt-1' style = {{fontSize: '.75em'}}>{ badTag }</p> : null }
       </div>
       <div className="mb-3">
         <label htmlFor="project-description" className="form-label">

From 1fbfb8277cf5cde4f2757408991ec1edcdc79d7c Mon Sep 17 00:00:00 2001
From: Sam Park <samp1800@live.com>
Date: Thu, 20 Jun 2024 12:03:36 -0400
Subject: [PATCH 05/13] removed useEffect() and set variable instead. updated
 regex check in other components and updated error message contents and
 formatting. added mode: 'onChange' for formState instantation for these 3
 other components.

---
 .../components/forms/blank-project-form.tsx   | 16 ++++++---
 .../components/forms/edit-project-meta.tsx    | 34 +++----------------
 web/src/components/forms/pop-form.tsx         | 17 +++++++---
 .../components/forms/project-upload-form.tsx  | 17 +++++++---
 4 files changed, 43 insertions(+), 41 deletions(-)

diff --git a/web/src/components/forms/blank-project-form.tsx b/web/src/components/forms/blank-project-form.tsx
index 92666315..815e6279 100644
--- a/web/src/components/forms/blank-project-form.tsx
+++ b/web/src/components/forms/blank-project-form.tsx
@@ -40,6 +40,7 @@ export const BlankProjectForm: FC<Props> = ({ onHide, defaultNamespace }) => {
     control,
     formState: { isValid, errors },
   } = useForm<BlankProjectInputs>({
+    mode: 'onChange',
     defaultValues: {
       is_private: false,
       namespace: defaultNamespace || user?.login || '',
@@ -119,8 +120,8 @@ sample_table: samples.csv
           {...register('project_name', {
             required: true,
             pattern: {
-              value: /^\S+$/,
-              message: 'No spaces allowed.',
+              value: /^[a-zA-Z0-9_-]+$/,
+              message: "Project Name must contain only alphanumeric characters, '-', or '_'.",
             },
           })}
           id="blank-project-name"
@@ -129,9 +130,16 @@ sample_table: samples.csv
           placeholder="name"
         />
         <span className="mx-1 mb-1">:</span>
-        <input {...register('tag')} id="blank_tag" type="text" className="form-control" placeholder="default" />
+        <input {...register('tag', {
+          required: false,
+            pattern: {
+              value: /^[a-zA-Z0-9_-]+$/,
+              message: "Project Tag must contain only alphanumeric characters, '-', or '_'.",
+            },
+        })} id="blank_tag" type="text" className="form-control" placeholder="default" />
       </span>
-      <ErrorMessage errors={errors} name="project_name" render={({ message }) => <p>{message}</p>} />
+      <ErrorMessage errors={errors} name="project_name" render={({ message }) => message ? (<p className='text-secondary pt-1' style={{fontSize: '.75em'}}>{message}</p>) : null} />
+      <ErrorMessage errors={errors} name="tag" render={({ message }) => message ? (<p className='text-secondary pt-1' style={{fontSize: '.75em'}}>{message}</p>) : null} />
       <textarea
         id="blank_description"
         className="form-control mt-3"
diff --git a/web/src/components/forms/edit-project-meta.tsx b/web/src/components/forms/edit-project-meta.tsx
index cd9d229d..32f772b9 100644
--- a/web/src/components/forms/edit-project-meta.tsx
+++ b/web/src/components/forms/edit-project-meta.tsx
@@ -119,32 +119,8 @@ export const ProjectMetaEditForm: FC<Props> = ({
     }
   }, [newPop]);
 
-  const [badName, setBadName] = useState(null);
-  const [badTag, setBadTag] = useState(null);
-
-  useEffect(() => {
-    if (newName) {
-      if (/[^0-9a-zA-Z_-]/.test(newName)) {
-        setBadName("Project Name must contain only alphanumeric characters, '-', or '_'.");
-      } else {
-        setBadName(null);
-      }
-    } else {
-      setBadName("Project Name must not be empty.");
-    }
-  }, [newName]);
-
-  useEffect(() => {
-    if (newTag) {
-      if (/[^0-9a-zA-Z_-]/.test(newTag)) {
-        setBadTag("Project Tag must contain only alphanumeric characters, '-', or '_'.");
-      } else {
-        setBadTag(null);
-      }
-    } else {
-      setBadTag("Project Tag must not be empty.");
-    }
-  }, [newTag]);
+  const isBadName = newName ? (/[^0-9a-zA-Z_-]/.test(newName) ? "Project Name must contain only alphanumeric characters, '-', or '_'." : null) : "Project Name must not be empty."
+  const isBadTag = newTag ? (/[^0-9a-zA-Z_-]/.test(newTag) ? "Project Tag must contain only alphanumeric characters, '-', or '_'." : null) : "Project Tag must not be empty."
   
   return (
     <form>
@@ -178,7 +154,7 @@ export const ProjectMetaEditForm: FC<Props> = ({
           id="project-name"
           aria-describedby="pep-name-help"
         />
-        { badName ? <p className = 'text-secondary pt-1' style = {{fontSize: '.75em'}}>{ badName }</p> : null }
+        { isBadName ? <p className='text-secondary pt-1' style={{fontSize: '.75em'}}>{ isBadName }</p> : null }
       </div>
       <div className="mb-3">
         <label htmlFor="schema-tag" className="form-label">
@@ -213,7 +189,7 @@ export const ProjectMetaEditForm: FC<Props> = ({
           id="project-tag"
           aria-describedby="pep-name-help"
         />
-        { badTag ? <p className = 'text-secondary pt-1' style = {{fontSize: '.75em'}}>{ badTag }</p> : null }
+        { isBadTag ? <p className='text-secondary pt-1' style={{fontSize: '.75em'}}>{ isBadTag }</p> : null }
       </div>
       <div className="mb-3">
         <label htmlFor="project-description" className="form-label">
@@ -248,7 +224,7 @@ export const ProjectMetaEditForm: FC<Props> = ({
         <button
           onClick={() => mutation.mutate()}
           id="metadata-save-btn"
-          disabled={(!isDirty && isValid || badName || badTag) || mutation.isPending}
+          disabled={(!isDirty && isValid || isBadName || isBadTag) || mutation.isPending}
           type="button"
           className="btn btn-success me-1"
         >
diff --git a/web/src/components/forms/pop-form.tsx b/web/src/components/forms/pop-form.tsx
index 0670f1e4..465985a8 100644
--- a/web/src/components/forms/pop-form.tsx
+++ b/web/src/components/forms/pop-form.tsx
@@ -35,6 +35,7 @@ export const PopForm: FC<Props> = ({ onHide, defaultNamespace }) => {
     control,
     formState: { isValid, errors },
   } = useForm<POPInputs>({
+    mode: 'onChange',
     defaultValues: {
       is_private: false,
       namespace: defaultNamespace || user?.login || '',
@@ -103,8 +104,8 @@ export const PopForm: FC<Props> = ({ onHide, defaultNamespace }) => {
           {...register('project_name', {
             required: true,
             pattern: {
-              value: /^\S+$/,
-              message: 'No spaces allowed.',
+              value: /^[a-zA-Z0-9_-]+$/,
+              message: "Project Name must contain only alphanumeric characters, '-', or '_'.",
             },
           })}
           id="blank-project-name"
@@ -113,9 +114,17 @@ export const PopForm: FC<Props> = ({ onHide, defaultNamespace }) => {
           placeholder="name"
         />
         <span className="mx-1 mb-1">:</span>
-        <input {...register('tag')} id="blank_tag" type="text" className="form-control" placeholder="default" />
+        <input {...register('tag', {
+          required: false,
+            pattern: {
+              value: /^[a-zA-Z0-9_-]+$/,
+              message: "Project Tag must contain only alphanumeric characters, '-', or '_'.",
+            },
+          })}
+        id="blank_tag" type="text" className="form-control" placeholder="default" />
       </span>
-      <ErrorMessage errors={errors} name="project_name" render={({ message }) => <p>{message}</p>} />
+      <ErrorMessage errors={errors} name="project_name" render={({ message }) => message ? (<p className='text-secondary pt-1' style={{fontSize: '.75em'}}>{message}</p>) : null} />
+      <ErrorMessage errors={errors} name="tag" render={({ message }) => message ? (<p className='text-secondary pt-1' style={{fontSize: '.75em'}}>{message}</p>) : null} />
       <textarea
         id="blank_description"
         className="form-control mt-3"
diff --git a/web/src/components/forms/project-upload-form.tsx b/web/src/components/forms/project-upload-form.tsx
index c038ba96..1cc1032b 100644
--- a/web/src/components/forms/project-upload-form.tsx
+++ b/web/src/components/forms/project-upload-form.tsx
@@ -37,6 +37,7 @@ export const ProjectUploadForm: FC<Props> = ({ onHide, defaultNamespace }) => {
     setValue,
     formState: { isValid, errors },
   } = useForm<FromFileInputs>({
+    mode: 'onChange',
     defaultValues: {
       is_private: false,
       pep_schema: 'pep/2.1.0',
@@ -109,15 +110,23 @@ export const ProjectUploadForm: FC<Props> = ({ onHide, defaultNamespace }) => {
           {...register('name', {
             required: true,
             pattern: {
-              value: /^\S+$/,
-              message: 'No spaces allowed.',
+              value: /^[a-zA-Z0-9_-]+$/,
+              message: "Project Name must contain only alphanumeric characters, '-', or '_'.",
             },
           })}
         />
         <span className="mx-1 mb-1">:</span>
-        <input id="tag" type="text" className="form-control" placeholder="default" {...register('tag')} />
+        <input id="tag" type="text" className="form-control" placeholder="default" {...register('tag', {
+          required: false,
+            pattern: {
+              value: /^[a-zA-Z0-9_-]+$/,
+              message: "Project Tag must contain only alphanumeric characters, '-', or '_'.",
+            },
+          })}
+        />
       </span>
-      <ErrorMessage errors={errors} name="name" render={({ message }) => <p>{message}</p>} />
+      <ErrorMessage errors={errors} name="name" render={({ message }) => message ? (<p className='text-secondary pt-1' style={{fontSize: '.75em'}}>{message}</p>) : null} />
+      <ErrorMessage errors={errors} name="tag" render={({ message }) => message ? (<p className='text-secondary pt-1' style={{fontSize: '.75em'}}>{message}</p>): null} />
       <textarea
         id="description"
         className="form-control mt-3"

From ad1521a149d7898ee01a30607e22ed70ea7b9f59 Mon Sep 17 00:00:00 2001
From: Nathan LeRoy <NLeRoy917@gmail.com>
Date: Fri, 21 Jun 2024 13:19:42 -0400
Subject: [PATCH 06/13] remove unused import

---
 .../components/forms/blank-project-form.tsx   | 37 ++++++++++++++++---
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/web/src/components/forms/blank-project-form.tsx b/web/src/components/forms/blank-project-form.tsx
index 815e6279..81eb9c46 100644
--- a/web/src/components/forms/blank-project-form.tsx
+++ b/web/src/components/forms/blank-project-form.tsx
@@ -6,7 +6,6 @@ import { Controller, useForm } from 'react-hook-form';
 import { Sample } from '../../../types';
 import { useBlankProjectFormMutation } from '../../hooks/mutations/useBlankProjectFormMutation';
 import { useSession } from '../../hooks/useSession';
-import { GitHubAvatar } from '../badges/github-avatar';
 import { ProjectConfigEditor } from '../project/project-config';
 import { SampleTable } from '../tables/sample-table';
 import { SchemaDropdown } from './components/schemas-databio-dropdown';
@@ -130,16 +129,42 @@ sample_table: samples.csv
           placeholder="name"
         />
         <span className="mx-1 mb-1">:</span>
-        <input {...register('tag', {
-          required: false,
+        <input
+          {...register('tag', {
+            required: false,
             pattern: {
               value: /^[a-zA-Z0-9_-]+$/,
               message: "Project Tag must contain only alphanumeric characters, '-', or '_'.",
             },
-        })} id="blank_tag" type="text" className="form-control" placeholder="default" />
+          })}
+          id="blank_tag"
+          type="text"
+          className="form-control"
+          placeholder="default"
+        />
       </span>
-      <ErrorMessage errors={errors} name="project_name" render={({ message }) => message ? (<p className='text-secondary pt-1' style={{fontSize: '.75em'}}>{message}</p>) : null} />
-      <ErrorMessage errors={errors} name="tag" render={({ message }) => message ? (<p className='text-secondary pt-1' style={{fontSize: '.75em'}}>{message}</p>) : null} />
+      <ErrorMessage
+        errors={errors}
+        name="project_name"
+        render={({ message }) =>
+          message ? (
+            <p className="text-secondary pt-1" style={{ fontSize: '.75em' }}>
+              {message}
+            </p>
+          ) : null
+        }
+      />
+      <ErrorMessage
+        errors={errors}
+        name="tag"
+        render={({ message }) =>
+          message ? (
+            <p className="text-secondary pt-1" style={{ fontSize: '.75em' }}>
+              {message}
+            </p>
+          ) : null
+        }
+      />
       <textarea
         id="blank_description"
         className="form-control mt-3"

From 91bef9c0f18ff6d83941c36083b41990f29844ef Mon Sep 17 00:00:00 2001
From: Nathan LeRoy <NLeRoy917@gmail.com>
Date: Fri, 21 Jun 2024 13:24:19 -0400
Subject: [PATCH 07/13] remove some unused imports

---
 .../components/forms/edit-project-meta.tsx    | 30 ++++++++++++++-----
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/web/src/components/forms/edit-project-meta.tsx b/web/src/components/forms/edit-project-meta.tsx
index 32f772b9..440494d4 100644
--- a/web/src/components/forms/edit-project-meta.tsx
+++ b/web/src/components/forms/edit-project-meta.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect, useState, setState } from 'react';
+import { FC, useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
 
@@ -119,9 +119,17 @@ export const ProjectMetaEditForm: FC<Props> = ({
     }
   }, [newPop]);
 
-  const isBadName = newName ? (/[^0-9a-zA-Z_-]/.test(newName) ? "Project Name must contain only alphanumeric characters, '-', or '_'." : null) : "Project Name must not be empty."
-  const isBadTag = newTag ? (/[^0-9a-zA-Z_-]/.test(newTag) ? "Project Tag must contain only alphanumeric characters, '-', or '_'." : null) : "Project Tag must not be empty."
-  
+  const isBadName = newName
+    ? /[^0-9a-zA-Z_-]/.test(newName)
+      ? "Project Name must contain only alphanumeric characters, '-', or '_'."
+      : null
+    : 'Project Name must not be empty.';
+  const isBadTag = newTag
+    ? /[^0-9a-zA-Z_-]/.test(newTag)
+      ? "Project Tag must contain only alphanumeric characters, '-', or '_'."
+      : null
+    : 'Project Tag must not be empty.';
+
   return (
     <form>
       <div className="mb-3 form-check form-switch">
@@ -154,7 +162,11 @@ export const ProjectMetaEditForm: FC<Props> = ({
           id="project-name"
           aria-describedby="pep-name-help"
         />
-        { isBadName ? <p className='text-secondary pt-1' style={{fontSize: '.75em'}}>{ isBadName }</p> : null }
+        {isBadName ? (
+          <p className="text-secondary pt-1" style={{ fontSize: '.75em' }}>
+            {isBadName}
+          </p>
+        ) : null}
       </div>
       <div className="mb-3">
         <label htmlFor="schema-tag" className="form-label">
@@ -189,7 +201,11 @@ export const ProjectMetaEditForm: FC<Props> = ({
           id="project-tag"
           aria-describedby="pep-name-help"
         />
-        { isBadTag ? <p className='text-secondary pt-1' style={{fontSize: '.75em'}}>{ isBadTag }</p> : null }
+        {isBadTag ? (
+          <p className="text-secondary pt-1" style={{ fontSize: '.75em' }}>
+            {isBadTag}
+          </p>
+        ) : null}
       </div>
       <div className="mb-3">
         <label htmlFor="project-description" className="form-label">
@@ -224,7 +240,7 @@ export const ProjectMetaEditForm: FC<Props> = ({
         <button
           onClick={() => mutation.mutate()}
           id="metadata-save-btn"
-          disabled={(!isDirty && isValid || isBadName || isBadTag) || mutation.isPending}
+          disabled={(!isDirty && isValid) || isBadName || isBadTag || mutation.isPending}
           type="button"
           className="btn btn-success me-1"
         >

From 6c8fceede249b56401d764b435f9eae6a49f741a Mon Sep 17 00:00:00 2001
From: Sam Park <samp1800@live.com>
Date: Mon, 24 Jun 2024 16:58:24 -0400
Subject: [PATCH 08/13] use react-hook-form for edit-project-meta components.
 update text-secondary to text-danger

---
 .../components/forms/blank-project-form.tsx   |  4 +-
 .../components/forms/edit-project-meta.tsx    | 39 ++++++++++++-------
 web/src/components/forms/pop-form.tsx         |  4 +-
 .../components/forms/project-upload-form.tsx  |  4 +-
 4 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/web/src/components/forms/blank-project-form.tsx b/web/src/components/forms/blank-project-form.tsx
index 81eb9c46..eb6db188 100644
--- a/web/src/components/forms/blank-project-form.tsx
+++ b/web/src/components/forms/blank-project-form.tsx
@@ -148,7 +148,7 @@ sample_table: samples.csv
         name="project_name"
         render={({ message }) =>
           message ? (
-            <p className="text-secondary pt-1" style={{ fontSize: '.75em' }}>
+            <p className="text-danger pt-1" style={{ fontSize: '.75em' }}>
               {message}
             </p>
           ) : null
@@ -159,7 +159,7 @@ sample_table: samples.csv
         name="tag"
         render={({ message }) =>
           message ? (
-            <p className="text-secondary pt-1" style={{ fontSize: '.75em' }}>
+            <p className="text-danger pt-1" style={{ fontSize: '.75em' }}>
               {message}
             </p>
           ) : null
diff --git a/web/src/components/forms/edit-project-meta.tsx b/web/src/components/forms/edit-project-meta.tsx
index 440494d4..ce7c7192 100644
--- a/web/src/components/forms/edit-project-meta.tsx
+++ b/web/src/components/forms/edit-project-meta.tsx
@@ -1,3 +1,4 @@
+import { ErrorMessage } from '@hookform/error-message';
 import { FC, useEffect } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
@@ -41,8 +42,9 @@ export const ProjectMetaEditForm: FC<Props> = ({
     control,
     setValue,
     reset: resetForm,
-    formState: { isValid, isDirty },
+    formState: { isValid, isDirty, errors },
   } = useForm<FormValues>({
+    mode: 'onChange',
     defaultValues: {
       name: name,
       description: projectInfo?.description || '',
@@ -155,18 +157,23 @@ export const ProjectMetaEditForm: FC<Props> = ({
           Project Name
         </label>
         <input
-          {...register('name')}
           placeholder="Project name"
           type="text"
           className="form-control"
           id="project-name"
           aria-describedby="pep-name-help"
+          {...register('name', {
+            required: {
+              value: true,
+              message: "Project Name must not be empty.",
+            },
+            pattern: {
+              value: /^[a-zA-Z0-9_-]+$/,
+              message: "Project Name must contain only alphanumeric characters, '-', or '_'.",
+            },
+          })}
         />
-        {isBadName ? (
-          <p className="text-secondary pt-1" style={{ fontSize: '.75em' }}>
-            {isBadName}
-          </p>
-        ) : null}
+        <ErrorMessage errors={errors} name="name" render={({ message }) => message ? (<p className='text-danger pt-1' style={{fontSize: '.75em'}}>{message}</p>) : null} />
       </div>
       <div className="mb-3">
         <label htmlFor="schema-tag" className="form-label">
@@ -195,17 +202,23 @@ export const ProjectMetaEditForm: FC<Props> = ({
           Project Tag
         </label>
         <input
-          {...register('tag')}
+          // {...register('tag')}
           type="text"
           className="form-control"
           id="project-tag"
           aria-describedby="pep-name-help"
+          {...register('tag', {
+            required: {
+              value: true,
+              message: "Project Tag must not be empty.",
+            },
+            pattern: {
+              value: /^[a-zA-Z0-9_-]+$/,
+              message: "Project Tag must contain only alphanumeric characters, '-', or '_'.",
+            },
+          })}
         />
-        {isBadTag ? (
-          <p className="text-secondary pt-1" style={{ fontSize: '.75em' }}>
-            {isBadTag}
-          </p>
-        ) : null}
+        <ErrorMessage errors={errors} name="tag" render={({ message }) => message ? (<p className='text-danger pt-1' style={{fontSize: '.75em'}}>{message}</p>) : null} />
       </div>
       <div className="mb-3">
         <label htmlFor="project-description" className="form-label">
diff --git a/web/src/components/forms/pop-form.tsx b/web/src/components/forms/pop-form.tsx
index 465985a8..4a734bbc 100644
--- a/web/src/components/forms/pop-form.tsx
+++ b/web/src/components/forms/pop-form.tsx
@@ -123,8 +123,8 @@ export const PopForm: FC<Props> = ({ onHide, defaultNamespace }) => {
           })}
         id="blank_tag" type="text" className="form-control" placeholder="default" />
       </span>
-      <ErrorMessage errors={errors} name="project_name" render={({ message }) => message ? (<p className='text-secondary pt-1' style={{fontSize: '.75em'}}>{message}</p>) : null} />
-      <ErrorMessage errors={errors} name="tag" render={({ message }) => message ? (<p className='text-secondary pt-1' style={{fontSize: '.75em'}}>{message}</p>) : null} />
+      <ErrorMessage errors={errors} name="project_name" render={({ message }) => message ? (<p className='text-danger pt-1' style={{fontSize: '.75em'}}>{message}</p>) : null} />
+      <ErrorMessage errors={errors} name="tag" render={({ message }) => message ? (<p className='text-danger pt-1' style={{fontSize: '.75em'}}>{message}</p>) : null} />
       <textarea
         id="blank_description"
         className="form-control mt-3"
diff --git a/web/src/components/forms/project-upload-form.tsx b/web/src/components/forms/project-upload-form.tsx
index 1cc1032b..a299ad7b 100644
--- a/web/src/components/forms/project-upload-form.tsx
+++ b/web/src/components/forms/project-upload-form.tsx
@@ -125,8 +125,8 @@ export const ProjectUploadForm: FC<Props> = ({ onHide, defaultNamespace }) => {
           })}
         />
       </span>
-      <ErrorMessage errors={errors} name="name" render={({ message }) => message ? (<p className='text-secondary pt-1' style={{fontSize: '.75em'}}>{message}</p>) : null} />
-      <ErrorMessage errors={errors} name="tag" render={({ message }) => message ? (<p className='text-secondary pt-1' style={{fontSize: '.75em'}}>{message}</p>): null} />
+      <ErrorMessage errors={errors} name="name" render={({ message }) => message ? (<p className='text-danger pt-1' style={{fontSize: '.75em'}}>{message}</p>) : null} />
+      <ErrorMessage errors={errors} name="tag" render={({ message }) => message ? (<p className='text-danger pt-1' style={{fontSize: '.75em'}}>{message}</p>): null} />
       <textarea
         id="description"
         className="form-control mt-3"

From 23b079100c67919f6b77a028e4f422a1d3586cc3 Mon Sep 17 00:00:00 2001
From: Sam Park <samp1800@live.com>
Date: Tue, 25 Jun 2024 17:59:47 -0400
Subject: [PATCH 09/13] added name and tag error messages for fork modal. added
 combined error message for when both name and tag are bad for all components.
 added sample count to project page. cleaned up project page slightly
 (borders, padding, etc).

---
 .../components/forms/blank-project-form.tsx   | 37 +++++++++---
 .../components/forms/edit-project-meta.tsx    |  4 +-
 web/src/components/forms/pop-form.tsx         | 33 ++++++++---
 .../components/forms/project-upload-form.tsx  | 25 +++++++-
 web/src/components/modals/fork-pep.tsx        | 59 +++++++++++++++++--
 web/src/globals.css                           |  3 +-
 web/src/pages/Project.tsx                     | 21 ++++---
 7 files changed, 147 insertions(+), 35 deletions(-)

diff --git a/web/src/components/forms/blank-project-form.tsx b/web/src/components/forms/blank-project-form.tsx
index eb6db188..91a79706 100644
--- a/web/src/components/forms/blank-project-form.tsx
+++ b/web/src/components/forms/blank-project-form.tsx
@@ -26,6 +26,21 @@ interface Props {
   defaultNamespace?: string;
 }
 
+const CombinedErrorMessage = ({ errors }) => {
+  const nameError = errors.project_name?.message;
+  const tagError = errors.tag?.message;
+
+  if (nameError && tagError) {
+    return (
+      <p className='text-danger text-xs pt-1'>
+        Project Name and Tag must contain only alphanumeric characters, '-', or '_'.
+      </p>
+    );
+  }
+
+  return null;
+};
+
 export const BlankProjectForm: FC<Props> = ({ onHide, defaultNamespace }) => {
   // get user innfo
   const { user } = useSession();
@@ -115,18 +130,21 @@ sample_table: samples.csv
         </select>
         <span className="mx-1 mb-1">/</span>
         <input
+          id="blank-project-name"
+          type="text"
+          className="form-control"
+          placeholder="name"
           // dont allow any whitespace
           {...register('project_name', {
-            required: true,
+            required: {
+              value: true,
+              message: "Project Name must not be empty.",
+            },
             pattern: {
               value: /^[a-zA-Z0-9_-]+$/,
               message: "Project Name must contain only alphanumeric characters, '-', or '_'.",
             },
           })}
-          id="blank-project-name"
-          type="text"
-          className="form-control"
-          placeholder="name"
         />
         <span className="mx-1 mb-1">:</span>
         <input
@@ -143,12 +161,13 @@ sample_table: samples.csv
           placeholder="default"
         />
       </span>
+      <CombinedErrorMessage errors={errors} />
       <ErrorMessage
         errors={errors}
         name="project_name"
         render={({ message }) =>
-          message ? (
-            <p className="text-danger pt-1" style={{ fontSize: '.75em' }}>
+          message && !errors.tag ? (
+            <p className="text-danger text-xs pt-1">
               {message}
             </p>
           ) : null
@@ -158,8 +177,8 @@ sample_table: samples.csv
         errors={errors}
         name="tag"
         render={({ message }) =>
-          message ? (
-            <p className="text-danger pt-1" style={{ fontSize: '.75em' }}>
+          message && !errors.project_name ? (
+            <p className="text-danger text-xs pt-1">
               {message}
             </p>
           ) : null
diff --git a/web/src/components/forms/edit-project-meta.tsx b/web/src/components/forms/edit-project-meta.tsx
index ce7c7192..e4dd25e2 100644
--- a/web/src/components/forms/edit-project-meta.tsx
+++ b/web/src/components/forms/edit-project-meta.tsx
@@ -173,7 +173,7 @@ export const ProjectMetaEditForm: FC<Props> = ({
             },
           })}
         />
-        <ErrorMessage errors={errors} name="name" render={({ message }) => message ? (<p className='text-danger pt-1' style={{fontSize: '.75em'}}>{message}</p>) : null} />
+        <ErrorMessage errors={errors} name="name" render={({ message }) => message ? (<p className='text-danger text-xs pt-1'>{message}</p>) : null} />
       </div>
       <div className="mb-3">
         <label htmlFor="schema-tag" className="form-label">
@@ -218,7 +218,7 @@ export const ProjectMetaEditForm: FC<Props> = ({
             },
           })}
         />
-        <ErrorMessage errors={errors} name="tag" render={({ message }) => message ? (<p className='text-danger pt-1' style={{fontSize: '.75em'}}>{message}</p>) : null} />
+        <ErrorMessage errors={errors} name="tag" render={({ message }) => message ? (<p className='text-danger text-xs pt-1'>{message}</p>) : null} />
       </div>
       <div className="mb-3">
         <label htmlFor="project-description" className="form-label">
diff --git a/web/src/components/forms/pop-form.tsx b/web/src/components/forms/pop-form.tsx
index 4a734bbc..01784af5 100644
--- a/web/src/components/forms/pop-form.tsx
+++ b/web/src/components/forms/pop-form.tsx
@@ -22,6 +22,21 @@ interface Props {
   defaultNamespace?: string;
 }
 
+const CombinedErrorMessage = ({ errors }) => {
+  const nameError = errors.project_name?.message;
+  const tagError = errors.tag?.message;
+
+  if (nameError && tagError) {
+    return (
+      <p className='text-danger text-xs pt-1'>
+        Project Name and Tag must contain only alphanumeric characters, '-', or '_'.
+      </p>
+    );
+  }
+
+  return null;
+};
+
 export const PopForm: FC<Props> = ({ onHide, defaultNamespace }) => {
   // get user innfo
   const { user } = useSession();
@@ -100,18 +115,21 @@ export const PopForm: FC<Props> = ({ onHide, defaultNamespace }) => {
         </select>
         <span className="mx-1 mb-1">/</span>
         <input
+          id="blank-project-name"
+          type="text"
+          className="form-control"
+          placeholder="name"
           // dont allow any whitespace
           {...register('project_name', {
-            required: true,
+            required: {
+              value: true,
+              message: "Project Name must not be empty.",
+            },
             pattern: {
               value: /^[a-zA-Z0-9_-]+$/,
               message: "Project Name must contain only alphanumeric characters, '-', or '_'.",
             },
           })}
-          id="blank-project-name"
-          type="text"
-          className="form-control"
-          placeholder="name"
         />
         <span className="mx-1 mb-1">:</span>
         <input {...register('tag', {
@@ -123,8 +141,9 @@ export const PopForm: FC<Props> = ({ onHide, defaultNamespace }) => {
           })}
         id="blank_tag" type="text" className="form-control" placeholder="default" />
       </span>
-      <ErrorMessage errors={errors} name="project_name" render={({ message }) => message ? (<p className='text-danger pt-1' style={{fontSize: '.75em'}}>{message}</p>) : null} />
-      <ErrorMessage errors={errors} name="tag" render={({ message }) => message ? (<p className='text-danger pt-1' style={{fontSize: '.75em'}}>{message}</p>) : null} />
+      <CombinedErrorMessage errors={errors} />
+      <ErrorMessage errors={errors} name="project_name" render={({ message }) => message && !errors.tag ? (<p className='text-danger text-xs pt-1'>{message}</p>) : null} />
+      <ErrorMessage errors={errors} name="tag" render={({ message }) => message && !errors.project_name ? (<p className='text-danger text-xs pt-1'>{message}</p>) : null} />
       <textarea
         id="blank_description"
         className="form-control mt-3"
diff --git a/web/src/components/forms/project-upload-form.tsx b/web/src/components/forms/project-upload-form.tsx
index a299ad7b..cc1d4faa 100644
--- a/web/src/components/forms/project-upload-form.tsx
+++ b/web/src/components/forms/project-upload-form.tsx
@@ -24,6 +24,21 @@ interface Props {
   defaultNamespace?: string;
 }
 
+const CombinedErrorMessage = ({ errors }) => {
+  const nameError = errors.name?.message;
+  const tagError = errors.tag?.message;
+
+  if (nameError && tagError) {
+    return (
+      <p className='text-danger text-xs pt-1'>
+        Project Name and Tag must contain only alphanumeric characters, '-', or '_'.
+      </p>
+    );
+  }
+
+  return null;
+};
+
 export const ProjectUploadForm: FC<Props> = ({ onHide, defaultNamespace }) => {
   // get user info
   const { user } = useSession();
@@ -108,7 +123,10 @@ export const ProjectUploadForm: FC<Props> = ({ onHide, defaultNamespace }) => {
           placeholder="name"
           // dont allow any whitespace
           {...register('name', {
-            required: true,
+            required: {
+              value: true,
+              message: "Project Name must not be empty.",
+            },
             pattern: {
               value: /^[a-zA-Z0-9_-]+$/,
               message: "Project Name must contain only alphanumeric characters, '-', or '_'.",
@@ -125,8 +143,9 @@ export const ProjectUploadForm: FC<Props> = ({ onHide, defaultNamespace }) => {
           })}
         />
       </span>
-      <ErrorMessage errors={errors} name="name" render={({ message }) => message ? (<p className='text-danger pt-1' style={{fontSize: '.75em'}}>{message}</p>) : null} />
-      <ErrorMessage errors={errors} name="tag" render={({ message }) => message ? (<p className='text-danger pt-1' style={{fontSize: '.75em'}}>{message}</p>): null} />
+      <CombinedErrorMessage errors={errors} />
+      <ErrorMessage errors={errors} name="name" render={({ message }) => message && !errors.tag ? (<p className='text-danger text-xs pt-1'>{message}</p>) : null} />
+      <ErrorMessage errors={errors} name="tag" render={({ message }) => message && !errors.name ? (<p className='text-danger text-xs pt-1'>{message}</p>): null} />
       <textarea
         id="description"
         className="form-control mt-3"
diff --git a/web/src/components/modals/fork-pep.tsx b/web/src/components/modals/fork-pep.tsx
index 1e6edd37..b27b4f5c 100644
--- a/web/src/components/modals/fork-pep.tsx
+++ b/web/src/components/modals/fork-pep.tsx
@@ -1,3 +1,4 @@
+import { ErrorMessage } from '@hookform/error-message';
 import { FC } from 'react';
 import { Modal } from 'react-bootstrap';
 import { useForm } from 'react-hook-form';
@@ -22,6 +23,21 @@ interface ForkProjectInputs {
   is_private: boolean;
 }
 
+const CombinedErrorMessage = ({ errors }) => {
+  const projectError = errors.project?.message;
+  const tagError = errors.tag?.message;
+
+  if (projectError && tagError) {
+    return (
+      <p className='text-danger pt-1 text-xs'>
+        Project Name and Tag must contain only alphanumeric characters, '-', or '_'.
+      </p>
+    );
+  }
+
+  return null;
+};
+
 export const ForkPEPModal: FC<Props> = ({ namespace, project, tag, description, show, onHide }) => {
   const { user } = useSession();
 
@@ -30,8 +46,9 @@ export const ForkPEPModal: FC<Props> = ({ namespace, project, tag, description,
     reset: resetForm,
     register,
     watch,
-    formState: { isValid },
+    formState: { isValid, errors },
   } = useForm<ForkProjectInputs>({
+    mode: 'onChange',
     defaultValues: {
       namespace: user?.login,
       project: project,
@@ -56,6 +73,17 @@ export const ForkPEPModal: FC<Props> = ({ namespace, project, tag, description,
     onHide,
   );
 
+  const isBadName = projectName
+    ? /[^0-9a-zA-Z_-]/.test(projectName)
+      ? "Project Name must contain only alphanumeric characters, '-', or '_'."
+      : null
+    : 'Project Name must not be empty.';
+  const isBadTag = projectTag
+    ? /[^0-9a-zA-Z_-]/.test(projectTag)
+      ? "Project Tag must contain only alphanumeric characters, '-', or '_'."
+      : null
+    : 'Project Tag must not be empty.';
+
   return (
     <Modal size="lg" centered animation={false} show={show} onHide={onHide}>
       <Modal.Header closeButton>
@@ -91,19 +119,42 @@ export const ForkPEPModal: FC<Props> = ({ namespace, project, tag, description,
             </select>
             <span className="mx-1 mb-1">/</span>
             <input
-              {...register('project', { required: true })}
+              // {...register('project', { required: true })}
               type="text"
               className="form-control"
               placeholder="project name"
+              {...register('project', {
+                required: {
+                  value: true,
+                  message: "Project Name must not be empty.",
+                },
+                pattern: {
+                  value: /^[a-zA-Z0-9_-]+$/,
+                  message: "Project Name must contain only alphanumeric characters, '-', or '_'.",
+                },
+              })}
             />
             <span className="mx-1 mb-1">:</span>
             <input
-              {...register('tag', { required: true })}
+              // {...register('tag', { required: true })}
               type="text"
               className="form-control"
               placeholder="default"
+              {...register('tag', {
+                required: {
+                  value: true,
+                  message: "Project Tag must not be empty.",
+                },
+                pattern: {
+                  value: /^[a-zA-Z0-9_-]+$/,
+                  message: "Project Tag must contain only alphanumeric characters, '-', or '_'.",
+                },
+              })}
             />
           </span>
+          <CombinedErrorMessage errors={errors} />
+          <ErrorMessage errors={errors} name="project" render={({ message }) => message && !errors.tag ? (<p className='text-danger text-xs pt-1'>{message}</p>) : null} />
+          <ErrorMessage errors={errors} name="tag" render={({ message }) => message && !errors.project ? (<p className='text-danger text-xs pt-1'>{message}</p>) : null} />
           <p className="mt-1 lh-sm text-muted" style={{ fontSize: '0.9rem' }}>
             {' '}
             By default, forks are named the same as their original project. You can customize the name to distinguish it
@@ -133,7 +184,7 @@ export const ForkPEPModal: FC<Props> = ({ namespace, project, tag, description,
         </button>
         <button
           onClick={() => mutation.mutate()}
-          disabled={!isValid || mutation.isPending}
+          disabled={!isValid || isBadName || isBadTag || mutation.isPending}
           id="fork-submit-btn"
           type="submit"
           className="btn btn-success"
diff --git a/web/src/globals.css b/web/src/globals.css
index 960f2585..53ba7aa5 100644
--- a/web/src/globals.css
+++ b/web/src/globals.css
@@ -1,5 +1,6 @@
 body {
-  overflow: scroll; /* Show scrollbars */
+  /* overflow: scroll; /* Show scrollbars */
+  overflow: auto;
 }
 
 .top-z {
diff --git a/web/src/pages/Project.tsx b/web/src/pages/Project.tsx
index b730acba..5bc50f2d 100644
--- a/web/src/pages/Project.tsx
+++ b/web/src/pages/Project.tsx
@@ -256,7 +256,7 @@ export const ProjectPage: FC = () => {
   return (
     <PageLayout fullWidth footer={false} title={`${namespace}/${project}`}>
       <div>
-        <div className="d-flex flex-row align-items-start justify-content-between px-4 mb-2 mt-4">
+        <div className="d-flex flex-row align-items-start justify-content-between px-4 mb-2 mt-3">
           <div className="d-flex flex-row align-items-center w-75">
             <Breadcrumb className="fw-bold mt-1">
               <Breadcrumb.Item href="/">home</Breadcrumb.Item>
@@ -285,7 +285,7 @@ export const ProjectPage: FC = () => {
                     : 'Loading'}
                 </span>
                 <button
-                  className="btn btn-sm btn-link-dark shadow-none ms-1 pe-2"
+                  className="btn btn-sm btn-link-dark border-0 shadow-none ms-1 pe-2"
                   onClick={() => {
                     copyToClipboard(`${projectInfo?.namespace}/${projectInfo?.name}:${projectInfo?.tag || 'default'}`);
                     setCopied(true);
@@ -389,7 +389,7 @@ export const ProjectPage: FC = () => {
             </button>
           </div>
         </div>
-        <div className="d-flex flex-row align-items-center justify-content-between px-4 w-100 border-bottom">
+        <div className="d-flex flex-row align-items-center justify-content-between px-4 w-100">
           <div ref={projectDescriptionRef} className="w-100" style={{ maxHeight: MAX_DESC_HEIGHT, overflow: 'hidden' }}>
             <Markdown>{projectInfo?.description || 'No description'}</Markdown>
           </div>
@@ -423,7 +423,7 @@ export const ProjectPage: FC = () => {
             )}
           </div>
         )}
-        <div className="px-4">
+        <div className="px-4 pb-3 border-bottom shadow-sm">
           <div className="d-flex flex-row align-items-center text-muted mt-1">
             <small className="d-flex flex-row align-items-center justify-content-between w-100">
               <span className="me-3">
@@ -433,10 +433,13 @@ export const ProjectPage: FC = () => {
                 <i className="ms-4 bi bi-calendar3"></i>
                 <span className="mx-1">Updated:</span>
                 <span id="project-update-date">{dateStringToDateTime(projectInfo?.last_update_date || '')}</span>
+                <i className="ms-4 bi bi-123"></i>
+                <span className="mx-1">Sample Count:</span>
+                <span id="project-update-date">{ projectInfo?.number_of_samples }</span>
               </span>
               <span className="">
                 {projectInfo?.forked_from && (
-                  <span className="me-2 p-1 border rounded fw-bold">
+                  <span className="p-1 border rounded fw-bold">
                     <Fragment>
                       <i className="bi bi-bezier2"></i>
                       <span className="ms-1">Forked from</span>
@@ -449,7 +452,7 @@ export const ProjectPage: FC = () => {
                     </Fragment>
                   </span>
                 )}
-                {projectInfo?.digest}
+                {/*{projectInfo?.digest}*/}
               </span>
             </small>
           </div>
@@ -459,7 +462,7 @@ export const ProjectPage: FC = () => {
         <PopInterface project={projectInfo} />
       ) : (
         <Fragment>
-          <div className="mt-2 px-2">
+          <div className="mt-3 px-2">
             {projectInfoIsLoading || projectInfo === undefined ? (
               <ProjectPageheaderPlaceholder />
             ) : (
@@ -550,7 +553,7 @@ export const ProjectPage: FC = () => {
                           </>
                         </div>
                       )}
-                      <div className="px-1">
+                      <div className="ps-1">
                         {fetchSampleTable && !view && (
                           <Fragment>
                             <button
@@ -567,7 +570,7 @@ export const ProjectPage: FC = () => {
                               {configMutation.isPending || totalProjectMutation.isPending ? 'Saving...' : 'Save'}
                             </button>
                             <button
-                              className="fst-italic btn btn-sm btn-outline-dark me-1 mb-1"
+                              className="fst-italic btn btn-sm btn-outline-dark mb-1"
                               onClick={() => {
                                 resetConfig();
                                 resetSamples();

From 2983f32ef2c17b30dddf9b8d8a616be577d82bf4 Mon Sep 17 00:00:00 2001
From: Sam Park <samp1800@live.com>
Date: Wed, 26 Jun 2024 10:41:29 -0400
Subject: [PATCH 10/13] updated combined name, tag error messages

---
 .../components/forms/blank-project-form.tsx   | 47 +++++++----------
 .../components/forms/edit-project-meta.tsx    | 13 +----
 web/src/components/forms/pop-form.tsx         | 27 ++++++----
 .../components/forms/project-upload-form.tsx  | 27 ++++++----
 web/src/components/modals/fork-pep.tsx        | 50 ++++++++++---------
 5 files changed, 82 insertions(+), 82 deletions(-)

diff --git a/web/src/components/forms/blank-project-form.tsx b/web/src/components/forms/blank-project-form.tsx
index 91a79706..fa07ebc0 100644
--- a/web/src/components/forms/blank-project-form.tsx
+++ b/web/src/components/forms/blank-project-form.tsx
@@ -29,12 +29,23 @@ interface Props {
 const CombinedErrorMessage = ({ errors }) => {
   const nameError = errors.project_name?.message;
   const tagError = errors.tag?.message;
+  let msg = null
 
-  if (nameError && tagError) {
+  if (nameError == 'empty' && !tagError) {
+    msg = "Project Name must not be empty."
+  } else if (nameError == 'invalid' && !tagError) {
+    msg = "Project Name must contain only alphanumeric characters, '-', or '_'."
+  } else if (nameError == 'empty' && tagError == 'invalid') {
+    msg = "Project Name must not be empty and Tag must contain only alphanumeric characters, '-', or '_'."
+  } else if (nameError == 'invalid' && tagError == 'invalid') {
+    msg = "Project Name and Tag must contain only alphanumeric characters, '-', or '_'."
+  } else if (!nameError && tagError == 'invalid') {
+    msg = "Project Tag must contain only alphanumeric characters, '-', or '_'."
+  }
+
+  if (nameError || tagError) {
     return (
-      <p className='text-danger text-xs pt-1'>
-        Project Name and Tag must contain only alphanumeric characters, '-', or '_'.
-      </p>
+      <p className='text-danger text-xs pt-1'>{ msg }</p>
     );
   }
 
@@ -138,11 +149,11 @@ sample_table: samples.csv
           {...register('project_name', {
             required: {
               value: true,
-              message: "Project Name must not be empty.",
+              message: "empty",
             },
             pattern: {
               value: /^[a-zA-Z0-9_-]+$/,
-              message: "Project Name must contain only alphanumeric characters, '-', or '_'.",
+              message: "invalid",
             },
           })}
         />
@@ -152,7 +163,7 @@ sample_table: samples.csv
             required: false,
             pattern: {
               value: /^[a-zA-Z0-9_-]+$/,
-              message: "Project Tag must contain only alphanumeric characters, '-', or '_'.",
+              message: "invalid",
             },
           })}
           id="blank_tag"
@@ -162,28 +173,6 @@ sample_table: samples.csv
         />
       </span>
       <CombinedErrorMessage errors={errors} />
-      <ErrorMessage
-        errors={errors}
-        name="project_name"
-        render={({ message }) =>
-          message && !errors.tag ? (
-            <p className="text-danger text-xs pt-1">
-              {message}
-            </p>
-          ) : null
-        }
-      />
-      <ErrorMessage
-        errors={errors}
-        name="tag"
-        render={({ message }) =>
-          message && !errors.project_name ? (
-            <p className="text-danger text-xs pt-1">
-              {message}
-            </p>
-          ) : null
-        }
-      />
       <textarea
         id="blank_description"
         className="form-control mt-3"
diff --git a/web/src/components/forms/edit-project-meta.tsx b/web/src/components/forms/edit-project-meta.tsx
index e4dd25e2..cf7ede7f 100644
--- a/web/src/components/forms/edit-project-meta.tsx
+++ b/web/src/components/forms/edit-project-meta.tsx
@@ -121,17 +121,6 @@ export const ProjectMetaEditForm: FC<Props> = ({
     }
   }, [newPop]);
 
-  const isBadName = newName
-    ? /[^0-9a-zA-Z_-]/.test(newName)
-      ? "Project Name must contain only alphanumeric characters, '-', or '_'."
-      : null
-    : 'Project Name must not be empty.';
-  const isBadTag = newTag
-    ? /[^0-9a-zA-Z_-]/.test(newTag)
-      ? "Project Tag must contain only alphanumeric characters, '-', or '_'."
-      : null
-    : 'Project Tag must not be empty.';
-
   return (
     <form>
       <div className="mb-3 form-check form-switch">
@@ -253,7 +242,7 @@ export const ProjectMetaEditForm: FC<Props> = ({
         <button
           onClick={() => mutation.mutate()}
           id="metadata-save-btn"
-          disabled={(!isDirty && isValid) || isBadName || isBadTag || mutation.isPending}
+          disabled={(!isDirty && isValid) || errors.name?.message || errors.tag?.message || mutation.isPending}
           type="button"
           className="btn btn-success me-1"
         >
diff --git a/web/src/components/forms/pop-form.tsx b/web/src/components/forms/pop-form.tsx
index 01784af5..5fb4860c 100644
--- a/web/src/components/forms/pop-form.tsx
+++ b/web/src/components/forms/pop-form.tsx
@@ -25,12 +25,23 @@ interface Props {
 const CombinedErrorMessage = ({ errors }) => {
   const nameError = errors.project_name?.message;
   const tagError = errors.tag?.message;
+  let msg = null
 
-  if (nameError && tagError) {
+  if (nameError == 'empty' && !tagError) {
+    msg = "Project Name must not be empty."
+  } else if (nameError == 'invalid' && !tagError) {
+    msg = "Project Name must contain only alphanumeric characters, '-', or '_'."
+  } else if (nameError == 'empty' && tagError == 'invalid') {
+    msg = "Project Name must not be empty and Tag must contain only alphanumeric characters, '-', or '_'."
+  } else if (nameError == 'invalid' && tagError == 'invalid') {
+    msg = "Project Name and Tag must contain only alphanumeric characters, '-', or '_'."
+  } else if (!nameError && tagError == 'invalid') {
+    msg = "Project Tag must contain only alphanumeric characters, '-', or '_'."
+  }
+
+  if (nameError || tagError) {
     return (
-      <p className='text-danger text-xs pt-1'>
-        Project Name and Tag must contain only alphanumeric characters, '-', or '_'.
-      </p>
+      <p className='text-danger text-xs pt-1'>{ msg }</p>
     );
   }
 
@@ -123,11 +134,11 @@ export const PopForm: FC<Props> = ({ onHide, defaultNamespace }) => {
           {...register('project_name', {
             required: {
               value: true,
-              message: "Project Name must not be empty.",
+              message: "empty",
             },
             pattern: {
               value: /^[a-zA-Z0-9_-]+$/,
-              message: "Project Name must contain only alphanumeric characters, '-', or '_'.",
+              message: "invalid",
             },
           })}
         />
@@ -136,14 +147,12 @@ export const PopForm: FC<Props> = ({ onHide, defaultNamespace }) => {
           required: false,
             pattern: {
               value: /^[a-zA-Z0-9_-]+$/,
-              message: "Project Tag must contain only alphanumeric characters, '-', or '_'.",
+              message: "invalid",
             },
           })}
         id="blank_tag" type="text" className="form-control" placeholder="default" />
       </span>
       <CombinedErrorMessage errors={errors} />
-      <ErrorMessage errors={errors} name="project_name" render={({ message }) => message && !errors.tag ? (<p className='text-danger text-xs pt-1'>{message}</p>) : null} />
-      <ErrorMessage errors={errors} name="tag" render={({ message }) => message && !errors.project_name ? (<p className='text-danger text-xs pt-1'>{message}</p>) : null} />
       <textarea
         id="blank_description"
         className="form-control mt-3"
diff --git a/web/src/components/forms/project-upload-form.tsx b/web/src/components/forms/project-upload-form.tsx
index cc1d4faa..873c86d4 100644
--- a/web/src/components/forms/project-upload-form.tsx
+++ b/web/src/components/forms/project-upload-form.tsx
@@ -27,12 +27,23 @@ interface Props {
 const CombinedErrorMessage = ({ errors }) => {
   const nameError = errors.name?.message;
   const tagError = errors.tag?.message;
+  let msg = null
 
-  if (nameError && tagError) {
+  if (nameError == 'empty' && !tagError) {
+    msg = "Project Name must not be empty."
+  } else if (nameError == 'invalid' && !tagError) {
+    msg = "Project Name must contain only alphanumeric characters, '-', or '_'."
+  } else if (nameError == 'empty' && tagError == 'invalid') {
+    msg = "Project Name must not be empty and Tag must contain only alphanumeric characters, '-', or '_'."
+  } else if (nameError == 'invalid' && tagError == 'invalid') {
+    msg = "Project Name and Tag must contain only alphanumeric characters, '-', or '_'."
+  } else if (!nameError && tagError == 'invalid') {
+    msg = "Project Tag must contain only alphanumeric characters, '-', or '_'."
+  }
+
+  if (nameError || tagError) {
     return (
-      <p className='text-danger text-xs pt-1'>
-        Project Name and Tag must contain only alphanumeric characters, '-', or '_'.
-      </p>
+      <p className='text-danger text-xs pt-1'>{ msg }</p>
     );
   }
 
@@ -125,11 +136,11 @@ export const ProjectUploadForm: FC<Props> = ({ onHide, defaultNamespace }) => {
           {...register('name', {
             required: {
               value: true,
-              message: "Project Name must not be empty.",
+              message: "empty",
             },
             pattern: {
               value: /^[a-zA-Z0-9_-]+$/,
-              message: "Project Name must contain only alphanumeric characters, '-', or '_'.",
+              message: "invalid",
             },
           })}
         />
@@ -138,14 +149,12 @@ export const ProjectUploadForm: FC<Props> = ({ onHide, defaultNamespace }) => {
           required: false,
             pattern: {
               value: /^[a-zA-Z0-9_-]+$/,
-              message: "Project Tag must contain only alphanumeric characters, '-', or '_'.",
+              message: "invalid",
             },
           })}
         />
       </span>
       <CombinedErrorMessage errors={errors} />
-      <ErrorMessage errors={errors} name="name" render={({ message }) => message && !errors.tag ? (<p className='text-danger text-xs pt-1'>{message}</p>) : null} />
-      <ErrorMessage errors={errors} name="tag" render={({ message }) => message && !errors.name ? (<p className='text-danger text-xs pt-1'>{message}</p>): null} />
       <textarea
         id="description"
         className="form-control mt-3"
diff --git a/web/src/components/modals/fork-pep.tsx b/web/src/components/modals/fork-pep.tsx
index b27b4f5c..a7437c59 100644
--- a/web/src/components/modals/fork-pep.tsx
+++ b/web/src/components/modals/fork-pep.tsx
@@ -24,14 +24,31 @@ interface ForkProjectInputs {
 }
 
 const CombinedErrorMessage = ({ errors }) => {
-  const projectError = errors.project?.message;
+  const nameError = errors.project?.message;
   const tagError = errors.tag?.message;
+  let msg = null
 
-  if (projectError && tagError) {
+  if (nameError == 'empty' && !tagError) {
+    msg = "Project Name must not be empty."
+  } else if (nameError == 'invalid' && !tagError) {
+    msg = "Project Name must contain only alphanumeric characters, '-', or '_'."
+  } else if (nameError == 'empty' && tagError == 'invalid') {
+    msg = "Project Name must not be empty and Tag must contain only alphanumeric characters, '-', or '_'."
+  } else if (nameError == 'invalid' && tagError == 'invalid') {
+    msg = "Project Name and Tag must contain only alphanumeric characters, '-', or '_'."
+  } else if (nameError == 'empty' && tagError == 'empty') {
+    msg = "Project Name and Tag must not be empty."
+  } else if (nameError == 'invalid' && tagError == 'empty') {
+    msg = "Project Name must contain only alphanumeric characters, '-', or '_' and Tag must not be empty."
+  } else if (!nameError && tagError == 'empty') {
+    msg = "Project Tag must not be empty."
+  } else if (!nameError && tagError == 'invalid') {
+    msg = "Project Tag must contain only alphanumeric characters, '-', or '_'."
+  }
+
+  if (nameError || tagError) {
     return (
-      <p className='text-danger pt-1 text-xs'>
-        Project Name and Tag must contain only alphanumeric characters, '-', or '_'.
-      </p>
+      <p className='text-danger text-xs pt-1'>{ msg }</p>
     );
   }
 
@@ -73,17 +90,6 @@ export const ForkPEPModal: FC<Props> = ({ namespace, project, tag, description,
     onHide,
   );
 
-  const isBadName = projectName
-    ? /[^0-9a-zA-Z_-]/.test(projectName)
-      ? "Project Name must contain only alphanumeric characters, '-', or '_'."
-      : null
-    : 'Project Name must not be empty.';
-  const isBadTag = projectTag
-    ? /[^0-9a-zA-Z_-]/.test(projectTag)
-      ? "Project Tag must contain only alphanumeric characters, '-', or '_'."
-      : null
-    : 'Project Tag must not be empty.';
-
   return (
     <Modal size="lg" centered animation={false} show={show} onHide={onHide}>
       <Modal.Header closeButton>
@@ -126,11 +132,11 @@ export const ForkPEPModal: FC<Props> = ({ namespace, project, tag, description,
               {...register('project', {
                 required: {
                   value: true,
-                  message: "Project Name must not be empty.",
+                  message: "empty",
                 },
                 pattern: {
                   value: /^[a-zA-Z0-9_-]+$/,
-                  message: "Project Name must contain only alphanumeric characters, '-', or '_'.",
+                  message: "invalid",
                 },
               })}
             />
@@ -143,18 +149,16 @@ export const ForkPEPModal: FC<Props> = ({ namespace, project, tag, description,
               {...register('tag', {
                 required: {
                   value: true,
-                  message: "Project Tag must not be empty.",
+                  message: "empty",
                 },
                 pattern: {
                   value: /^[a-zA-Z0-9_-]+$/,
-                  message: "Project Tag must contain only alphanumeric characters, '-', or '_'.",
+                  message: "invalid",
                 },
               })}
             />
           </span>
           <CombinedErrorMessage errors={errors} />
-          <ErrorMessage errors={errors} name="project" render={({ message }) => message && !errors.tag ? (<p className='text-danger text-xs pt-1'>{message}</p>) : null} />
-          <ErrorMessage errors={errors} name="tag" render={({ message }) => message && !errors.project ? (<p className='text-danger text-xs pt-1'>{message}</p>) : null} />
           <p className="mt-1 lh-sm text-muted" style={{ fontSize: '0.9rem' }}>
             {' '}
             By default, forks are named the same as their original project. You can customize the name to distinguish it
@@ -184,7 +188,7 @@ export const ForkPEPModal: FC<Props> = ({ namespace, project, tag, description,
         </button>
         <button
           onClick={() => mutation.mutate()}
-          disabled={!isValid || isBadName || isBadTag || mutation.isPending}
+          disabled={!isValid || errors.project?.message || errors.tag?.message || mutation.isPending}
           id="fork-submit-btn"
           type="submit"
           className="btn btn-success"

From 0e1d43b9be08bd4d944532b219ed8a827d858f63 Mon Sep 17 00:00:00 2001
From: Sam Park <samp1800@live.com>
Date: Wed, 26 Jun 2024 13:14:54 -0400
Subject: [PATCH 11/13] project component ui

---
 .../components/layout/project-data-nav.tsx    | 44 ++++++++++++++-----
 web/src/components/project/view-selector.tsx  |  2 +-
 web/src/pages/Project.tsx                     | 16 +++----
 3 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/web/src/components/layout/project-data-nav.tsx b/web/src/components/layout/project-data-nav.tsx
index 8d107c42..0c18eab8 100644
--- a/web/src/components/layout/project-data-nav.tsx
+++ b/web/src/components/layout/project-data-nav.tsx
@@ -26,9 +26,9 @@ interface ViewButtonProps {
   isDirty: boolean;
 }
 
-const ViewButton: FC<ViewButtonProps> = ({ view, setPageView, icon, text, isDirty }) => (
-  <div>
-    <button onClick={() => setPageView(view)} className="border-0 bg-transparent mr-4">
+const ViewButton: FC<ViewButtonProps> = ({ view, setPageView, icon, text, isDirty, bold, color }) => (
+  <div className="h-100">
+    <button onClick={() => setPageView(view)} className={"h-100 border-0 bg-transparent mr-4" + bold + color}>
       <span className="text-xs">
         <i className="bi bi-circle-fill ms-1 text-transparent"></i>
       </span>
@@ -60,12 +60,12 @@ export const ProjectDataNav: FC<NavProps> = ({
   setProjectView,
 }) => {
   return (
-    <div className="w-100 d-flex flex-row align-items-center">
+    <div className="h-100 w-100 d-flex flex-row align-items-center">
       <div
         className={
           pageView === 'samples'
-            ? 'border border-grey border-bottom-0 rounded-top shadow-sm bg-solid px-1 py-2 text-muted'
-            : 'px-2 py-1'
+            ? 'border-0 px-1 h-100 text-muted bg-white shadow-sm align-middle'
+            : 'px-1 h-100'
         }
       >
         <ViewButton
@@ -74,13 +74,21 @@ export const ProjectDataNav: FC<NavProps> = ({
           icon="bi bi-table me-2"
           text="Samples"
           isDirty={samplesIsDirty}
+          bold={pageView === 'samples'
+            ? ' fw-normal'
+            : ' fw-light'
+          }
+          color={pageView === 'samples'
+            ? ' text-dark'
+            : ' text-muted'
+          }
         />
       </div>
       <div
         className={
           pageView === 'subsamples'
-            ? 'border border-grey border-bottom-0 rounded-top shadow-sm bg-solid px-1 py-2'
-            : 'px-2 py-1'
+            ? 'border-0 px-1 h-100 align-middle text-muted bg-white shadow-sm'
+            : 'px-1 h-100'
         }
       >
         <ViewButton
@@ -89,13 +97,21 @@ export const ProjectDataNav: FC<NavProps> = ({
           icon="bi bi-grid-3x3-gap-fill me-2"
           text="Subsamples"
           isDirty={subsamplesIsDirty}
+          bold={pageView === 'subsamples'
+            ? ' fw-normal'
+            : ' fw-light'
+          }
+          color={pageView === 'subsamples'
+            ? ' text-dark'
+            : ' text-muted'
+          }
         />
       </div>
       <div
         className={
           pageView === 'config'
-            ? 'border border-grey border-bottom-0 rounded-top shadow-sm bg-solid px-1 py-2'
-            : 'px-2 py-1'
+            ? 'border-0 px-1 h-100 text-muted bg-white shadow-sm'
+            : 'px-1 h-100'
         }
       >
         <ViewButton
@@ -104,6 +120,14 @@ export const ProjectDataNav: FC<NavProps> = ({
           icon="bi bi-filetype-yml me-2"
           text="Config"
           isDirty={configIsDirty}
+          bold={pageView === 'config'
+            ? ' fw-normal'
+            : ' fw-light'
+          }
+          color={pageView === 'config'
+            ? ' text-dark'
+            : ' text-muted'
+          }
         />
       </div>
       <ViewSelector
diff --git a/web/src/components/project/view-selector.tsx b/web/src/components/project/view-selector.tsx
index 73fd6b4b..68b9c07b 100644
--- a/web/src/components/project/view-selector.tsx
+++ b/web/src/components/project/view-selector.tsx
@@ -28,7 +28,7 @@ export const ViewSelector = (props: Props) => {
 
   return (
     <Fragment>
-      <div className="d-flex flex-row align-items-center justify-content-end w-25">
+      <div className="ps-3 d-flex flex-row align-items-center justify-content-end w-25">
         <ReactSelect
           className="top-z rounded w-100"
           options={
diff --git a/web/src/pages/Project.tsx b/web/src/pages/Project.tsx
index 5bc50f2d..23039643 100644
--- a/web/src/pages/Project.tsx
+++ b/web/src/pages/Project.tsx
@@ -462,12 +462,12 @@ export const ProjectPage: FC = () => {
         <PopInterface project={projectInfo} />
       ) : (
         <Fragment>
-          <div className="mt-3 px-2">
+          <div className="pt-0 px-2" style={{backgroundColor: '#EFF3F670', height: '3.75em'}}>
             {projectInfoIsLoading || projectInfo === undefined ? (
               <ProjectPageheaderPlaceholder />
             ) : (
               <>
-                <div className="flex-row d-flex align-items-end justify-content-between mx-3">
+                <div className="h-100 flex-row d-flex align-items-end justify-content-between mx-3">
                   <ProjectDataNav
                     pageView={projectView}
                     setPageView={(view) => setProjectView(view)}
@@ -481,10 +481,10 @@ export const ProjectPage: FC = () => {
                   />
                   {/* no matter what, only render if belonging to the user */}
                   {user && projectInfo && canEdit(user, projectInfo) ? (
-                    <div className="d-flex flex-row align-items-center w-25 justify-content-end">
+                    <div className="h-100 d-flex flex-row align-items-center w-25 justify-content-end">
                       {/* <ValidationTooltip /> */}
                       {projectInfo?.pep_schema ? (
-                        <div className="d-flex flex-row align-items-center mb-1 me-4">
+                        <div className="d-flex flex-row align-items-center me-4">
                           {isValidationLoading || isValidationFetching ? (
                             <>
                               <span>Validating...</span>
@@ -508,7 +508,7 @@ export const ProjectPage: FC = () => {
                           ) : (
                             <>
                               <Dropdown>
-                                <div className="d-flex align-items-center">
+                                <div className="h-100 d-flex align-items-center">
                                   <Dropdown.Toggle as={ValiationToggle}>
                                     <StatusIcon className="text-2xl cursor-pointer" variant="danger" />
                                   </Dropdown.Toggle>
@@ -544,7 +544,7 @@ export const ProjectPage: FC = () => {
                           )}
                         </div>
                       ) : (
-                        <div className="d-flex flex-row align-items-center mb-1 me-4">
+                        <div className="d-flex flex-row align-items-center me-4">
                           <>
                             <div className="d-flex align-items-center">
                               <StatusIcon className="text-2xl" variant="warning" />
@@ -565,12 +565,12 @@ export const ProjectPage: FC = () => {
                                 !!view
                               }
                               onClick={() => handleTotalProjectChange()}
-                              className="fst-italic btn btn-sm btn-success me-1 mb-1 border-dark"
+                              className="fst-italic btn btn-sm btn-success me-1 border-dark"
                             >
                               {configMutation.isPending || totalProjectMutation.isPending ? 'Saving...' : 'Save'}
                             </button>
                             <button
-                              className="fst-italic btn btn-sm btn-outline-dark mb-1"
+                              className="fst-italic btn btn-sm btn-outline-dark"
                               onClick={() => {
                                 resetConfig();
                                 resetSamples();

From a4f20321cc295977b93b100cda9955552693e6d4 Mon Sep 17 00:00:00 2001
From: Sam Park <samp1800@live.com>
Date: Wed, 26 Jun 2024 13:16:50 -0400
Subject: [PATCH 12/13] minor height adjustment

---
 web/src/pages/Project.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/pages/Project.tsx b/web/src/pages/Project.tsx
index 23039643..3d4e7398 100644
--- a/web/src/pages/Project.tsx
+++ b/web/src/pages/Project.tsx
@@ -462,7 +462,7 @@ export const ProjectPage: FC = () => {
         <PopInterface project={projectInfo} />
       ) : (
         <Fragment>
-          <div className="pt-0 px-2" style={{backgroundColor: '#EFF3F670', height: '3.75em'}}>
+          <div className="pt-0 px-2" style={{backgroundColor: '#EFF3F670', height: '3.5em'}}>
             {projectInfoIsLoading || projectInfo === undefined ? (
               <ProjectPageheaderPlaceholder />
             ) : (

From b93909fc0482ae06e3ee1c952dc76e8da003151b Mon Sep 17 00:00:00 2001
From: Sam Park <samp1800@live.com>
Date: Wed, 26 Jun 2024 13:29:46 -0400
Subject: [PATCH 13/13] color adjustments

---
 web/src/pages/Project.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/pages/Project.tsx b/web/src/pages/Project.tsx
index 3d4e7398..1df92ef1 100644
--- a/web/src/pages/Project.tsx
+++ b/web/src/pages/Project.tsx
@@ -462,7 +462,7 @@ export const ProjectPage: FC = () => {
         <PopInterface project={projectInfo} />
       ) : (
         <Fragment>
-          <div className="pt-0 px-2" style={{backgroundColor: '#EFF3F670', height: '3.5em'}}>
+          <div className="pt-0 px-2" style={{backgroundColor: '#EFF3F668', height: '3.5em'}}>
             {projectInfoIsLoading || projectInfo === undefined ? (
               <ProjectPageheaderPlaceholder />
             ) : (
@@ -570,7 +570,7 @@ export const ProjectPage: FC = () => {
                               {configMutation.isPending || totalProjectMutation.isPending ? 'Saving...' : 'Save'}
                             </button>
                             <button
-                              className="fst-italic btn btn-sm btn-outline-dark"
+                              className="fst-italic btn btn-sm btn-outline-dark bg-white"
                               onClick={() => {
                                 resetConfig();
                                 resetSamples();