Remove Node Sequences Option

package.json

@@ -49,6 +49,7 @@
     "react-scripts": "5.0.1",
     "react-select": "^5.7.3",
     "react-select-event": "^5.5.1",
+    "react-switch": "^7.0.0",
     "reactjs-popup": "^2.0.5",
     "reactstrap": "^9.1.9",
     "readers-writer-lock": "^1.0.0",

src/components/HeaderForm.js

@@ -11,6 +11,10 @@ import RegionInput from "./RegionInput";
 import TrackPicker from "./TrackPicker";
 import BedFileDropdown from "./BedFileDropdown";
 import FormHelperText from "@mui/material/FormHelperText";
+import PopupDialog from "./PopupDialog.js";
+import Switch from "react-switch";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faGear } from "@fortawesome/free-solid-svg-icons";
 import {
   parseRegion,
   stringifyRegion,
@@ -194,6 +198,10 @@ function viewTargetsEqual(currViewTarget, nextViewTarget) {
     return false;
   }
 
+  if (currViewTarget.removeSequences !== nextViewTarget.removeSequences) {
+    return false;
+  }
+
   return true;
 }
 
@@ -317,6 +325,8 @@ class HeaderForm extends Component {
         dataType: ds.dataType,
         name: ds.name,
         simplify: ds.simplify,
+        popupOpen: false,
+        removeSequences: ds.removeSequences
       };
       return stateVals;
     });
@@ -557,6 +567,7 @@ class HeaderForm extends Component {
     region: this.state.region,
     dataType: this.state.dataType,
     simplify: this.state.simplify && !readsExist(this.state.tracks),
+    removeSequences: this.state.removeSequences && !readsExist(this.state.tracks)
   });
 
   handleGoButton = () => {
@@ -825,6 +836,15 @@ class HeaderForm extends Component {
     this.setState({ simplify: !this.state.simplify });
   };
 
+  /* Function for toggling display of node sequences */
+  toggleIncludeSequences = () => {
+    this.setState({ removeSequences: !this.state.removeSequences });
+  };
+
+  togglePopup = () => {
+    this.setState({ popupOpen: !this.state.popupOpen });
+  };
+
   render() {
     let errorDiv = null;
     if (this.state.error) {
@@ -948,25 +968,45 @@ class HeaderForm extends Component {
                   region={this.state.region}
                 />
               )}
+
               {customFilesFlag && (
-                <div style={{ display: "flex" }}>
-                  {DataPositionFormRowComponent}
+                <div className="d-flex justify-content-between align-items-start">
+                  <div>
+                    {DataPositionFormRowComponent}
+                  </div>
+                  <div className="d-flex justify-content-end align-items-start flex-shrink-0">
+                  {!readsExist(this.state.tracks) && (
+                    <>
+                      <Button
+                        onClick={this.togglePopup}
+                        outline
+                        active={this.state.simplify || this.state.removeSequences}
+                      >
+                      <FontAwesomeIcon icon={faGear} /> Simplify
+                      </Button>
+                      <PopupDialog open={this.state.popupOpen} close={this.togglePopup} width="400px">
+                        <div style={{ height: "10vh"}}>
+                          {/* Toggle for simplify small variants */}
+                          <label className="d-flex align-items-center justify-content-between" style={{ marginBottom: "10px"}}>
+                            <span>Remove Small Variants</span>
+                            <Switch onChange={this.toggleSimplify} checked={this.state.simplify} />
+                          </label>
+                          {/* Toggle for remove node sequences */}
+                          <label className="d-flex align-items-center justify-content-between">
+                            <span>Remove Node Sequences</span>
+                            <Switch onChange={this.toggleIncludeSequences} checked={this.state.removeSequences} />
+                          </label>
+                        </div>
+                      </PopupDialog>
+                    </>
+                  )}
                   <TrackPicker
                     tracks={this.state.tracks}
                     availableTracks={this.state.fileSelectOptions}
                     onChange={this.handleInputChange}
                     handleFileUpload={this.handleFileUpload}
                   ></TrackPicker>
-                  {/* Button for simplify */}
-                  {!readsExist(this.state.tracks) && (
-                    <Button
-                      onClick={this.toggleSimplify}
-                      outline
-                      active={this.state.simplify}
-                    >
-                      {this.state.simplify ? "Simplify On" : "Simplify Off"}
-                    </Button>
-                  )}
+                  </div>
                 </div>
               )}
               <Row>

src/config.json

@@ -10,7 +10,8 @@
       "region": "17:1-100",
       "bedFile": "exampleData/internal/snp1kg-BRCA1.bed",
       "dataType": "built-in",
-      "simplify": false
+      "simplify": false,
+      "removeSequences": false
     },
     {
       "name": "vg \"small\" example",

src/end-to-end.test.js

@@ -339,7 +339,7 @@ describe("When we wait for it to load", () => {
 it("produces correct link for view before & after go is pressed", async () => {
   // First test that after pressing go, the link reflects the dat form
   const expectedLinkBRCA1 =
-    "http://localhost?name=snp1kg-BRCA1&tracks[0][trackFile]=exampleData%2Finternal%2Fsnp1kg-BRCA1.vg.xg&tracks[0][trackType]=graph&tracks[0][trackColorSettings][mainPalette]=greys&tracks[0][trackColorSettings][auxPalette]=ygreys&tracks[1][trackFile]=exampleData%2Finternal%2FNA12878-BRCA1.sorted.gam&tracks[1][trackType]=read&region=17%3A1-100&bedFile=exampleData%2Finternal%2Fsnp1kg-BRCA1.bed&dataType=built-in&simplify=false";
+    "http://localhost?name=snp1kg-BRCA1&tracks[0][trackFile]=exampleData%2Finternal%2Fsnp1kg-BRCA1.vg.xg&tracks[0][trackType]=graph&tracks[0][trackColorSettings][mainPalette]=greys&tracks[0][trackColorSettings][auxPalette]=ygreys&tracks[1][trackFile]=exampleData%2Finternal%2FNA12878-BRCA1.sorted.gam&tracks[1][trackType]=read&region=17%3A1-100&bedFile=exampleData%2Finternal%2Fsnp1kg-BRCA1.bed&dataType=built-in&simplify=false&removeSequences=false";
   // Set up dropdown
   await act(async () => {
     let dropdown = document.getElementById("dataSourceSelect");
@@ -373,7 +373,7 @@ it("produces correct link for view before & after go is pressed", async () => {
   await clickCopyLink();
 
   const expectedLinkCactus =
-    "http://localhost?tracks[0][trackFile]=exampleData%2Fcactus.vg.xg&tracks[0][trackType]=graph&tracks[1][trackFile]=exampleData%2Fcactus-NA12879.sorted.gam&tracks[1][trackType]=read&bedFile=exampleData%2Fcactus.bed&name=cactus&region=ref%3A1-100&dataType=built-in&simplify=false";
+    "http://localhost?tracks[0][trackFile]=exampleData%2Fcactus.vg.xg&tracks[0][trackType]=graph&tracks[1][trackFile]=exampleData%2Fcactus-NA12879.sorted.gam&tracks[1][trackType]=read&bedFile=exampleData%2Fcactus.bed&name=cactus&region=ref%3A1-100&dataType=built-in&simplify=false&removeSequences=false";
   // Make sure link has changed after pressing go
   expect(fakeClipboard).toEqual(expectedLinkCactus);
 }, 20000);

src/server.mjs

@@ -382,6 +382,48 @@ api.post("/getChunkedData", (req, res, next) => {
   });
 });
 
+
+/*
+graph = {
+  node: [
+    {
+      sequence: "AGCT"
+      id: "1"
+    },
+    {
+      sequence: "AGCTAG"
+      id: "2"
+    }
+  ],
+  edge: [],
+  path: []
+}
+removing sequence would result in
+graph = {
+  node: [
+    {
+      id: "1"
+    },
+    {
+      id: "2"
+    }
+  ],
+  edge: [],
+  path: []
+}
+*/
+
+// read a graph object and remove "sequence" fields in place
+function removeNodeSequencesInPlace(graph){
+  console.log("graph:", graph)
+  if (!graph.node){
+    return;
+  }
+  graph.node.forEach(function(node) {
+    node.sequence = "";
+  })
+}
+
 // Handle a chunked data (tube map view) request. Returns a promise. On error,
 // either the promise rejects *or* next() is called with an error, or both.
 // TODO: This is a terrible mixed design for error handling; we need to either
@@ -497,6 +539,15 @@ async function getChunkedData(req, res, next) {
     req.simplify = true;
   }
 
+  // client is going to send removeSequences = true if they don't want sequences of nodes to be displayed
+  req.removeSequences = false;
+  if (req.body.removeSequences) {
+    if (readsExist(req.body.tracks)) {
+      throw new BadRequestError("Can't remove node sequences if read tracks exist.");
+    }
+    req.removeSequences = true;
+  }
+
   // check the bed file if this region has been pre-fetched
   let chunkPath = "";
   if (req.withBed) {
@@ -746,6 +797,9 @@ async function getChunkedData(req, res, next) {
         return;
       }
       req.graph = JSON.parse(graphAsString);
+      if (req.removeSequences){
+        removeNodeSequencesInPlace(req.graph)
+      } 
       req.region = [rangeRegion.start, rangeRegion.end];
       // vg chunk always puts the path we reference on first automatically
       if (!sentResponse) {
@@ -855,6 +909,10 @@ async function getChunkedData(req, res, next) {
         return;
       }
       req.graph = JSON.parse(graphAsString);
+      if (req.removeSequences){
+        removeNodeSequencesInPlace(req.graph)
+      } 
+      console.log("remove sequences? ", req.graph)
       req.region = [rangeRegion.start, rangeRegion.end];
 
       // We might not have the path we are referencing on appearing first.