Add camera reset on initialise graph

tnaccarato · Aug 14, 2024 · 0fab721 · 0fab721
1 parent 31e7ad8
commit 0fab721
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 40 deletions.
diff --git a/vis_phewas/api/views.py b/vis_phewas/api/views.py
@@ -246,8 +246,6 @@ def get_allele_data(disease_id, filters, show_subtypes=False) -> tuple:
 
     # Remove snp from filters list so other snps are still shown
     filters = ",".join([f for f in filters.split(',') if not ('snp' in str(f))])
-    print(filters)
-
     filtered_queryset = apply_filters(queryset, filters, show_subtypes=show_subtypes)
 
     # Get the visible nodes
@@ -348,15 +346,15 @@ class SendDataToSOMView(APIView):
     def get(self, request):
         # Get the filters from the request
         filters = request.GET.get('filters', '')
-        print("Filters: ", filters)
+        # print("Filters: ", filters)
         # Decode the filters
         filters = urllib.parse.unquote(filters)
 
         # Get the SOM type from the request (disease or allele)
         som_type = request.GET.get('type')
         num_clusters = request.GET.get('num_clusters') or 5 if som_type == 'disease' else 7
-        print("Num Clusters: ", num_clusters)
-        print("SOM Type: ", som_type)
+        # print("Num Clusters: ", num_clusters)
+        # print("SOM Type: ", som_type)
         # Get the queryset and apply the filters
         df = get_filtered_df(filters)
 
@@ -490,11 +488,11 @@ def get(self, request):
             diseases = HlaPheWasCatalog.objects.filter(category_string=category)
             # Apply the filters, including the show_subtypes logic
             diseases = apply_filters(diseases, filters, show_subtypes=show_subtypes)
-            print(diseases)
+            # print(diseases)
 
             # Get the unique diseases
             diseases = diseases.values('phewas_string').distinct()
-            print(diseases)
+            # print(diseases)
             # Sort the diseases by phewas_string
             diseases = sorted([disease['phewas_string'] for disease in diseases])
             # Return the diseases

diff --git a/vis_phewas/static/mainapp/js/GraphManager.js b/vis_phewas/static/mainapp/js/GraphManager.js
@@ -47,6 +47,8 @@ class GraphManager {
     this.visibleNodes = new Set();
     this.selectedAlleleNode = null;
     this.selectedDiseaseNode = null;
+    // Set the initial camera position of the sigma instance
+    this.cameraPosition = null;
   }
 
   // Method to initialize the event listeners
@@ -69,7 +71,11 @@ class GraphManager {
 
     // Add an event listener for leaving a node
     this.sigmaInstance.on("leaveNode", ({ node }) => {
-      this.graphHelper.hoverOffNode(node, this.graph, this.getActiveSelection());
+      this.graphHelper.hoverOffNode(
+        node,
+        this.graph,
+        this.getActiveSelection(),
+      );
     });
 
     // Add an event listener for right-clicking a node
@@ -138,6 +144,29 @@ class GraphManager {
     console.log(this.visibleNodes);
     this.visibleNodes = new Set(visible); // Initialize the visible nodes set
     console.log(this.visibleNodes);
+    // If the camera position is null, set cameraPosition to current camera position
+    if (this.cameraPosition === null) {
+      console.log("Setting camera position");
+      // Capture camera state
+      var camera = this.sigmaInstance.getCamera();
+      this.cameraPosition = {
+        x: camera.x,
+        y: camera.y,
+        ratio: camera.ratio,
+        angle: camera.angle,
+      };
+      console.log(this.cameraPosition);
+    } else {
+      console.log("Camera position already set");
+      console.log(this.cameraPosition);
+      // Restore camera state
+      this.sigmaInstance.getCamera().setState({
+        x: this.cameraPosition.x,
+        y: this.cameraPosition.y,
+        ratio: this.cameraPosition.ratio,
+        angle: this.cameraPosition.angle,
+      });
+    }
 
     const categoryRadius = 400; // Adjust this value as needed
     const categoryNodes = nodes.filter((node) => node.node_type === "category");
@@ -462,38 +491,38 @@ class GraphManager {
       });
 
       // Update disease node
-  this.graph.setNodeAttribute(diseaseNode, "borderColor", "black");
-  this.graph.setNodeAttribute(diseaseNode, "borderSize", 0.1);
-  this.graph.setNodeAttribute(diseaseNode, "forceLabel", true);
-
-  // Find and update the edge connecting the disease and allele node
-  const edge = this.graph.edges().find((edge) => {
-    return (
-      this.graph.source(edge) === diseaseNode &&
-      this.graph.target(edge) === alleleNode
-    );
-  });
+      this.graph.setNodeAttribute(diseaseNode, "borderColor", "black");
+      this.graph.setNodeAttribute(diseaseNode, "borderSize", 0.1);
+      this.graph.setNodeAttribute(diseaseNode, "forceLabel", true);
+
+      // Find and update the edge connecting the disease and allele node
+      const edge = this.graph.edges().find((edge) => {
+        return (
+          this.graph.source(edge) === diseaseNode &&
+          this.graph.target(edge) === alleleNode
+        );
+      });
 
-  // Update the selected nodes
-  this.selectedAlleleNode = alleleNode;
-  this.selectedDiseaseNode = diseaseNode;
+      // Update the selected nodes
+      this.selectedAlleleNode = alleleNode;
+      this.selectedDiseaseNode = diseaseNode;
 
-  if (edge) {
-    this.graph.setEdgeAttribute(edge, "color", "black");
-  } else {
-    console.error("Edge from disease to allele not found");
-  }
+      if (edge) {
+        this.graph.setEdgeAttribute(edge, "color", "black");
+      } else {
+        console.error("Edge from disease to allele not found");
+      }
 
-  // Set all other edges to default color and size
-  this.graph.edges().forEach((e) => {
-    if (e !== edge) {
-      this.graph.setEdgeAttribute(e, "color", "darkgrey");
-    }
-  });
+      // Set all other edges to default color and size
+      this.graph.edges().forEach((e) => {
+        if (e !== edge) {
+          this.graph.setEdgeAttribute(e, "color", "darkgrey");
+        }
+      });
 
-  // Refresh the Sigma instance
-  this.sigmaInstance.refresh();
-};
+      // Refresh the Sigma instance
+      this.sigmaInstance.refresh();
+    };
 
     // Function to display the node information
     const displayNodeInfo = (diseaseNode) => {
@@ -626,7 +655,10 @@ class GraphManager {
 
   // Getters for the active selection
   getActiveSelection() {
-    return { allele: this.selectedAlleleNode, disease: this.selectedDiseaseNode };
+    return {
+      allele: this.selectedAlleleNode,
+      disease: this.selectedDiseaseNode,
+    };
   }
 }
 

diff --git a/vis_phewas/static/mainapp/js/main.js b/vis_phewas/static/mainapp/js/main.js
@@ -1,5 +1,3 @@
-import UIManager, { filterManager } from "./UIManager";
-
-const uiManager = new UIManager();
+import { filterManager } from "./UIManager";
 
 export { filterManager };