UI: show error on sample details

Author: haditariq

app/javascript/src/apps/mydb/elements/details/samples/SampleDetails.js

@@ -140,6 +140,7 @@ export default class SampleDetails extends React.Component {
       saveInventoryAction: false,
       isChemicalEdited: false,
       currentUser,
+      ketcherError: null
     };
 
     this.enableComputedProps = MatrixCheck(currentUser.matrix, 'computedProp');
@@ -283,14 +284,27 @@ export default class SampleDetails extends React.Component {
     }
   }
 
-  handleStructureEditorSave(molfile, svgFile = null, config = null, editor = 'ketcher') {
+  handleStructureEditorSave(molfile, svgFile = null, config = null, editor = 'ketcher', errorMessage = null) {
     const { sample } = this.state;
     sample.molfile = molfile;
     const smiles = (config && sample.molecule) ? config.smiles : null;
-    sample.contains_residues = molfile.indexOf(' R# ') > -1;
+    sample.contains_residues = molfile?.indexOf(' R# ') > -1;
     sample.formulaChanged = true;
     this.setState({ loadingMolecule: true });
 
+    if (errorMessage) {
+      this.setState({ ketcherError: errorMessage }, () => {
+        if (this.errorTimer) {
+          clearTimeout(this.errorTimer);
+        }
+        this.setState({ ketcherError: errorMessage });
+        this.errorTimer = setTimeout(() => {
+          this.setState({ ketcherError: null });
+          this.errorTimer = null;
+        }, 5000);
+      });
+    }
+
     const fetchError = (errorMessage) => {
       NotificationActions.add({
         title: 'Error on Sample creation',
@@ -1333,6 +1347,25 @@ export default class SampleDetails extends React.Component {
     );
   }
 
+  renderKetcherError() {
+    const ketcherError = this.state?.ketcherError;
+    if (!ketcherError) return null;
+    return (
+      <Alert
+        variant="danger"
+        show={ketcherError?.length > 0}
+        dismissible
+        onClose={() => this.setState({ ketcherSVGError: null })}
+      >
+        <strong>
+          Ketcher2 error:
+          {' '}
+        </strong>
+        <small className="text-muted">{ketcherError}</small>
+      </Alert>
+    );
+  }
+
   render() {
     const { sample } = this.state;
     const { visible, isChemicalEdited } = this.state;
@@ -1425,6 +1458,7 @@ export default class SampleDetails extends React.Component {
           {messageBlock}
         </Card.Header>
         <Card.Body>
+          {this.renderKetcherError()}
           {this.sampleInfo(sample)}
           <ElementDetailSortTab
             type="sample"

app/javascript/src/components/structureEditor/StructureEditorModal.js

@@ -228,6 +228,7 @@ export default class StructureEditorModal extends React.Component {
     this.handleEditorSelection = this.handleEditorSelection.bind(this);
     this.resetEditor = this.resetEditor.bind(this);
     this.updateEditor = this.updateEditor.bind(this);
+    this.generateSVGKet2 = this.generateSVGKet2.bind(this);
   }
 
   componentDidMount() {
@@ -279,16 +280,22 @@ export default class StructureEditorModal extends React.Component {
   async handleSaveStructureKet2(structure, editor) {
     try {
       const molfile = await structure.editor.getMolfile('V2000');
-      const imgfile = await structure.editor.generateImage(molfile, { outputFormat: 'svg' });
-      const text = await imgfile.text();
-      const updatedSvg = await transformSvgIdsAndReferences(text);
-      this.handleStructureSave(molfile, updatedSvg, editor.id);
+      const svg = await this.generateSVGKet2(structure, molfile);
+      this.handleStructureSave(molfile, svg, editor.id);
     } catch (error) {
-      console.error('Error saving structure:', error);
+      // Attempt to at least get the molfile, even if SVG generation fails
+      let molfile = null;
+      try {
+        molfile = await structure.editor.getMolfile('V2000');
+      } catch (molfileError) {
+        console.error('Error retrieving molfile after failure:', molfileError);
+      }
+
+      this.handleStructureSave(molfile, null, editor.id, null, error.message);
     }
   }
 
-  handleStructureSave(molfile, svg, editorId, info = null) {
+  handleStructureSave(molfile, svg, editorId, info = null, errorMessage = null) {
     const { hasChildren, hasParent, onSave } = this.props;
 
     this.setState(
@@ -298,12 +305,24 @@ export default class StructureEditorModal extends React.Component {
       },
       () => {
         if (onSave) {
-          onSave(molfile, svg, info, editorId);
+          onSave(molfile, svg, info, editorId, errorMessage);
         }
       }
     );
   }
 
+  async generateSVGKet2(structure, molfile) {
+    try {
+      const imageFile = await structure.editor.generateImage(molfile, { outputFormat: 'svg' });
+      const svgText = await imageFile.text();
+      const transformedSvg = await transformSvgIdsAndReferences(svgText);
+      return transformedSvg;
+    } catch (error) {
+      console.error('Error generating SVG:', error);
+      throw new Error(`SVG generation failed: ${error.message}`);
+    }
+  }
+
   initializeEditor() {
     const { editor, molfile } = this.state;
     if (editor) { editor.structureDef.molfile = molfile; }