Anvi'o backend for 'genome view'

.gitmodules

@@ -37,3 +37,6 @@
 [submodule "anvio/data/interactive/lib/JavaScript-MD5"]
 	path = anvio/data/interactive/lib/JavaScript-MD5
 	url = https://github.com/blueimp/JavaScript-MD5.git
+[submodule "anvio/data/interactive/lib/fabric.js"]
+	path = anvio/data/interactive/lib/fabric
+	url = https://github.com/fabricjs/fabric.js.git

anvio/bottleroutes.py

@@ -174,12 +174,13 @@ def register_routes(self):
         self.route('/data/get_variability',                    callback=self.get_variability, method='POST')
         self.route('/data/store_variability',                  callback=self.store_variability, method='POST')
         self.route('/data/store_structure_as_pdb',             callback=self.store_structure_as_pdb, method='POST')
-        self.route('/data/get_gene_function_info/<gene_callers_id:int>',             callback=self.get_gene_function_info)
-        self.route('/data/get_model_info/<gene_callers_id:int>',             callback=self.get_model_info)
+        self.route('/data/get_gene_function_info/<gene_callers_id:int>', callback=self.get_gene_function_info)
+        self.route('/data/get_model_info/<gene_callers_id:int>', callback=self.get_model_info)
         self.route('/data/filter_gene_clusters',               callback=self.filter_gene_clusters, method='POST')
         self.route('/data/reroot_tree',                        callback=self.reroot_tree, method='POST')
         self.route('/data/save_tree',                          callback=self.save_tree, method='POST')
         self.route('/data/check_homogeneity_info',             callback=self.check_homogeneity_info, method='POST')
+        self.route('/data/get_genome_view_data',               callback=self.get_genome_view_data, method='POST')
         self.route('/data/search_items',                       callback=self.search_items_by_name, method='POST')
         self.route('/data/get_taxonomy',                       callback=self.get_taxonomy, method='POST')
         self.route('/data/get_functions_for_gene_clusters',    callback=self.get_functions_for_gene_clusters, method='POST')
@@ -256,6 +257,8 @@ def redirect_to_app(self):
             homepage = 'metabolism.html'
         elif self.interactive.mode == 'inspect':
             redirect('/app/charts.html?id=%s&show_snvs=true&rand=%s' % (self.interactive.inspect_split_name, self.random_hash(8)))
+        elif self.interactive.mode == 'genomeview':
+            homepage = 'genomeview.html'
 
         redirect('/app/%s?rand=%s' % (homepage, self.random_hash(8)))
 
@@ -1345,6 +1348,14 @@ def get_initial_data(self):
         return json.dumps(self.interactive.get_initial_data())
 
 
+    def get_genome_view_data(self):
+        try:
+            return json.dumps({'genomes': self.interactive.genomes,
+                               'gene_associations': self.interactive.gene_associations})
+        except Exception as e:
+            return json.dumps({'error': f"Something went wrong at the backend :( Here is the error message: '{e}'"})
+
+
     def get_column_info(self):
         gene_callers_id = int(request.forms.get('gene_callers_id'))
         engine = request.forms.get('engine')

anvio/data/interactive/css/genomeview.css

@@ -0,0 +1,185 @@
+.container {
+    width: 95%; //this is being overwritten though.
+    align-content: center;
+    margin: 0 auto 20px auto;
+    background: rgba(255,255,255,0.5);
+    box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
+    padding: 20px 30px;
+    touch-action: none;
+}
+
+#myCanvas {
+}
+
+svg {
+    font-family: 'Lato', Arial, serif;
+    font-size: 10px;
+    font-weight: 700;
+    text-shadow: 0 1px 1px rgba(255,255,255,0.8);
+}
+
+g.scale g.brush rect.background {
+    fill: rgba(0,0,0,.1);
+}
+
+g.scale g.axis path {
+    stroke-opacity: 0;
+}
+
+g.scale g.axis line {
+    stroke-opacity: .5;
+}
+
+.axis path, .axis line {
+    fill: none;
+    stroke: #aaa;
+    shape-rendering: crispEdges;
+}
+
+.brush .extent {
+    stroke: black;
+    fill-opacity: .125;
+    shape-rendering: crispEdges;
+}
+
+g.scale rect.background{
+    fill: rgb(200,200,255);
+    visibility: visible !important;
+    pointer-events: all;
+}
+
+#tooltip-body{
+    height: 300px;
+    width: 300px;
+    background-color: lavenderblush;
+    opacity: 85%;
+    border-style: solid;
+    border-width: 3px;
+    border-radius: 15px;
+}
+
+
+#toggle-panel-settings {
+    position: fixed;
+    height: 100px;
+    width: 15px;
+    background-color: #EEEEEE;
+    border: solid 1px #DDDDDD;
+    top: calc(40%);
+    border-radius: 10px 0px 0px 10px;
+    cursor: pointer;
+    font-size: 10px;
+    padding-top: 14px;
+    right: 0px;
+    z-index: 999;
+}
+
+#settings-panel {
+  	display: none;
+    top: 0px;
+    right: 0px;
+    position: fixed;
+    height: 100%;
+    background: url('../images/fractal.jpg') center center scroll;
+    border-left: 1px solid #D3D3D3;
+    opacity: 0.9;
+    width: 420px;
+    padding: 20px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+    overflow-y: scroll;
+    z-index: 999;
+    color: black;
+}
+
+.settings-header {
+    font-variant: small-caps;
+    font-size: 1.2em;
+    border-bottom: 1px #969696 solid;
+    display: block;
+    margin-bottom: 5px;
+    margin-top: 12px;
+}
+
+.settings-section-info {
+    background: #e7f3381a;
+    padding: 3px 6px 5px 10px;
+    border: 1px dashed #a9a9a9;
+    border-radius: 9px;
+    font-size: 12px;
+}
+
+#settings-section-info-SNV-warning {
+  display: none;
+  color: red;
+}
+
+#settings-panel code {
+	padding: 1.4px 2px;
+    font-size: 90%;
+    color: #c7254e;
+    background-color: #f3f3f3;
+    border-radius: 2px;
+}
+
+.settings-info-line {
+    text-align: center;
+    border: 1px dashed #c5c5c5;
+    background: #f3f3f3;
+    width: 40%;
+    margin: auto;
+    border-radius: 7px;
+    font-style: italic;
+}
+
+.toggle-panel-settings-pos {
+    right: 420px !important;
+}
+
+#settings-panel .btn {
+    margin-bottom: 5px !important;
+}
+
+.sidebar-footer {
+    position: fixed;
+    background-color: white;
+    width: 420px;
+    bottom: -0px;
+    border-top: 1px solid #D3D3D3;
+    border-right: 1px solid #D3D3D3;
+}
+
+.sidebar-footer > .btn {
+    width: 50%;
+}
+
+body{
+    font-family: 'Lato', Arial, serif;
+    font-weight: 300;
+    font-size: 14px;
+    color: #888;
+    -webkit-font-smoothing: antialiased;
+}
+
+a{
+    color: #722;
+    text-decoration: none;
+}
+
+#labelAndMainContainer{
+    display: flex;
+    flex-direction: row;
+}
+
+#labelAndDropdownContainer{
+    border-style: solid;
+    border-width: 1;
+    padding: 15px;
+    margin: 5px;
+}
+
+#scaleContainer{
+    border-style: solid;
+    border-width: 1;
+    padding: 15px;
+    margin: 5px;
+}