- Update search view with uniform bar height

- Move error message to underneath the whole bar and not just errored section
- Unhide actions column when auto-hide columns with no values

Author: bnguyen-bcgsc

app/components/DataTable/index.tsx

@@ -343,6 +343,7 @@ const DataTable = ({
           return typeof value !== 'undefined' && value !== null;
         });
         colApi.setColumnVisible(column.getColId(), !isColumnEmpty);
+        colApi.setColumnVisible('Open', true);
       });
     }
   }, [colApi, columnDefs, gridApi, isSearch]);

app/components/ReportsTable/searchColumnDefs.ts

@@ -88,6 +88,7 @@ const searchColumnDefs: ColDef[] = [{
 },
 {
   headerName: 'Open',
+  colId: 'Open',
   pinned: 'right',
   cellRenderer: 'Launch',
   cellRendererParams: {

app/index.scss

@@ -80,7 +80,7 @@ html body {
   min-width: 1100px;
   position: relative;
   right: 16px;
-  top: 30vh;
+  top: 35vh;
 
   &__component {
     margin-top: 32px;
@@ -92,24 +92,27 @@ html body {
     display: flex;
     padding-left: 32px;
     padding-right: 32px;
-    height: 100%;
+    height: inherit;
     width: 100%;
   }
 
   &__keyword-input {
     -webkit-tap-highlight-color: transparent;
-    height: 100%;
-    width: 80%;
+    height: inherit;
+    width: 850px;
+    display: flex;
   }
 
   &__category-input {
-    height: 100%;
-    width: 12%;
+    height: inherit;
+    width: 150px;
+    display: flex;
   }
 
   &__threshold-input {
-    height: 100%;
-    width: 8%;
+    height: inherit;
+    width: 100px;
+    display: flex;
 
     // Removes arrows in number input
     input::-webkit-outer-spin-button,
@@ -122,13 +125,22 @@ html body {
     }
   }
 
+  .error-dialog {
+    max-width: 1100px;
+    min-width: 1100px;
+    margin-top: 8px;
+    height: auto;
+    padding-left: 48px;
+    padding-right: 48px;
+  }
+
   .help-dialog {
     max-width: 1100px;
     min-width: 1100px;
     height: auto;
     margin-top: 16px;
-    padding-left: 32px;
-    padding-right: 32px;
+    padding-left: 48px;
+    padding-right: 48px;
   }
 }
 

app/views/SearchView/index.tsx

@@ -127,12 +127,21 @@ const SearchView = () => {
     <div className="search-view">
       <div className="search-view__bar">
         <div className="search-view__category-select">
-          <FormControl classes={{ root: customCss.categoryBorder }} sx={{ width: '150px' }}>
+          <FormControl classes={{ root: customCss.categoryBorder }} style={{ height: '100%' }}>
             <Select
               value={searchCategory}
               onChange={handleCategoryChange}
               displayEmpty
-              inputProps={{ sx: { textAlign: 'center' } }}
+              style={{
+                height: '100%',
+                width: '100%',
+                minWidth: '150px',
+              }}
+              inputProps={{
+                sx: {
+                  textAlign: 'center',
+                },
+              }}
             >
               <MenuItem value="patientId">Patient ID</MenuItem>
               <MenuItem value="projectName">Project Name</MenuItem>
@@ -146,19 +155,26 @@ const SearchView = () => {
           <TextField
             InputLabelProps={{ shrink: true }}
             variant="outlined"
-            helperText={thresholdErrorMessage}
             error={Boolean(thresholdErrorMessage)}
             onChange={handleThresholdChange}
             value={searchThreshold}
             defaultValue={DEFAULT_THRESHOLD}
             placeholder="0.8"
             onKeyDown={handleKeyDown}
-            inputProps={{ sx: { textAlign: 'center' } }}
+            inputProps={{
+              sx: {
+                textAlign: 'center',
+                height: 'inherit',
+                width: '100%',
+              },
+            }}
             // eslint-disable-next-line react/jsx-no-duplicate-props
             InputProps={{
               type: 'number',
               sx: {
                 borderRadius: '0px',
+                height: '100%',
+                minWidth: '100px',
               },
             }}
           />
@@ -167,7 +183,6 @@ const SearchView = () => {
           <Autocomplete
             multiple
             options={[]}
-            defaultValue={[]}
             freeSolo
             value={searchKey}
             disableClearable
@@ -178,6 +193,8 @@ const SearchView = () => {
                 borderTopRightRadius: '25px',
                 borderBottomRightRadius: '25px',
               },
+              height: 'inherit',
+              width: '100%',
             }}
             limitTags={4}
             renderTags={(value) => value.map(({ category, keyword, threshold }: SearchKeyType, index: number) => (
@@ -195,10 +212,9 @@ const SearchView = () => {
                 name="keyword"
                 variant="outlined"
                 error={Boolean(searchErrorMessage)}
-                helperText={searchErrorMessage}
                 onChange={handleKeywordChange}
                 onKeyDown={handleKeyDown}
-                placeholder={searchKey.length < 1 ? 'Press enter to add search key. Press backspace to delete.' : ''}
+                placeholder={searchKey.length < 1 ? 'Press enter to add search keyword. Press backspace to delete.' : ''}
                 InputProps={{
                   ...params.InputProps,
                   endAdornment: (
@@ -231,10 +247,20 @@ const SearchView = () => {
           />
         </div>
       </div>
+      <div className="error-dialog">
+        <Typography variant="subtitle2" color="error">
+          {searchErrorMessage}
+        </Typography>
+      </div>
+      <div className="error-dialog">
+        <Typography variant="subtitle2" color="error">
+          {thresholdErrorMessage}
+        </Typography>
+      </div>
       <div className="help-dialog">
         <Typography variant="subtitle2" color="primary">
-          The matching threshold determines the cutoff of similarity between the search key and its matches.
-          A value of 1 means exact matches or exact substring matches. The default value is 0.8 if not specified.
+          The matching threshold scales from 0 to 1 and determines the cutoff of similarity between the search keyword and a match value.
+          A threshold of 1 means the entire match value or a substring of it is identical to the search keyword. The default value is 0.8 if not specified.
         </Typography>
       </div>
     </div>