molecule-3d-for-react
Version:
3D molecule visualization with React and 3Dmol.js
2 lines • 11 kB
JavaScript
module.exports=function(e){function t(o){if(r[o])return r[o].exports;var n=r[o]={exports:{},id:o,loaded:!1};return e[o].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var r={};return t.m=e,t.c=r,t.p="/js/",t(0)}([function(e,t,r){e.exports=r(4)},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r={ATOM:"Atom",RESIDUE:"Residue",CHAIN:"Chain"};t.default=r},function(e,t,r){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var l=function(){function e(e,t){var r=[],o=!0,n=!1,a=void 0;try{for(var i,l=e[Symbol.iterator]();!(o=(i=l.next()).done)&&(r.push(i.value),!t||r.length!==t);o=!0);}catch(e){n=!0,a=e}finally{try{!o&&l.return&&l.return()}finally{if(n)throw a}}return r}return function(t,r){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,r);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),s=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),u=r(9),p=o(u),d=r(10),c=o(d),f=r(5),y=o(f),h=r(6),m=o(h),b=r(1),v=o(b);window.$=p.default;var S=r(7),g=14,O=16711680,T=255,w=.8,_=function(e){function t(e){n(this,t);var r=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.onClickAtom=function(e){var t=r.props.modelData.atoms,o=t[e.serial],n=r.props.selectionType,a=m.default.addSelection(t,r.state.selectedAtomIds,o,n);r.setState({selectedAtomIds:a}),r.props.onChangeSelection&&r.props.onChangeSelection(a)},r.state={selectedAtomIds:e.selectedAtomIds},r.lastOutline={width:0},r}return i(t,e),s(t,null,[{key:"isModelDataEmpty",value:function(e){return 0===e.atoms.length&&0===e.bonds.length}},{key:"render3dMolModel",value:function(e,r){e.clear(),t.isModelDataEmpty(r)||(e.addModel(m.default.modelDataToCDJSON(r),"json",{keepH:!0}),e.getModel().selectedAtoms().forEach(function(e){var t=e,o=(r.atoms[e.serial].residue_name||"").replace(/[0-9]+/,"");t.atom=r.atoms[e.serial].name,t.chain=r.atoms[e.serial].chain,t.resi=r.atoms[e.serial].residue_index,t.resn=o}))}},{key:"render3dMolShapes",value:function(e,t){e.removeAllShapes(),t.forEach(function(t){t.type&&e["add"+t.type](y.default.getShapeSpec(t))})}},{key:"render3dMolLabels",value:function(e,t){e.removeAllLabels(),t.forEach(function(t){e.addLabel(t.text,t)})}},{key:"render3dMolOrbital",value:function(e,t){if(t.cube_file){var r=new S.VolumeData(t.cube_file,"cube");e.addIsosurface(r,{isoval:t.iso_val,color:t.positiveVolumetricColor||O,opacity:t.opacity||w}),e.addIsosurface(r,{isoval:-t.iso_val,color:t.negativeVolumetricColor||T,opacity:t.opacity||w})}}}]),s(t,[{key:"componentDidMount",value:function(){this.render3dMol()}},{key:"componentWillReceiveProps",value:function(e){this.setState({selectedAtomIds:e.selectedAtomIds})}},{key:"componentDidUpdate",value:function(){this.render3dMol()}},{key:"render3dMol",value:function(){var e=this;if(this.glviewer||!t.isModelDataEmpty(this.props.modelData)){var r=this.glviewer||S.createViewer((0,p.default)(this.container),{defaultcolors:S.elementColors.rasmol}),o=m.default.modelDataEquivalent(this.oldModelData,this.props.modelData);o||(this.lastStylesByAtom=null,t.render3dMolModel(r,this.props.modelData)),this.props.outlineWidth===this.lastOutline.width&&this.props.outlineColor===this.lastOutline.color||(this.props.outlineWidth?this.lastOutline={style:"outline",width:this.props.outlineWidth,color:this.props.outlineColor}:this.lastOutline={},r.setViewStyle(this.lastOutline));var n=Object.create(null),a=Object.create(null);this.props.modelData.atoms.forEach(function(t,o){var i=e.state.selectedAtomIds.indexOf(t.serial)!==-1,l=y.default.getLibStyle(t,i,e.props.atomLabelsShown,e.props.styles[o]);e.props.atomLabelsShown&&r.addLabel(t.name,{fontSize:g,position:{x:t.positions[0],y:t.positions[1],z:t.positions[2]}});var s=JSON.stringify(l);a[t.serial]=s,e.lastStylesByAtom&&e.lastStylesByAtom[t.serial]===s||(n[s]||(n[s]=[]),n[s].push(t.serial))}),this.lastStylesByAtom=a,Object.entries(n).forEach(function(e){var t=l(e,2),o=t[0],n=t[1];r.setStyle({serial:n},JSON.parse(o))}),t.render3dMolShapes(r,this.props.shapes),t.render3dMolLabels(r,this.props.labels),t.render3dMolOrbital(r,this.props.orbital);var i=!1;if("number"==typeof this.props.nearClip&&"number"==typeof this.props.farClip&&(r.setSlab(this.props.nearClip,this.props.farClip),i=!0),r.setBackgroundColor(y.default.colorStringToNumber(this.props.backgroundColor),this.props.backgroundOpacity),r.setClickable({},!0,this.onClickAtom),r.render(),this.oldModelData||(r.zoom(),r.zoomTo(.8)),o||(i||r.fitSlab(),this.props.onRenderNewData(r)),!this.glviewer)var s=this,u=setInterval(function(){s.container.children.length>0&&s.container.children[0].offsetParent&&(r.resize(),clearInterval(u))},50);this.oldModelData=this.props.modelData,this.glviewer=r}}},{key:"render",value:function(){var e=this;return c.default.createElement("div",{className:"molecule-3d",style:{width:this.props.width,height:this.props.height,position:"relative",margin:"0 auto"},ref:function(t){e.container=t}})}}]),t}(c.default.Component);_.defaultProps={atomLabelsShown:!1,backgroundOpacity:1,backgroundColor:"#73757c",height:"500px",onRenderNewData:function(){},orbital:{},selectedAtomIds:[],selectionType:v.default.ATOM,shapes:[],labels:[],styles:{},width:"500px",outlineWidth:0,outlineColor:"#000000",nearClip:null,farClip:null},_.propTypes={atomLabelsShown:c.default.PropTypes.bool,backgroundColor:c.default.PropTypes.string,backgroundOpacity:c.default.PropTypes.number,height:c.default.PropTypes.string,modelData:c.default.PropTypes.shape({atoms:c.default.PropTypes.array,bonds:c.default.PropTypes.array}).isRequired,onChangeSelection:c.default.PropTypes.func,onRenderNewData:c.default.PropTypes.func,orbital:c.default.PropTypes.shape({cube_file:c.default.PropTypes.string,iso_val:c.default.PropTypes.number,opacity:c.default.PropTypes.number,positiveVolumetricColor:c.default.PropTypes.string,negativeVolumetricColor:c.default.PropTypes.string}),selectedAtomIds:c.default.PropTypes.arrayOf(c.default.PropTypes.number),selectionType:c.default.PropTypes.oneOf([v.default.ATOM,v.default.RESIDUE,v.default.CHAIN]),shapes:c.default.PropTypes.arrayOf(c.default.PropTypes.object),labels:c.default.PropTypes.arrayOf(c.default.PropTypes.object),styles:c.default.PropTypes.objectOf(c.default.PropTypes.object),width:c.default.PropTypes.string,nearClip:c.default.PropTypes.number,farClip:c.default.PropTypes.number,outlineWidth:c.default.PropTypes.number,outlineColor:c.default.PropTypes.string},t.default=_},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r={ARROW:"Arrow",SPHERE:"Sphere",CYLINDER:"Cylinder"};t.default=r},function(e,t,r){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var n=r(2),a=o(n);t.default=a.default},function(e,t,r){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var n=function(){function e(e,t){var r=[],o=!0,n=!1,a=void 0;try{for(var i,l=e[Symbol.iterator]();!(o=(i=l.next()).done)&&(r.push(i.value),!t||r.length!==t);o=!0);}catch(e){n=!0,a=e}finally{try{!o&&l.return&&l.return()}finally{if(n)throw a}}return r}return function(t,r){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,r);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),a=r(3),i=o(a),l="stick",s={colorStringToNumber:function(e){if(4!==e.length&&7!==e.length)return e;if("#"!==e[0])return e;var t=parseInt(e.substr(1,e.length-1),16);return isNaN(t)?e:t},getShapeSpec:function(e,t){var r=void 0;e.color&&(r=s.colorStringToNumber(e.color));var o=Object.assign({},{alpha:.8,callback:t,clickable:!1,color:65027,radius:e.radius},e,{color:r});if(e.type===i.default.ARROW)o.start=e.start,o.end=e.end;else if(e.type===i.default.SPHERE)o.center=e.center;else{if(e.type!==i.default.CYLINDER)throw new Error("Invalid shape type.");o.fromCap=!0,o.toCap=!0,o.start=e.start,o.end=e.end}return o},getLibStyle:function(e,t,r){var o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},a={},i=o.visualization_type||l;return a[i]={},Object.entries(o).forEach(function(e){var t=n(e,2),r=t[0],o=t[1];"visualization_type"!==r&&(a[i][r]=o)}),t&&(a[i].color=2094078),"string"==typeof a[i].color&&(a[i].color=s.colorStringToNumber(a[i].color)),a}};t.default=s},function(e,t,r){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var n=r(8),a=r(1),i=o(a),l={modelDataToCDJSON:function(e){var t=e.atoms.map(function(e){return{l:e.elem,x:e.positions[0],y:e.positions[1],z:e.positions[2],mass:e.mass_magnitude}}),r=e.bonds.map(function(e){return{b:e.atom1_index,e:e.atom2_index,o:e.bond_order}});return{m:[{a:t,b:r}]}},addSelection:function(e,t,r,o){var n=t.slice(),a=t.indexOf(r.serial),s=a===-1;return o===i.default.ATOM?(s?n.push(r.serial):n.splice(a,1),n):(s?e.forEach(function(e){l.isSameGroup(r,e,o)&&n.push(e.serial)}):n=n.filter(function(t){var n=e[t];return!l.isSameGroup(r,n,o)}),n)},isSameGroup:function(e,t,r){if(r===i.default.RESIDUE)return e.residue_index===t.residue_index;if(r===i.default.CHAIN)return e.chain===t.chain;throw new Error("selectionType must be either residue or chain")},modelDataEquivalent:function(e,t){if(!e||!t)return!1;var r=new n.Set(e.atoms.map(function(e){return e.serial})),o=new n.Set(t.atoms.map(function(e){return e.serial})),a=new n.Set(e.bonds.map(function(e){return e.atom1_index+"=>"+e.atom2_index})),i=new n.Set(t.bonds.map(function(e){return e.atom1_index+"=>"+e.atom2_index})),l=r.equals(o),s=a.equals(i);if(!l||!s)return!1;var u=new Map,p=!0,d=!1,c=void 0;try{for(var f,y=e.atoms[Symbol.iterator]();!(p=(f=y.next()).done);p=!0){var h=f.value;u.set(h.serial,h.positions||[])}}catch(e){d=!0,c=e}finally{try{!p&&y.return&&y.return()}finally{if(d)throw c}}return t.atoms.every(function(e){return u.get(e.serial).every(function(t,r){var o=e.positions||[];return o[r]===t})})}};t.default=l},function(e,t){e.exports=require("3dmol")},function(e,t){e.exports=require("immutable")},function(e,t){e.exports=require("jquery")},function(e,t){e.exports=require("react")}]);
//# sourceMappingURL=bundle.js.map