Merge pull request #210 from ninjaconcept/210-fix-reaction-svg

fix display of reaction_svg in ElementsTable

app/assets/javascripts/components/ElementsTableEntries.js

@@ -7,6 +7,7 @@ import UIStore from './stores/UIStore';
 import ElementStore from './stores/ElementStore';
 import SVG from 'react-inlinesvg';
 import DragDropItemTypes from './DragDropItemTypes';
+import classnames from 'classnames';
 
 export default class ElementsTableEntries extends Component {
   isElementChecked(element) {
@@ -52,11 +53,27 @@ export default class ElementsTableEntries extends Component {
 
   previewColumn(element) {
     const {ui} = this.props;
-    const className = this.isElementSelected(element) ? 'molecule molecule-selected' : 'molecule';
+    const classNames = classnames({
+        'molecule': element.type == 'sample'
+      }, {
+        'molecule-selected': element.type == 'sample' && this.isElementSelected(element)
+      });
+    let svgContainer = {
+      verticalAlign: 'middle',
+      textAlign: 'center'
+    };
+    if(element.type == 'reaction') {
+      svgContainer = {
+        width: '50%',
+        position: 'relative',
+        padding: 0,
+        paddingBottom: '10%'
+      };
+    }
     if(ui.showPreviews && (element.type == 'sample' || element.type == 'reaction')) {
       return (
-        <td style={{verticalAlign: 'middle', textAlign: 'center'}}>
-          <SVG src={element.svgPath} className={className} key={element.id}/>
+        <td style={svgContainer}>
+          <SVG src={element.svgPath} className={classNames} key={element.id}/>
         </td>
       );
     } else {

app/assets/javascripts/components/ReactionDetails.js

@@ -77,7 +77,9 @@ export default class ReactionDetails extends Component {
     const svgContainerStyle = {
       position: 'relative',
       padding: 0,
-      paddingBottom: '20%'
+      paddingBottom: '20%',
+      height: 0,
+      width: '100%'
     };
     const submitLabel = (reaction && reaction.isNew) ? "Create" : "Save";
     return (
@@ -90,7 +92,7 @@ export default class ReactionDetails extends Component {
             </Col>
             <Col md={9}>
               <div style={svgContainerStyle}>
-                <SVG key={reaction.svgPath} src={reaction.svgPath} className="molecule-small"/>
+                <SVG key={reaction.svgPath} src={reaction.svgPath}/>
               </div>
             </Col>
           </Row>

lib/svg/reaction_composer.rb

@@ -16,7 +16,7 @@ module SVG
 
       @template = <<-END
         <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:cml="http://www.xml-cml.org/schema"
-          width="#{width}" height="100" viewBox="0 0 #{width} 100" style=" position: absolute; height: 100%; max-height: 200px; width: 100%;">
+          width="#{width}" height="100" viewBox="0 0 #{width} 100" style="position: absolute;height: 100%;max-height: 200px;width: 100%;top: 0;left: 0;">
         <title>Reaction 1</title>
       END
       @labels = <<-END

package.json

@@ -7,6 +7,7 @@
     "babelify": "6.1.3",
     "browserify": "~> 10.2.4",
     "browserify-incremental": "^3.0.1",
+    "classnames": "^2.1.5",
     "debounce": "^1.0.0",
     "deep-equal": "1.0.0",
     "es6-promise-debounce": "^1.0.1",