Auto-size columns when tab is (re-)entered

ComPlat · Jan 31, 2025 · f72fa0a · f72fa0a
1 parent f7f00ae
commit f72fa0a
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/app/javascript/src/apps/mydb/elements/details/reactions/ReactionDetails.js b/app/javascript/src/apps/mydb/elements/details/reactions/ReactionDetails.js
@@ -15,6 +15,9 @@ import ElementActions from 'src/stores/alt/actions/ElementActions';
 import DetailActions from 'src/stores/alt/actions/DetailActions';
 import LoadingActions from 'src/stores/alt/actions/LoadingActions';
 import ReactionVariations from 'src/apps/mydb/elements/details/reactions/variationsTab/ReactionVariations';
+import {
+  REACTION_VARIATIONS_TAB_KEY
+} from 'src/apps/mydb/elements/details/reactions/variationsTab/ReactionVariationsUtils';
 import DetailsTabLiteratures from 'src/apps/mydb/elements/details/literature/DetailsTabLiteratures';
 import ReactionDetailsContainers from 'src/apps/mydb/elements/details/reactions/analysesTab/ReactionDetailsContainers';
 import SampleDetailsContainers from 'src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainers';
@@ -585,10 +588,16 @@ export default class ReactionDetails extends Component {
         </Tab>
       ),
       variations: (
-        <Tab eventKey="variations" title="Variations" key={`variations_${reaction.id}`} unmountOnExit={false}>
+        <Tab
+          eventKey={REACTION_VARIATIONS_TAB_KEY}
+          title="Variations"
+          key={`variations_${reaction.id}`}
+          unmountOnExit={false}
+        >
           <ReactionVariations
             reaction={reaction}
             onReactionChange={this.handleReactionChange}
+            isActive={activeTab === REACTION_VARIATIONS_TAB_KEY}
           />
         </Tab>
       )

diff --git a/app/javascript/src/apps/mydb/elements/details/reactions/variationsTab/ReactionVariations.js b/app/javascript/src/apps/mydb/elements/details/reactions/variationsTab/ReactionVariations.js
@@ -1,7 +1,7 @@
 /* eslint-disable react/display-name */
 import { AgGridReact } from 'ag-grid-react';
 import React, {
-  useRef, useState, useCallback, useReducer
+  useRef, useState, useCallback, useReducer, useEffect
 } from 'react';
 import {
   Button, OverlayTrigger, Tooltip, Alert,
@@ -33,7 +33,7 @@ import {
 } from 'src/apps/mydb/elements/details/reactions/variationsTab/ReactionVariationsReducers';
 import GasPhaseReactionStore from 'src/stores/alt/stores/GasPhaseReactionStore';
 
-export default function ReactionVariations({ reaction, onReactionChange }) {
+export default function ReactionVariations({ reaction, onReactionChange, isActive }) {
   const gridRef = useRef(null);
   const reactionVariations = reaction.variations;
   const reactionHasPolymers = reaction.hasPolymers();
@@ -154,6 +154,13 @@ export default function ReactionVariations({ reaction, onReactionChange }) {
     resizable: false,
   };
 
+  useEffect(() => {
+    // Auto-size columns when the parent tab is (re-)entered.
+    if (isActive && gridRef.current?.api) {
+      gridRef.current.api.autoSizeAllColumns();
+    }
+  }, [isActive]);
+
   const setReactionVariations = (updatedReactionVariations) => {
     reaction.variations = updatedReactionVariations;
     onReactionChange(reaction);
@@ -421,7 +428,6 @@ export default function ReactionVariations({ reaction, onReactionChange }) {
           */
           readOnlyEdit
           onCellEditRequest={updateRow}
-          onFirstDataRendered={() => gridRef.current.api.autoSizeAllColumns()}
           onCellValueChanged={(event) => fitColumnToContent(event)}
           onColumnHeaderClicked={(event) => fitColumnToContent(event)}
         />
@@ -433,4 +439,5 @@ export default function ReactionVariations({ reaction, onReactionChange }) {
 ReactionVariations.propTypes = {
   reaction: PropTypes.instanceOf(Reaction).isRequired,
   onReactionChange: PropTypes.func.isRequired,
+  isActive: PropTypes.bool.isRequired,
 };
diff --git a/...ascript/src/apps/mydb/elements/details/reactions/variationsTab/ReactionVariationsUtils.js b/...ascript/src/apps/mydb/elements/details/reactions/variationsTab/ReactionVariationsUtils.js
@@ -5,6 +5,7 @@ import {
   updateVariationsRowOnReferenceMaterialChange, getMaterialData
 } from 'src/apps/mydb/elements/details/reactions/variationsTab/ReactionVariationsMaterials';
 
+const REACTION_VARIATIONS_TAB_KEY = 'reactionVariationsTab';
 const temperatureUnits = ['°C', 'K', '°F'];
 const durationUnits = ['Second(s)', 'Minute(s)', 'Hour(s)', 'Day(s)', 'Week(s)'];
 const massUnits = ['g', 'mg', 'μg'];
@@ -247,4 +248,5 @@ export {
   getCellDataType,
   getUserFacingUnit,
   getStandardValue,
+  REACTION_VARIATIONS_TAB_KEY
 };