Don't mount component with empty columns

Author: JanCBrammer

app/javascript/src/apps/mydb/elements/details/reactions/variationsTab/ReactionVariations.js

@@ -12,16 +12,17 @@ import PropTypes from 'prop-types';
 import Reaction from 'src/models/Reaction';
 import {
   createVariationsRow, copyVariationsRow, updateVariationsRow,
-  materialTypes, instantiateSelectedColumns,
+  materialTypes, getVariationsColumns,
   addMissingColumnsToVariations, removeObsoleteColumnsFromVariations,
+  getMetadataColumnGroupChild, getPropertyColumnGroupChild
 } from 'src/apps/mydb/elements/details/reactions/variationsTab/ReactionVariationsUtils';
 import {
   getReactionAnalyses, updateAnalyses
 } from 'src/apps/mydb/elements/details/reactions/variationsTab/ReactionVariationsAnalyses';
 import {
   updateVariationsGasTypes,
   getReactionMaterials, getReactionMaterialsIDs, getReactionMaterialsGasTypes,
-  removeObsoleteMaterialColumns
+  removeObsoleteMaterialColumns, getMaterialColumnGroupChild
 } from 'src/apps/mydb/elements/details/reactions/variationsTab/ReactionVariationsMaterials';
 import {
   PropertyFormatter, PropertyParser,
@@ -43,9 +44,7 @@ export default function ReactionVariations({ reaction, onReactionChange, isActiv
   const [gasMode, setGasMode] = useState(reaction.gaseous);
   const [allReactionAnalyses, setAllReactionAnalyses] = useState(getReactionAnalyses(reaction));
   const [reactionMaterials, setReactionMaterials] = useState(getReactionMaterials(reaction));
-  const [selectedColumns, setSelectedColumns] = useState(
-    instantiateSelectedColumns
-  );
+  const [selectedColumns, setSelectedColumns] = useState(getVariationsColumns(reactionVariations));
   const [columnDefinitions, setColumnDefinitions] = useReducer(columnDefinitionsReducer, [
     {
       headerName: 'Tools',
@@ -59,20 +58,26 @@ export default function ReactionVariations({ reaction, onReactionChange, isActiv
       headerName: 'Metadata',
       groupId: 'metadata',
       marryChildren: true,
-      children: []
+      children: selectedColumns.metadata.map((entry) => getMetadataColumnGroupChild(entry))
     },
     {
       headerName: 'Properties',
       groupId: 'properties',
       marryChildren: true,
-      children: []
+      children: selectedColumns.properties.map((entry) => getPropertyColumnGroupChild(entry, gasMode))
     },
   ].concat(
     Object.entries(materialTypes).map(([materialType, { label }]) => ({
       headerName: label,
       groupId: materialType,
       marryChildren: true,
-      children: []
+      children: selectedColumns[materialType].map(
+        (materialID) => getMaterialColumnGroupChild(
+          reactionMaterials[materialType].find((material) => material.id.toString() === materialID),
+          materialType,
+          gasMode
+        )
+      )
     }))
   ));
 

app/javascript/src/apps/mydb/elements/details/reactions/variationsTab/ReactionVariationsUtils.js

@@ -470,13 +470,16 @@ function updateColumnDefinitions(columnDefinitions, field, property, newValue) {
   return updatedColumnDefinitions;
 }
 
-function instantiateSelectedColumns() {
+function getVariationsColumns(variations) {
+  const variationsRow = variations[0];
   const materialColumns = Object.entries(materialTypes).reduce((materialsByType, [materialType]) => {
-    materialsByType[materialType] = [];
+    materialsByType[materialType] = Object.keys(variationsRow ? variationsRow[materialType] : []);
     return materialsByType;
   }, {});
+  const propertyColumns = Object.keys(variationsRow ? variationsRow.properties : {});
+  const metadataColumns = Object.keys(variationsRow ? variationsRow.metadata : {});
 
-  return { ...materialColumns, properties: [], metadata: [] };
+  return { ...materialColumns, properties: propertyColumns, metadata: metadataColumns };
 }
 
 export {
@@ -490,17 +493,19 @@ export {
   convertUnit,
   materialTypes,
   getVariationsRowName,
+  getVariationsColumns,
   createVariationsRow,
   copyVariationsRow,
   updateVariationsRow,
   updateColumnDefinitions,
   getCellDataType,
   getUserFacingUnit,
   getStandardValue,
-  instantiateSelectedColumns,
   addMissingColumnsToVariations,
   removeObsoleteColumnsFromVariations,
   addMissingColumnDefinitions,
   removeObsoleteColumnDefinitions,
+  getMetadataColumnGroupChild,
+  getPropertyColumnGroupChild,
   REACTION_VARIATIONS_TAB_KEY
 };

spec/javascripts/packs/src/apps/mydb/elements/details/reactions/variationsTab/ReactionVariationsUtils.spec.js

@@ -2,7 +2,7 @@ import expect from 'expect';
 import {
   convertUnit, createVariationsRow, copyVariationsRow, updateVariationsRow, updateColumnDefinitions,
   removeObsoleteColumnsFromVariations, removeObsoleteColumnDefinitions, addMissingColumnDefinitions,
-  addMissingColumnsToVariations
+  addMissingColumnsToVariations, getVariationsColumns
 } from 'src/apps/mydb/elements/details/reactions/variationsTab/ReactionVariationsUtils';
 import {
   getReactionMaterials, getMaterialColumnGroupChild, getReactionMaterialsIDs
@@ -195,4 +195,18 @@ describe('ReactionVariationsUtils', () => {
     );
     expect(getColumnGroupChild(updatedColumnDefinitions, 'startingMaterials', field).cellDataType).toBe('equivalent');
   });
+  it('gets column names from variations table', async () => {
+    const reaction = await setUpReaction();
+    const reactionMaterialsIDs = getReactionMaterialsIDs(getReactionMaterials(reaction));
+    const variationsColumns = getVariationsColumns(reaction.variations);
+
+    expect(variationsColumns.startingMaterials).toEqual(reactionMaterialsIDs.startingMaterials);
+    expect(variationsColumns.properties).toEqual(expect.arrayContaining(['duration', 'temperature']));
+    expect(variationsColumns.metadata).toEqual(expect.arrayContaining(['notes', 'analyses']));
+
+    const emptyVariationsColumns = getVariationsColumns([]);
+    expect(emptyVariationsColumns.startingMaterials).toEqual([]);
+    expect(emptyVariationsColumns.properties).toEqual([]);
+    expect(emptyVariationsColumns.metadata).toEqual([]);
+  });
 });