genes are always colored if they are present in the metadata #67

.gitignore

@@ -1,4 +1,4 @@
-#public/test_data
+public/test_data
 .idea/
 *.js.swp
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

public/test_data/SARS-CoV-2.genbank.small/metadata.json

@@ -1,35 +1,14 @@
 [
  {
    "Accession": "NC_045512.2",
-   "Release_Date": "2020-01-13T00:00:00Z",
-   "Species": "Severe acute respiratory syndrome-related coronavirus",
-   "Length": 29903,
-   "Geo_Location": "China",
-   "Host": "Homo sapiens",
-   "Isolation_Source": "",
-   "Collection_Date": "2019-12",
-   "GenBank_Title": "Severe acute respiratory syndrome coronavirus 2 isolate Wuhan-Hu-1, complete genome"
+   "Info": "InfoGene A"
  },
  {
    "Accession": "MT534320.1",
-   "Release_Date": "2020-03-17T00:00:00Z",
-   "Species": "Severe acute respiratory syndrome-related coronavirus",
-   "Length": 29611,
-   "Geo_Location": "Spain",
-   "Host": "Homo sapiens",
-   "Isolation_Source": "oronasopharynx",
-   "Collection_Date": "2020-03-08",
-   "GenBank_Title": "Severe acute respiratory syndrome coronavirus 2 isolate SARS-CoV-2/Valencia001/human/2020/ESP, partial genome"
+   "Info": "InfoGene B"
  },
  {
    "Accession": "MT534314.1",
-   "Release_Date": "2020-03-17T00:00:00Z",
-   "Species": "Severe acute respiratory syndrome-related coronavirus",
-   "Length": 29611,
-   "Geo_Location": "Italy",
-   "Host": "Homo sapiens",
-   "Isolation_Source": "oronasopharynx",
-   "Collection_Date": "2020-03-04",
-   "GenBank_Title": "Severe acute respiratory syndrome coronavirus 2 isolate SARS-CoV-2/Valencia002/human/2020/ESP, partial genome"
+   "Info": "InfoGene C"
  }
 ]

src/App.js

@@ -88,7 +88,7 @@ class App extends Component {
       "useWidthCompression",
       this.openRelevantChunksFromIndex.bind(this)
     );
-    observe(this.props.store, "colorByGeo", this.recalcY.bind(this));
+    //observe(this.props.store, "colorByGeneAnnotation", this.recalcY.bind(this));
 
     observe(this.props.store, "useConnector", this.recalcXLayout.bind(this)); //TODO faster rerender
 

src/ComponentRect.js

@@ -70,10 +70,10 @@ class ComponentRect extends React.Component {
 
     let pathName = this.props.pathNames[uncompressed_y];
     let rowColor = "#838383";
-    if (this.props.store.colorByGeo && this.props.store.metaData) {
+    if (this.props.store.colorByGeneAnnotation && this.props.store.metaData) {
       let metaData = this.props.store.metaData;
       if (metaData.get(pathName) !== undefined) {
-        rowColor = colorFromStr(metaData.get(pathName).Geo_Location);
+        rowColor = colorFromStr(metaData.get(pathName).Accession);
       }
     }
 

src/ControlHeader.js

@@ -226,15 +226,17 @@ class ControlHeader extends React.Component {
             </React.Fragment>
           ) : (
             <></>
+            /*
+              // At the moment the gene annotation will be always displayed if present
+              <span>
+                {" "}
+                    Display gene annotations:
+                <Observer>
+                  {() => <ColorGeoSwitch store={this.props.store} />}
+                </Observer>
+              </span>
+              */
           )}
-          <span></span>
-          <span>
-            {" "}
-            Color by Provenance:
-            <Observer>
-              {() => <ColorGeoSwitch store={this.props.store} />}
-            </Observer>
-          </span>
           <span>
             {" "}
             Row Height:
@@ -343,22 +345,18 @@ WidthCompressedViewSwitch.propTypes = {
 
 export default ControlHeader;
 
-class ColorGeoSwitch extends React.Component {
+/*class ColorGeoSwitch extends React.Component {
   render() {
     return (
-      <Observer>
-        {() => (
-          <input
-            type="checkbox"
-            checked={this.props.store.colorByGeo}
-            onChange={this.props.store.toggleColorByGeo}
-          />
-        )}
-      </Observer>
+        <input
+          type="checkbox"
+          checked={this.props.store.colorByGeo}
+          onChange={this.props.store.toggleColorByGeo}
+        />
     );
   }
 }
 
 ColorGeoSwitch.propTypes = {
   store: PropTypes.object,
-};
+};*/

src/SpanCell.js

@@ -47,8 +47,7 @@ export class MatrixCell extends React.Component {
 
       if (this.props.store.metaData.get(this.props.pathName) !== undefined) {
         new_content +=
-          " ; " +
-          this.props.store.metaData.get(this.props.pathName).Geo_Location;
+          "\n" + this.props.store.metaData.get(this.props.pathName).Info;
       }
 
       tooltipContent += new_content;

src/ViewportInputsStore.js

@@ -29,14 +29,7 @@ const PathNucPos = types.model("PathNucPos", {
 
 const metaDataModelEntry = types.model({
   Accession: types.identifier,
-  Release_Date: types.string,
-  Species: types.string,
-  Length: types.integer,
-  Geo_Location: types.string,
-  Host: types.string,
-  Isolation_Source: types.string,
-  Collection_Date: types.string,
-  GenBank_Title: types.string,
+  Info: types.string,
 });
 
 let RootStore;
@@ -102,7 +95,7 @@ RootStore = types
 
     last_bin_pangenome: 0,
 
-    colorByGeo: false,
+    colorByGeneAnnotation: true,
     metaDataKey: "Accession",
     metaData: types.map(metaDataModelEntry),
     //metaDataChoices: types.array(types.string)
@@ -285,10 +278,9 @@ RootStore = types
       self.last_bin_pangenome = val;
     }
 
-    function toggleColorByGeo() {
-      console.log("toggleColorByGeo");
+    /*function toggleColorByGeo() {
       self.colorByGeo = !self.colorByGeo;
-    }
+    }*/
     function setMetaData(metadata) {
       for (let [key, value] of Object.entries(metadata)) {
         self.metaData.set(key, value);
@@ -340,7 +332,7 @@ RootStore = types
 
       setLastBinPangenome,
 
-      toggleColorByGeo,
+      //toggleColorByGeo,
       setMetaData,
       getMetaData,
       setMetaDataChoices,