Merge pull request #368 from bcgsc/feat/DEVSU-2092-VUS-autocol-layout

[DEVSU-2092] VUS autoGrid layout
bcgsc · Oct 23, 2023 · f8b11c4 · f8b11c4
2 parents 3a2b46a + 6345886
commit f8b11c4
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 24 deletions.
diff --git a/app/views/ReportView/components/RapidSummary/index.scss b/app/views/ReportView/components/RapidSummary/index.scss
@@ -32,6 +32,13 @@
   &__none {
     padding: 16px;
   }
+
+  &__unknown-significance {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+    grid-gap: 1rem;
+    margin: 1rem 0;
+  }
 }
 
 .rapid-summary--print {

diff --git a/app/views/ReportView/components/RapidSummary/index.tsx b/app/views/ReportView/components/RapidSummary/index.tsx
@@ -591,31 +591,31 @@ const RapidSummary = ({
 
   const unknownSignificanceSection = useMemo(() => {
     if (unknownSignificanceResults?.length > 0) {
+      const sortedVUS = unknownSignificanceResults.sort(({ displayName: displayNameA }, { displayName: displayNameB }) => {
+        if (displayNameA < displayNameB) {
+          return -1;
+        }
+        if (displayNameA > displayNameB) {
+          return 1;
+        }
+        return 0;
+      });
+
       return (
-        <Box display="flex" flexDirection="row" flexWrap="wrap" margin="1rem 0 1rem 0">
-          {
-            (unknownSignificanceResults).sort(({ displayName: displayNameA }, { displayName: displayNameB }) => {
-              if (displayNameA < displayNameB) {
-                return -1;
-              }
-              if (displayNameA > displayNameB) {
-                return 1;
-              }
-              return 0;
-            }).map((entry) => (
-              <Box
-                display="inline-block"
-                padding={1}
-                minWidth="150px"
-                key={entry.ident}
-              >
-                <Typography variant="h6" fontWeight="fontWeightBold">
-                  {getGenomicEvent({ data: entry })}
-                </Typography>
-              </Box>
-            ))
-          }
-        </Box>
+        <section className="rapid-summary__unknown-significance">
+          {sortedVUS.map((entry) => (
+            <Box
+              display="inline-block"
+              padding={1}
+              minWidth="150px"
+              key={entry.ident}
+            >
+              <Typography variant="h6">
+                {getGenomicEvent({ data: entry })}
+              </Typography>
+            </Box>
+          ))}
+        </section>
       );
     }
     return (