Chira visualization for Chimeras

client/gulpfile.js

@@ -20,7 +20,7 @@ const paths = {
     //    "../config/plugins/{visualizations,interactive_environments}/*/package.json",
     //    "../config/plugins/{visualizations,interactive_environments}/*/*/package.json"
     //],
-    plugin_build_dirs: ["../config/plugins/visualizations/{annotate_image,hyphyvision,openlayers,editor}/package.json"],
+    plugin_build_dirs: ["../config/plugins/visualizations/{annotate_image,hyphyvision,openlayers,chiraviz,editor}/package.json"],
     lib_locs: {
         // This is a stepping stone towards having all this staged
         // automatically.  Eventually, this dictionary and staging step will

config/plugins/visualizations/chiraviz/config/chiraviz.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE visualization SYSTEM "../../visualization.dtd">
+<visualization name="ChiRAViz">
+    <description>ChiRAViz</description>
+    <data_sources>
+        <data_source>
+           <model_class>HistoryDatasetAssociation</model_class>
+           <test type="isinstance" test_attr="datatype" result_type="datatype">binary.ChiraSQLite</test>
+            <to_param param_attr="id">dataset_id</to_param>
+        </data_source>
+    </data_sources>
+    <params>
+        <param type="dataset" var_name_in_template="hda" required="true">dataset_id</param>
+    </params>
+    <template>chiraviz.mako</template>
+</visualization>

config/plugins/visualizations/chiraviz/package.json

@@ -0,0 +1,28 @@
+{
+  "devDependencies": {
+    "copy-webpack-plugin": "^5.1.1",
+    "css-loader": "^3.4.2",
+    "file": "^0.2.2",
+    "file-loader": "^5.0.2",
+    "mini-css-extract-plugin": "^0.9.0",
+    "script-loader": "^0.7.2",
+    "system": "^2.0.1",
+    "url-loader": "^4.0.0",
+    "webpack": "^4.42.1",
+    "webpack-cli": "^3.3.11"
+  },
+  "dependencies": {
+    "bootstrap": "3.3.7",
+    "font-awesome": "^4.7.0",
+    "jquery": "3.2.1",
+    "plotly.js": "^1.52.3",
+    "underscore": "1.8.3"
+  },
+  "name": "galaxy-chiraviz",
+  "version": "1.1.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "build": "webpack --mode production"
+  }
+}

config/plugins/visualizations/chiraviz/src/css/rna.viz.css

@@ -0,0 +1,280 @@
+
+html, body {
+    height: 100%;
+    width: 100%;
+}
+
+.body-rna-viz {
+    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+    font-size: 9pt;
+    background-color: #f8f8f8;
+    overflow: hidden;
+}
+
+.samples-overlay {
+    display: none;
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.2);
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%; 
+    z-index: 1;
+}
+
+.samples-overlay > span {
+    margin-left: 45%;
+}
+
+.main-container {
+    height: 100%;
+    width: 100%;
+}
+
+.row {
+    margin: 0;
+}
+
+.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4,
+.col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8,
+.col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
+    padding-left: 0px;
+}
+
+.rna-header {
+    background-color: #2c3143;
+    color: white;
+    padding-left: 2.5%;
+    cursor: pointer;
+}
+
+.rna-header-row {
+    margin: 0 -7.9%;
+}
+
+.one-sample {
+    display: none;
+    height: 100%;
+    width: 100%;
+    margin: 0 1% 0 1%;
+}
+
+.top-row {
+    height: 6%;
+    width: 100%;
+    margin-top: 0.5%;
+}
+
+.filter-row {
+    display: none;
+    height: 4%;
+    width: 100%;
+    margin-top: 0.1%;
+}
+
+.heading {
+    margin-left: 5.5%;
+}
+
+.elem-rna {
+    font-size: 9pt;
+}
+
+.rna-transcriptions-container {
+    padding-left: 0;
+    width: 16%;
+    height: 100%;
+    border-right: 1px solid black;
+    overflow: auto;
+}
+
+.landing-page {
+    margin-top: 1%;
+    border-top: 1px solid black;
+    border-bottom: 1px solid black;
+    background-color: white;
+    height: 84%;
+    width: 100%;
+    overflow: auto;
+}
+
+.rna-results {
+    margin-top: 1%;
+    border-top: 1px solid black;
+    border-bottom: 1px solid black;
+    background-color: white;
+    height: 83%;
+    width: 100%;
+    display: none;
+}
+
+.footer-row {
+    height: 8%;
+    width: 100%;
+    display: none;
+}
+
+.transcriptions-ids {
+    overflow-y: auto;
+    padding-top: 0.5%;
+    height: 100%;
+    font-size: 8pt;
+}
+
+.sample-name {
+    margin-top: 1%;
+    font-weight: bold;
+}
+
+.sample-current-size {
+    font-size: 8pt;
+}
+
+.common-genes {
+    display: none;
+    height: 50%;
+    width: 84%;
+    overflow: auto;
+    border-bottom: 1px solid black;
+}
+
+.first-gene {
+    height: 50%;
+    width: 42%;
+    border-right: 1px solid black;
+    overflow: auto;
+    display: none;
+}
+
+.second-gene {
+    height: 50%;
+    width: 42%;
+    overflow: auto;
+    display: none;
+}
+
+.both-genes {
+    display: none;
+    height: 100%;
+    width: 84%;
+}
+
+.selected-item {
+    background-color: #5cb85c;
+    font-weight: bold;
+}
+
+.btn-rna {
+    margin: 0.5% 0 0 0.3%;
+}
+
+.interaction-header {
+    margin: 0.5% 0 0 1%;
+    background-color: #f8f8f8;
+    font-weight: bold;
+    height: 3%;
+}
+
+.interaction-header a {
+    margin-left: 1%;
+    font-weight: normal;
+    color: black;
+}
+
+.single-interactions-info {
+    padding-top: 0.5%;
+    display: inline-block;
+    width: 49%;
+    height: 50%;
+    overflow: auto;
+}
+
+#info-gene1 {
+    margin: 0 1% 0 1%;
+    overflow: hidden;
+}
+
+#info-gene2 {
+    border-left: 1px solid black;
+    padding-left: 1%;
+    overflow: hidden;
+}
+
+.alignment-canvas {
+    margin-left: 5%;
+}
+
+#rna-alignment-graphics1 p, #rna-alignment-graphics2 p {
+    margin-left: 10%;
+    font-size: 13pt;
+}
+
+#rna-alignment-graphics1 svg, #rna-alignment-graphics2 svg {
+    margin-top: 3%;
+}
+
+.rna-footer {
+    margin-left: 45%;
+}
+
+.rna-footer a {
+    color: black;
+}
+
+.symbol-link {
+    cursor: pointer;
+}
+
+.search-input {
+    position: relative;
+}
+.search-input input { 
+    border: none;
+    background: #fff;
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.search-input img {
+    position: absolute;
+    width: 10%;
+    top: 7px;
+    right: 20px;
+    cursor: pointer;
+}
+
+.chkbx-interaction {
+    margin: 1%;
+}
+
+.plus-icon {
+    vertical-align: text-bottom;
+    margin: 1%;
+    width: 8%;
+    cursor: pointer;
+}
+
+.rna-pair-interaction {
+    vertical-align: text-bottom;
+    margin: 1%;
+}
+
+.symbols-records {
+    padding-left: 10%;
+}
+
+.sym-record {
+    border-bottom: 1px black solid;
+    width: max-content;
+    cursor: pointer;
+}
+
+.check-all-interactions span {
+    vertical-align: text-bottom;
+    padding: 0.5%;
+}
+
+.mfe-info {
+    margin-left: 1%;
+}

config/plugins/visualizations/chiraviz/src/index.js

@@ -0,0 +1,9 @@
+import 'script-loader!jquery'
+import 'script-loader!./js/rna-viz'
+import 'script-loader!underscore/underscore-min'
+import 'script-loader!plotly.js/dist/plotly.min'
+import 'script-loader!./js/visualize-alignment'
+import 'script-loader!bootstrap/dist/js/bootstrap.min';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'font-awesome/css/font-awesome.min.css';
+import './css/rna.viz.css'