fix type errors and adjust sample table height flex

pepkit · Sep 17, 2024 · e8937fd · e8937fd
1 parent 3131ecb
commit e8937fd
Show file tree

Hide file tree

Showing 13 changed files with 129 additions and 142 deletions.
diff --git a/web/src/components/forms/components/combined-error-message.tsx b/web/src/components/forms/components/combined-error-message.tsx
@@ -1,49 +1,44 @@
 import { FC } from 'react';
+import { FieldErrors } from 'react-hook-form';
 
 type CombinedErrorMessageProps = {
   errors: FieldErrors<any>;
   formType: string;
 };
 
-export const CombinedErrorMessage = (props: CombinedErrorMessageProps) => {
-  const { errors, formType } = props;
-
+export const CombinedErrorMessage: FC<CombinedErrorMessageProps> = ({ errors, formType }) => {
   if (formType === 'schema') {
     const nameError = errors.name?.message;
     let msg = null;
-
-    if (nameError == 'empty') {
+    if (nameError === 'empty') {
       msg = 'Schema Name must not be empty.';
-    } else if (nameError == 'invalid') {
+    } else if (nameError === 'invalid') {
       msg = "Schema Name must contain only alphanumeric characters, '.', '-', or '_'.";
     }
-
     if (nameError) {
       return <p className="text-danger text-xs pt-1 mb-0">{msg}</p>;
     }
-    return null;
   } else if (formType === 'project') {
-    const nameError = errors.project_name?.message;
+    const nameError = errors.project_name?.message || errors.name?.message;
     const tagError = errors.tag?.message;
     let msg = null;
 
-    if (nameError == 'empty' && !tagError) {
+    if (nameError === 'empty' && !tagError) {
       msg = 'Project Name must not be empty.';
-    } else if (nameError == 'invalid' && !tagError) {
+    } else if (nameError === 'invalid' && !tagError) {
       msg = "Project Name must contain only alphanumeric characters, '-', or '_'.";
-    } else if (nameError == 'empty' && tagError == 'invalid') {
+    } 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') {
+    } else if (nameError === 'invalid' && tagError === 'invalid') {
       msg = "Project Name and Tag must contain only alphanumeric characters, '-', or '_'.";
-    } else if (!nameError && tagError == 'invalid') {
+    } 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 mb-0">{msg}</p>;
     }
-
-    return null;
   }
-
+
+  return <span />;
 };
diff --git a/web/src/components/forms/project-upload-form.tsx b/web/src/components/forms/project-upload-form.tsx
@@ -49,7 +49,7 @@ export const ProjectUploadForm = ({ onHide, defaultNamespace }: Props) => {
 
   const uploadFiles = watch('files');
   const namespace = watch('namespace');
-  const projectName = watch('project_name');
+  const projectName = watch('name');
   const tag = watch('tag');
   const description = watch('description');
   const isPrivate = watch('is_private');
@@ -103,7 +103,7 @@ export const ProjectUploadForm = ({ onHide, defaultNamespace }: Props) => {
             className="form-control"
             placeholder="name"
             // dont allow any whitespace
-            {...register('project_name', {
+            {...register('name', {
               required: {
                 value: true,
                 message: "empty",

diff --git a/web/src/components/layout/nav/nav.tsx b/web/src/components/layout/nav/nav.tsx
@@ -11,18 +11,18 @@ export const Nav: FC = () => {
       <nav
         className="d-flex flex-row align-items-center justify-content-between w-100 py-2 border-bottom"
         aria-label="navbar"
-        // style={{ backgroundColor: '#EFF3F6' }}
+        style={{ height: '85px' }}
       >
         <div className="d-flex flex-row align-items-center px-4">
           <NavLogo />
         </div>
         <div className="d-flex flex-row align-items-center justify-content-end w-100">
           {/* Desktop nav */}
-          <div className="hidden large-flex w-100">
+          <div className="d-none d-xl-flex w-100">
             <NavDesktop />
           </div>
           {/* Mobile nav */}
-          <div className="block large-hidden">
+          <div className="d-flex d-xl-none">
             <MobileNav />
           </div>
         </div>

diff --git a/web/src/components/layout/page-layout.tsx b/web/src/components/layout/page-layout.tsx
@@ -13,6 +13,7 @@ interface Props {
   image?: string;
   fullWidth?: boolean;
   footer?: boolean;
+  fullHeight?: boolean;
 }
 
 const Footer: FC = () => {
@@ -56,7 +57,7 @@ const Footer: FC = () => {
   );
 };
 
-export const PageLayout: FC<Props> = ({ children, title, description, image, fullWidth, footer = true }) => {
+export const PageLayout: FC<Props> = ({ children, title, description, image, fullWidth, footer = true, fullHeight }) => {
   const os = getOS();
   const searchInput = document.getElementById('global-search-bar');
 
@@ -89,7 +90,7 @@ export const PageLayout: FC<Props> = ({ children, title, description, image, ful
   }
 
   // set main class based on fullWidth prop
-  const mainClass = fullWidth ? `container-height` : 'container container-height';
+  const mainClass = fullWidth && fullHeight ? '' : (fullWidth ? `container-height` : 'container container-height');
 
   return (
     <>

diff --git a/web/src/components/project/project-header.tsx b/web/src/components/project/project-header.tsx
@@ -13,7 +13,7 @@ export const ProjectHeader = (props: Props) => {
   const { sampleTable, sampleTableIndex } = props;
 
   return (
-    <div className="shadow-sm pt-2">
+    <div className="shadow-sm pt-2 container-fluid border-bottom">
       <ProjectHeaderBar sampleTable={sampleTable} sampleTableIndex={sampleTableIndex}/>
       <ProjectDescription />
       <ProjectInfoFooter />

diff --git a/web/src/components/project/project-info-footer.tsx b/web/src/components/project/project-info-footer.tsx
@@ -24,7 +24,7 @@ export const ProjectInfoFooter = () => {
   }
 
   return (
-    <div className="d-flex align-items-center text-muted mt-1 px-4 pb-3 border-bottom row">
+    <div className="d-flex align-items-center text-muted mt-1 mx-0 pb-3 row">
       <small className="d-flex flex-row align-items-center justify-content-between col-md-12">
         <div className="me-3 row">
           <div className="col-sm-auto me-1">

diff --git a/web/src/components/project/project-interface.tsx b/web/src/components/project/project-interface.tsx
@@ -220,88 +220,88 @@ export const ProjectInterface = (props: Props) => {
 
   return (
     <Fragment>
-      <div className="pt-0 px-2 bg-body-secondary bg-opacity-25" style={{ height: '3.5em' }}>
-        <ProjectValidationAndEditButtons
-          isDirty={true}
-          // TODO: why does this not work in production?
-          // isDirty={projectUpdates.formState.isDirty}
-          isUpdatingProject={isSubmitting}
-          reset={projectUpdates.reset}
-          handleSubmit={handleSubmit}
-          filteredSamples={filteredSamples || []}
-        />
-      </div>
-      <div ref={projectDataRef}>
-        {pageView === 'samples' && (
-          <Controller
-            control={projectUpdates.control}
-            name="samples"
-            render={({ field: { onChange } }) => (
-              <SampleTable
-                onChange={(samples) => {
-                  onChange(samples);
-                }}
-                readOnly={!userCanEdit || view !== undefined}
-                data={
-                  view !== undefined
-                    ? sampleListToArrays(viewSamples)
-                    : currentHistoryId
-                    ? sampleListToArrays(historyData?._sample_dict || [])
-                    : newSamples
-                }
-                height={window.innerHeight - 15 - (projectDataRef.current?.offsetTop || 300)}
-                setFilteredSamples={(samples) => setFilteredSamples(samples)}
-                sampleTableIndex={sampleTableIndex}
-              />
-            )}
-          />
-        )}
-        {pageView === 'subsamples' && (
-          <Controller
-            control={projectUpdates.control}
-            name="subsamples"
-            render={({ field: { onChange } }) => (
-              <SampleTable
-                onChange={(subsamples) => {
-                  onChange(subsamples);
-                }}
-                data={currentHistoryId ? sampleListToArrays(historyData?._subsample_list[0] || []) : newSubsamples}
-                height={window.innerHeight - 15 - (projectDataRef.current?.offsetTop || 300)}
-                readOnly={!userCanEdit}
-              />
-            )}
-          />
-        )}
-        {pageView === 'config' && (
-          <Controller
-            control={projectUpdates.control}
-            name="config"
-            render={({ field: { onChange } }) => (
-              <ProjectConfigEditor
-                value={currentHistoryId ? historyData?._config || '' : newConfig}
-                setValue={(val) => {
-                  onChange(val);
-                }}
-                height={window.innerHeight - 15 - (projectDataRef.current?.offsetTop || 300)}
-                readOnly={!userCanEdit}
-              />
-            )}
+        <div className="pt-0 px-2 bg-body-secondary bg-opacity-25" style={{ flex: '0 0 3.5em' }}>
+          <ProjectValidationAndEditButtons
+            isDirty={true}
+            // TODO: why does this not work in production?
+            // isDirty={projectUpdates.formState.isDirty}
+            isUpdatingProject={isSubmitting}
+            reset={projectUpdates.reset}
+            handleSubmit={handleSubmit}
+            filteredSamples={filteredSamples || []}
           />
-        )}
-      </div>
-      <StandardizeMetadataModal
-        show={showStandardizeMetadataModal}
-        onHide={() => setShowStandardizeMetadataModal(false)}
-        namespace={namespace}
-        project={projectName}
-        tag={tag}
-        sampleTable={sampleTable}
-        sampleTableIndex={sampleTableIndex}
-        newSamples={newSamples}
-        setNewSamples={setNewSamples}
-        resetStandardizedData={resetStandardizedData}
-        setResetStandardizedData={setResetStandardizedData}
-      />
+        </div>
+        <div ref={projectDataRef} className='d-flex flex-column' style={{flex: 'auto'}}>
+          {pageView === 'samples' && (
+            <Controller
+              control={projectUpdates.control}
+              name="samples"
+              render={({ field: { onChange } }) => (
+                <SampleTable
+                  onChange={(samples) => {
+                    onChange(samples);
+                  }}
+                  readOnly={!userCanEdit || view !== undefined}
+                  data={
+                    view !== undefined
+                      ? sampleListToArrays(viewSamples)
+                      : currentHistoryId
+                      ? sampleListToArrays(historyData?._sample_dict || [])
+                      : newSamples
+                  }
+                  // height={window.innerHeight - 15 - (projectDataRef.current?.offsetTop || 300)}
+                  setFilteredSamples={(samples) => setFilteredSamples(samples)}
+                  sampleTableIndex={sampleTableIndex}
+                />
+              )}
+            />
+          )}
+          {pageView === 'subsamples' && (
+            <Controller
+              control={projectUpdates.control}
+              name="subsamples"
+              render={({ field: { onChange } }) => (
+                <SampleTable
+                  onChange={(subsamples) => {
+                    onChange(subsamples);
+                  }}
+                  data={currentHistoryId ? sampleListToArrays(historyData?._subsample_list[0] || []) : newSubsamples}
+                  // height={window.innerHeight - 15 - (projectDataRef.current?.offsetTop || 300)}
+                  readOnly={!userCanEdit}
+                />
+              )}
+            />
+          )}
+          {pageView === 'config' && (
+            <Controller
+              control={projectUpdates.control}
+              name="config"
+              render={({ field: { onChange } }) => (
+                <ProjectConfigEditor
+                  value={currentHistoryId ? historyData?._config || '' : newConfig}
+                  setValue={(val) => {
+                    onChange(val);
+                  }}
+                  height={window.innerHeight - 15 - (projectDataRef.current?.offsetTop || 300)}
+                  readOnly={!userCanEdit}
+                />
+              )}
+            />
+          )}
+        </div>
+        <StandardizeMetadataModal
+          show={showStandardizeMetadataModal}
+          onHide={() => setShowStandardizeMetadataModal(false)}
+          namespace={namespace}
+          project={projectName}
+          tag={tag}
+          sampleTable={sampleTable}
+          sampleTableIndex={sampleTableIndex}
+          newSamples={newSamples}
+          setNewSamples={setNewSamples}
+          resetStandardizedData={resetStandardizedData}
+          setResetStandardizedData={setResetStandardizedData}
+        />
     </Fragment>
   );
 };
diff --git a/web/src/components/project/project-page-description.tsx b/web/src/components/project/project-page-description.tsx
@@ -31,7 +31,7 @@ export const ProjectDescription = () => {
 
   return (
     <Fragment>
-      <div className="d-flex align-items-center justify-content-between px-4 row">
+      <div className="d-flex align-items-center justify-content-between mx-0 row">
         <div ref={projectDescriptionRef} className="col-md-12" style={{ maxHeight: MAX_DESC_HEIGHT, overflow: 'hidden' }}>
           <Markdown>
             {currentHistoryId !== null

diff --git a/web/src/components/project/project-page-header-bar.tsx b/web/src/components/project/project-page-header-bar.tsx
@@ -111,7 +111,7 @@ export const ProjectHeaderBar = (props: Props) => {
   }
 
   return (
-    <div className="d-flex align-items-start justify-content-between px-4 mb-1 row">
+    <div className="d-flex align-items-start justify-content-between mx-0 mb-1 row">
       <div className="d-flex flex-row align-items-center col-md-6">
         <Breadcrumb className="fw-bold pt-2">
           <Breadcrumb.Item href="/">home</Breadcrumb.Item>

diff --git a/web/src/components/tables/sample-table.tsx b/web/src/components/tables/sample-table.tsx
@@ -95,7 +95,8 @@ export const SampleTable = (props: Props) => {
       ref={hotRef}
       data={data}
       stretchH={stretchH || 'all'}
-      height={height || tableHeight}
+      // height={height || tableHeight}
+      height={height || '100%'}
       readOnly={readOnly}
       colHeaders={true}
       // columns={columns}

diff --git a/web/src/globals.css b/web/src/globals.css
@@ -597,18 +597,6 @@ body {
   display: block;
 }
 
-.large-flex {
-  @media (min-width: 1024px) {
-    display: flex;
-  }
-}
-
-.large-hidden {
-  @media (min-width: 1024px) {
-    display: none;
-  }
-}
-
 .list-none {
   list-style: none;
 }

diff --git a/web/src/pages/Browse.tsx b/web/src/pages/Browse.tsx
@@ -163,7 +163,7 @@ export function Browse() {
 
             <div className="row mt-0">
               <div className="col-12">
-                {topNamespace?.data?.results || isLoading ? (
+                {topNamespace?.data?.results ? (
                   <>
                     <div className="d-flex flex-wrap align-items-center justify-content-between">
                       <div className="fs-6 fw-medium pt-3">Top 10 Starred PEPs</div>
@@ -181,7 +181,7 @@ export function Browse() {
                       Want to see more? Visit the namespace to view remaining projects.
                     </p>
                   </>
-                ) : (
+                ) : selectedNamespace && (
                   <div className="col-12 mt-4 text-center">
                     <LoadingSpinner />
                   </div>