From 4862aef1883f7de4548f8db8bc988bd50bfd8263 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98rjan=20Aare=20J=C3=B8rgensen?= <oajo@equinor.com>
Date: Tue, 24 Sep 2024 08:33:16 +0200
Subject: [PATCH] Add conditional rendering of metadata tables

---
 .../GrossDepositionEnviromentGroup.tsx        |  82 ++++++-------
 .../OutcropAnalogueGroup.tsx                  |  84 ++++++-------
 .../StratigrapicGroups/StratigrapicGroups.tsx | 113 +++++++++---------
 3 files changed, 144 insertions(+), 135 deletions(-)

diff --git a/src/components/GrossDepositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.tsx b/src/components/GrossDepositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.tsx
index e2f665a..48447eb 100644
--- a/src/components/GrossDepositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.tsx
+++ b/src/components/GrossDepositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup.tsx
@@ -109,47 +109,49 @@ export const GrossDepositionEnviromentGroup = ({
         <Typography variant="h4" as="h3">
           Gross Depositional Environment (GDE)
         </Typography>
-        <Table>
-          <Table.Head>
-            <Table.Row>
-              <Table.Cell></Table.Cell>
-              <Table.Cell>GDE</Table.Cell>
-              <Table.Cell>Depositional environment</Table.Cell>
-              <Table.Cell>Subenvironment</Table.Cell>
-              <Table.Cell>Architectural element</Table.Cell>
-            </Table.Row>
-          </Table.Head>
-
-          <Table.Body>
-            {gdeGroups.map((row) => (
-              <Table.Row key={row.geologicalGroupId}>
-                <Table.Cell>
-                  <Button
-                    variant="ghost_icon"
-                    onClick={() => deleteGdeRow(row.geologicalGroupId)}
-                  >
-                    <Icon
-                      data={deleteIcon}
-                      title={'Delete gross deposition enviroment row'}
-                    />
-                  </Button>
-                </Table.Cell>
-                <Table.Cell>{row.grossDepEnv.identifier}</Table.Cell>
-                <Table.Cell>{row.depEnv.identifier}</Table.Cell>
-                <Table.Cell>{row.subenv.identifier}</Table.Cell>
-                <Table.Cell>
-                  {row.architecturalElements.length > 0 && (
-                    <ul>
-                      {row.architecturalElements.map((a) => (
-                        <li key={a.geologicalStandardId}>{a.identifier}</li>
-                      ))}
-                    </ul>
-                  )}
-                </Table.Cell>
+        {gdeGroups.length > 0 && (
+          <Table>
+            <Table.Head>
+              <Table.Row>
+                <Table.Cell></Table.Cell>
+                <Table.Cell>GDE</Table.Cell>
+                <Table.Cell>Depositional environment</Table.Cell>
+                <Table.Cell>Subenvironment</Table.Cell>
+                <Table.Cell>Architectural element</Table.Cell>
               </Table.Row>
-            ))}
-          </Table.Body>
-        </Table>
+            </Table.Head>
+
+            <Table.Body>
+              {gdeGroups.map((row) => (
+                <Table.Row key={row.geologicalGroupId}>
+                  <Table.Cell>
+                    <Button
+                      variant="ghost_icon"
+                      onClick={() => deleteGdeRow(row.geologicalGroupId)}
+                    >
+                      <Icon
+                        data={deleteIcon}
+                        title={'Delete gross deposition enviroment row'}
+                      />
+                    </Button>
+                  </Table.Cell>
+                  <Table.Cell>{row.grossDepEnv.identifier}</Table.Cell>
+                  <Table.Cell>{row.depEnv.identifier}</Table.Cell>
+                  <Table.Cell>{row.subenv.identifier}</Table.Cell>
+                  <Table.Cell>
+                    {row.architecturalElements.length > 0 && (
+                      <ul>
+                        {row.architecturalElements.map((a) => (
+                          <li key={a.geologicalStandardId}>{a.identifier}</li>
+                        ))}
+                      </ul>
+                    )}
+                  </Table.Cell>
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </Table>
+        )}
         <div>
           <Button variant="outlined" onClick={handleGdeDialog}>
             Add GDE…
diff --git a/src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.tsx b/src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.tsx
index 5b5c141..5e37b0f 100644
--- a/src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.tsx
+++ b/src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.tsx
@@ -82,47 +82,51 @@ export const OutcropAnalogueGroup = ({
       <Typography variant="h4" as="h3">
         Outcrop Analogue
       </Typography>
-      <Table>
-        <Table.Head>
-          <Table.Row>
-            <Table.Cell></Table.Cell>
-            <Table.Cell>Analogue</Table.Cell>
-            <Table.Cell>Region</Table.Cell>
-            <Table.Cell>Basin</Table.Cell>
-            <Table.Cell>Category</Table.Cell>
-          </Table.Row>
-        </Table.Head>
-        <Table.Body>
-          {outcropGroup.map((row) => (
-            <Table.Row key={row.outcropId}>
-              <Table.Cell>
-                <Button
-                  variant="ghost_icon"
-                  onClick={() =>
-                    handleDeleteOutcropAnalogue(
-                      row.outcropId ? row.outcropId : 'none',
-                    )
-                  }
-                >
-                  <Icon data={deleteIcon} title={'Delete strat column row'} />
-                </Button>
-              </Table.Cell>
-              <Table.Cell>
-                <Styled.StratColCell>{row.name}</Styled.StratColCell>
-              </Table.Cell>
-              <Table.Cell>{row.region}</Table.Cell>
-              <Table.Cell>
-                <Styled.StratColCell>
-                  {row.basins?.map((item) => item)}
-                </Styled.StratColCell>
-              </Table.Cell>
-              <Table.Cell>
-                <Styled.StratColCell>{row.outcropCategory}</Styled.StratColCell>
-              </Table.Cell>
+      {outcropGroup.length > 0 && (
+        <Table>
+          <Table.Head>
+            <Table.Row>
+              <Table.Cell></Table.Cell>
+              <Table.Cell>Analogue</Table.Cell>
+              <Table.Cell>Region</Table.Cell>
+              <Table.Cell>Basin</Table.Cell>
+              <Table.Cell>Category</Table.Cell>
             </Table.Row>
-          ))}
-        </Table.Body>
-      </Table>
+          </Table.Head>
+          <Table.Body>
+            {outcropGroup.map((row) => (
+              <Table.Row key={row.outcropId}>
+                <Table.Cell>
+                  <Button
+                    variant="ghost_icon"
+                    onClick={() =>
+                      handleDeleteOutcropAnalogue(
+                        row.outcropId ? row.outcropId : 'none',
+                      )
+                    }
+                  >
+                    <Icon data={deleteIcon} title={'Delete strat column row'} />
+                  </Button>
+                </Table.Cell>
+                <Table.Cell>
+                  <Styled.StratColCell>{row.name}</Styled.StratColCell>
+                </Table.Cell>
+                <Table.Cell>{row.region}</Table.Cell>
+                <Table.Cell>
+                  <Styled.StratColCell>
+                    {row.basins?.map((item) => item)}
+                  </Styled.StratColCell>
+                </Table.Cell>
+                <Table.Cell>
+                  <Styled.StratColCell>
+                    {row.outcropCategory}
+                  </Styled.StratColCell>
+                </Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+      )}
       <div>
         <Button variant="outlined" onClick={handleOutcropDialog}>
           Add outcrop analogue…
diff --git a/src/components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups.tsx b/src/components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups.tsx
index 905c993..986e577 100644
--- a/src/components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups.tsx
+++ b/src/components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups.tsx
@@ -32,72 +32,75 @@ export const StratigrapicGroups = ({
         Stratigraphic column
       </Typography>
 
-      <Table>
-        <Table.Head>
-          <Table.Row>
-            <Table.Cell></Table.Cell>
-            <Table.Cell>Country</Table.Cell>
-            <Table.Cell>Field</Table.Cell>
-            <Table.Cell>Stratigraphic column</Table.Cell>
-            <Table.Cell>Level 1 (group)</Table.Cell>
-            <Table.Cell>Level 2 (formation)</Table.Cell>
-            <Table.Cell>Level 3 (formation/subzone)</Table.Cell>
-          </Table.Row>
-        </Table.Head>
+      {stratColumnGroups.length > 0 && (
+        <Table>
+          <Table.Head>
+            <Table.Row>
+              <Table.Cell></Table.Cell>
+              <Table.Cell>Country</Table.Cell>
+              <Table.Cell>Field</Table.Cell>
+              <Table.Cell>Stratigraphic column</Table.Cell>
+              <Table.Cell>Level 1 (group)</Table.Cell>
+              <Table.Cell>Level 2 (formation)</Table.Cell>
+              <Table.Cell>Level 3 (formation/subzone)</Table.Cell>
+            </Table.Row>
+          </Table.Head>
 
-        <Table.Body>
-          {stratColumnGroups.map((row) => (
-            <Table.Row key={row.stratigraphicGroupId}>
-              <Table.Cell>
-                <Button
-                  variant="ghost_icon"
-                  onClick={() => deleteRow(row.stratigraphicGroupId)}
-                >
-                  <Icon data={deleteIcon} title={'Delete strat column row'} />
-                </Button>
-              </Table.Cell>
-              <Table.Cell>{row.country.identifier}</Table.Cell>
-              <Table.Cell>
-                <Styled.StratColCell>
-                  {row.field.identifier}
-                </Styled.StratColCell>
-              </Table.Cell>
-              <Table.Cell>
-                <Styled.StratColCell>
-                  {row.stratColumn.identifier}
-                </Styled.StratColCell>
-              </Table.Cell>
-              {filterUnitLevel(row, 1).length > 0 ? (
+          <Table.Body>
+            {stratColumnGroups.map((row) => (
+              <Table.Row key={row.stratigraphicGroupId}>
                 <Table.Cell>
-                  <Styled.StratColCell>
-                    {filterUnitLevel(row, 1)[0].identifier}
-                  </Styled.StratColCell>
+                  <Button
+                    variant="ghost_icon"
+                    onClick={() => deleteRow(row.stratigraphicGroupId)}
+                  >
+                    <Icon data={deleteIcon} title={'Delete strat column row'} />
+                  </Button>
                 </Table.Cell>
-              ) : (
-                <Table.Cell>-</Table.Cell>
-              )}
-              {filterUnitLevel(row, 2).length > 0 ? (
+                <Table.Cell>{row.country.identifier}</Table.Cell>
                 <Table.Cell>
                   <Styled.StratColCell>
-                    {filterUnitLevel(row, 2)[0].identifier}
+                    {row.field.identifier}
                   </Styled.StratColCell>
                 </Table.Cell>
-              ) : (
-                <Table.Cell>-</Table.Cell>
-              )}
-              {filterUnitLevel(row, 3).length > 0 ? (
                 <Table.Cell>
                   <Styled.StratColCell>
-                    {filterUnitLevel(row, 3)[0].identifier}
+                    {row.stratColumn.identifier}
                   </Styled.StratColCell>
                 </Table.Cell>
-              ) : (
-                <Table.Cell>-</Table.Cell>
-              )}
-            </Table.Row>
-          ))}
-        </Table.Body>
-      </Table>
+                {filterUnitLevel(row, 1).length > 0 ? (
+                  <Table.Cell>
+                    <Styled.StratColCell>
+                      {filterUnitLevel(row, 1)[0].identifier}
+                    </Styled.StratColCell>
+                  </Table.Cell>
+                ) : (
+                  <Table.Cell>-</Table.Cell>
+                )}
+                {filterUnitLevel(row, 2).length > 0 ? (
+                  <Table.Cell>
+                    <Styled.StratColCell>
+                      {filterUnitLevel(row, 2)[0].identifier}
+                    </Styled.StratColCell>
+                  </Table.Cell>
+                ) : (
+                  <Table.Cell>-</Table.Cell>
+                )}
+                {filterUnitLevel(row, 3).length > 0 ? (
+                  <Table.Cell>
+                    <Styled.StratColCell>
+                      {filterUnitLevel(row, 3)[0].identifier}
+                    </Styled.StratColCell>
+                  </Table.Cell>
+                ) : (
+                  <Table.Cell>-</Table.Cell>
+                )}
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+      )}
+
       <div>
         <Button variant="outlined" onClick={handleStratColDialog}>
           Add stratigraphic column…