{"version":3,"sources":["webpack:///./src/ohm/components/Cluster.vue?b1c2","webpack:///src/ohm/components/Cluster.vue","webpack:///./src/ohm/components/Cluster.vue?4c41","webpack:///./src/ohm/components/Cluster.vue","webpack:///./src/ohm/components/Cluster.vue?436f"],"names":["render","_vm","this","_h","$createElement","_c","_self","style","staticClass","_v","attrs","$store","state","host","task","_s","id","showStructure","_e","nativeOn","$event","viewClusters","apply","arguments","directives","name","rawName","value","expression","structureReady","ref","staticRenderFns","data","active_site","allosteric_site","clusterStyle","width","margin","position","paths","props","components","NglView","computed","methods","download","cyPromise","then","redirect","window","location","href","url","openNewTab","open","getInd","results","ind","find","getSites","vec","setSites","v","par","$nextTick","checkTask","$refs","ngl","load","Blob","structure_data","obj","setColor","method","withCredentials","transformResponse","console","log","response","split","filter","store","objects","push","sel","color","error","setTimeout","mounted","component"],"mappings":"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","file":"js/chunk-bee48ddc.029bc276.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{style:(_vm.clusterStyle)},[_c('div',{staticClass:\"box-head\"},[_vm._v(\"3D structure rendered by clusters\")]),_c('div',{staticClass:\"box-tool\"},[_c('a',{attrs:{\"href\":_vm.$store.state.host+\"/dokhlab/actions/ohm/result?id=\" + (_vm.task.id) + \"&file=cluster-pse\"}},[_vm._v(_vm._s(_vm.task.id)+\"-cluster.pse\")])]),(!_vm.showStructure)?_c('div',[_c('el-button',{attrs:{\"type\":\"text\"},nativeOn:{\"click\":function($event){return _vm.viewClusters.apply(null, arguments)}}},[_vm._v(\"View Clusters\")])],1):_vm._e(),_c('div',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.showStructure),expression:\"showStructure\"},{name:\"loading\",rawName:\"v-loading\",value:(_vm.showStructure && !_vm.structureReady),expression:\"showStructure && !structureReady\"}]},[_c('ngl-view',{ref:\"ngl\",staticClass:\"ngl-view\",attrs:{\"height\":600,\"nameWidth\":200}})],1)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div :style=\"clusterStyle\">\n    <div class=\"box-head\">3D structure rendered by clusters</div>\n\n    <div class=\"box-tool\">\n      <a :href=\"$store.state.host+`/dokhlab/actions/ohm/result?id=${task.id}&file=cluster-pse`\">{{task.id}}-cluster.pse</a>\n    </div>\n\n    <div v-if=\"!showStructure\">\n      <el-button type=\"text\" @click.native=\"viewClusters\">View Clusters</el-button>\n    </div>\n\n    <!--\n    <div v-if=\"showStructure && !structureReady\">\n      Loading (This may take a few minutes) <i class=\"el-icon-loading\"></i>\n    </div>\n    -->\n\n    <div v-show=\"showStructure\" v-loading=\"showStructure && !structureReady\">\n      <ngl-view class=\"ngl-view\" ref=\"ngl\" :height=\"600\" :nameWidth=\"200\"></ngl-view>\n    </div>\n  </div>\n</template>\n\n<script>\n// import interpolate from 'color-interpolate'\nimport * as NGL from 'ngl'\nimport { saveAs } from 'file-saver'\nimport NglView from './NglView/NglView.vue'\n// import * as NGL from 'ngl'\nimport axios from 'axios'\n\nexport default {\n  name: 'Cluster',\n\n  data () {\n    return {\n      active_site: [],\n      allosteric_site: [],\n      clusterStyle: {\n        width: '100%',\n//        border: '1px solid #eeeeee',\n        margin: '20px 0px',\n        position: 'relative',\n        '-webkit-user-select': 'none',\n        '-moz-user-select': 'none',\n        '-khtml-user-select': 'none',\n        '-ms-user-select': 'none'\n      },\n      paths: {},\n      showStructure: false,\n      structureReady: false\n    }\n  },\n\n  props: [ 'value' ],\n\n  components: {\n    NglView\n  },\n\n  computed: {\n    task () {\n      return this.$store.state.task\n    }\n  },\n\n  methods: {\n    download () {\n      this.cyPromise.then(cy => {\n        saveAs(cy.png({'output': 'blob'}), 'nodes.png')\n      })\n    },\n\n    redirect (url) {\n      window.location.href = url\n    },\n\n    openNewTab (url) {\n      window.open(url, '_blank')\n    },\n\n//    getIndByNum (num) {\n//      return this.task.results.ind.find(i => i.num === num)\n//    },\n\n    getInd (chainName, resNum) {\n      return this.task.results.ind.find(i => i.name === `${chainName}/${resNum}`)\n    },\n\n    getSites (sites) {\n      let vec = []\n      let ls = sites.trim().split(/,/)\n      for (let s of ls) {\n        let w = s.split(/\\//)\n        let chainName = w[0]\n        let residues = w[1]\n        let v = residues.split(/\\+/)\n        for (let i of v) {\n          let u = i.split(/-/)\n          if (u.length === 2) {\n            let a = parseInt(u[0])\n            let b = parseInt(u[1])\n            for (let j = a; j <= b; j++) {\n              vec.push(this.getInd(chainName, j).num)\n            }\n          } else if (u.length === 1) {\n            vec.push(this.getInd(chainName, u[0]).num)\n          }\n        }\n      }\n      return vec\n    },\n\n    setSites () {\n      let v = this\n      v.active_site = v.getSites(v.task.par.active_site)\n    },\n\n    viewClusters () {\n      this.showStructure = true\n      this.$nextTick(() => {\n        this.checkTask()\n      })\n    },\n\n    checkTask () {\n      let v = this\n      let task = this.task\n\n      if (task) {\n        v.$refs.ngl.load(new Blob([v.task.par.structure_data], {type: 'text/plain'}), { ext: v.task.par.structure_type }).then(obj => {\n          obj.setColor('bfactor')\n\n          let url = v.$store.state.host + `/dokhlab/actions/ohm/result?id=${task.id}&file=clusters`\n\n          axios({\n            method: 'get',\n            url,\n            withCredentials: true,\n            transformResponse: []\n          }).then(response => {\n            console.log(response.data)\n            response.data.split('\\n').filter(l => l.trim()).forEach((line, i) => {\n              let ls = line.trim().split(':')\n              let ls1 = ls[0].trim().split(/\\s+/)\n              let ls2 = ls[1].trim().split(/\\s+/)\n              let color = ls1[2]\n              let selections = ls2.map(i => {\n                let l = i.split('-')\n                return `${l[1]}:${l[0]}`\n              }).join(' or ')\n              let sel = v.$refs.ngl.store.makeObject(`clust${i + 1}`, 'selection', [obj.components[0]], [new NGL.Selection(selections)])\n              v.$refs.ngl.store.objects.push(sel)\n              sel.setColor(color)\n\n              v.structureReady = true\n            })\n          }).catch(error => {\n            console.log(error)\n          })\n        })\n      } else {\n        setTimeout(() => {\n          v.checkTask()\n        }, 500)\n      }\n    }\n  },\n\n  mounted () {\n  }\n}\n</script>\n\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\n<style lang=\"scss\" scoped>\n@import \"../styles/theme.scss\";\n\n\n.ngl-view {\n/*\n  border: 1px solid #eeeeee;\n  margin: 20px 0px;\n  */\n}\n\n.box-head {\n  padding: 10px;\n  border-bottom: 1px solid #eeeeee;\n  background-color: $theme-color;\n  font-weight: 700;\n  color: white;\n}\n\n.box-tool {\n  padding:10px 0px;\n  /*\n  border-bottom:1px solid #eeeeee\n  */\n}\n\n</style>\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Cluster.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Cluster.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Cluster.vue?vue&type=template&id=3fc3150c&scoped=true&\"\nimport script from \"./Cluster.vue?vue&type=script&lang=js&\"\nexport * from \"./Cluster.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Cluster.vue?vue&type=style&index=0&id=3fc3150c&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"3fc3150c\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Cluster.vue?vue&type=style&index=0&id=3fc3150c&lang=scss&scoped=true&\""],"sourceRoot":""}