some more motif tweaks

murthylab · Jul 16, 2023 · 02f6af6 · 02f6af6
1 parent 5921751
commit 02f6af6
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 32 deletions.
diff --git a/src/blueprints/app.py b/src/blueprints/app.py
@@ -1456,11 +1456,17 @@ def motifs():
         # make a default state so that hitting search finds results (empty query will err)
         query = dict(
             enabledAB=True,
-            minSynapseCountAB=10,
-            enabledBC=True,
-            minSynapseCountBC=10,
+            minSynapseCountAB=1,
+            enabledBA=True,
+            minSynapseCountBA=1,
             enabledAC=True,
-            minSynapseCountAC=10,
+            minSynapseCountAC=1,
+            enabledCA=True,
+            minSynapseCountCA=1,
+            enabledBC=True,
+            minSynapseCountBC=1,
+            enabledCB=True,
+            minSynapseCountCB=1,
         )
         show_explainer = True
 

diff --git a/src/templates/motif_search.html b/src/templates/motif_search.html
@@ -3,20 +3,14 @@
 {% set edge_groups = [["AB", "BA"], ["AC", "CA"], ["BC", "CB"]] %} 
 
 {% extends "base.html" %} {% block title %}Motif Search{% endblock title %} {% block content %}
+<div id="root" class="h-100" style="margin-top: 10px;">Loading...</div>
 
 <div class="container-fluid">
+  <h4 style="color: purple; margin-top: 20px; margin-left: 10px; ">Motif search parameters</h4>
   <div class="row">
     <div class="col">
-      <form class="mw-50">
-        <div class="row">
-          {% for node in nodes %}
-          <div class="form-group col">
-            <label for="node{{node}}">Node {{node}} Query</label>
-            <input type="text" class="form-control" name="query{{node}}" id="node{{node}}" placeholder="Enter node {{node}}" {% if query.get("query"+node) %} value={{query.get("query"+node)}} {% endif %} />
-          </div>
-          {% endfor %}
-        </div>
-
+      <form class="mw-50" style="margin-top: 10px;">
+        <small>
         {% for group in edge_groups %}
         <div class="row">
           {% for edge in group %}
@@ -25,9 +19,9 @@
               <div class="col">
                 <div class="card">
                   {# Edge Header #}
-                  <div class="card-header">
+                  <div class="card-header" style="padding: 0px; padding-left: 15px;">
                     <div class="row">
-                      <div class="col">Edge {{edge[0]}} -> {{edge[1]}}</div>
+                      <div class="col">{{edge[0]}} <small><i class="fa-solid fa-arrow-right"></i></small> {{edge[1]}} connection</div>
                       <div class="col">
                         <div class="custom-control custom-switch">
                           <input type="checkbox" data-toggle="collapse" data-target="#collapse{{edge}}" class="custom-control-input" id="enabled{{edge}}" name="enabled{{edge}}" 
@@ -39,10 +33,10 @@
                   </div>
 
                   {# Edge Body #}
-                  <div class="card-body row collapse {% if query.get("enabled" + edge) %} show {% endif %}" id="collapse{{edge}}">
-                    <div class="form-group col">
-                      <label for="neuropil{{edge}}">Region</label>
-                      <select class="form-control" id="region{{edge}}" name="region{{edge}}"  >
+                  <div class="card-body row collapse {% if query.get("enabled" + edge) %} show {% endif %}" id="collapse{{edge}}" style="padding: 0px; padding-left: 15px; padding-right: 5px;">
+                    <div class="form-group col" >
+                      <label for="neuropil{{edge}}"><small>Region</small></label>
+                      <select class="form-control" id="region{{edge}}" name="region{{edge}}" >
                         {% for neuropil in neuropils %}
                           <option value="{{neuropil}}"
                           {% if query.get("region" + edge) == neuropil %}
@@ -53,14 +47,14 @@
                       </select>
                     </div>
                     <div class="form-group col">
-                      <label for="minSynapseCount{{edge}}">Min Synapse Count</label>
-                      <input type="number" class="form-control" name="minSynapseCount{{edge}}" id="minSynapseCount{{edge}}" placeholder="(Default=5)" 
-                      {% if query.get("minSynapseCount"+edge) %} value={{query.get("minSynapseCount"+edge)}} {% endif %}
+                      <label for="minSynapseCount{{edge}}"><small>Min Synapse Count</small></label>
+                      <input type="number" class="form-control" name="minSynapseCount{{edge}}" id="minSynapseCount{{edge}}"
+                      {% if query.get("minSynapseCount"+edge) %} value={{query.get("minSynapseCount"+edge)}} {% else %} value=1 {% endif %}
                       />
                     </div>
                     <!-- Neurotransmitter type -->
                     <div class="form-group col">
-                      <label for="ntType{{edge}}">Neurotransmitter Type</label>
+                      <label for="ntType{{edge}}"><small>Neurotransmitter Type</small></label>
                       <select class="form-control" id="ntType{{edge}}" name="ntType{{edge}}">
                         <option value="Any">Any</option>
                         {% for neurotransmitter, neurotransmitter_name in NEURO_TRANSMITTER_NAMES.items() %}
@@ -80,15 +74,23 @@
           {% endfor %}
         </div>
         {% endfor %}
-
-        <div class="d-flex justify-content-center">
-          <button type="submit" class="btn btn-primary" onclick="loading(event);">Search</button>
+        </small>
+        <div class="row">
+          {% for node in nodes %}
+          <div class="form-group col" style="margin-top: 10px; margin-left: 5px;">
+            <label for="node{{node}}"><small>search query for node {{node}}</small></label>
+            <input type="text" class="form-control" name="query{{node}}" id="node{{node}}" placeholder="(match all)" {% if query.get("query"+node) %} value={{query.get("query"+node)}} {% endif %} />
+          </div>
+          {% endfor %}
+        </div>
+        <div class="d-flex justify-content-center" style="margin-bottom: 40px;">
+          <button type="submit" class="btn btn-primary" onclick="loading(event);" style="min-width: 100%;">Find Matching Motifs &nbsp; &nbsp; <i class="fa-solid fa-gears"></i></button>
         </div>
-      </form>
+
+     </form>
     </div>
   </div>
 </div>
-<div id="root" class="h-100">Loading...</div>
 
 <script type="module">
   import { render } from "https://esm.sh/react-dom";

diff --git a/src/utils/graph_vis.py b/src/utils/graph_vis.py
@@ -88,6 +88,12 @@ def make_graph_html(
     node_ids = set([r[0] for r in connection_table]).union(
         [r[1] for r in connection_table]
     )
+    # as long as connection cap not reached, add center ids back in
+    for cid in center_ids:
+        if len(node_ids) >= connections_cap:
+            break
+        node_ids.add(cid)
+
     total_syn_count = sum([r[3] for r in connection_table]) if connection_table else 0
     max_syn_count = max([r[3] for r in connection_table]) if connection_table else 0
     large_weights = total_syn_count >= 50000

diff --git a/static/js/motif_search.js b/static/js/motif_search.js
@@ -25,7 +25,7 @@ function MotifSearch({ results, query, show_explainer }) {
 
 function ExplainerCard() {
   return html`<div>
-    <div class="card" style=${{ margin: "15px" }}>
+    <div class="card" style=${{ margin: "5px" }}>
       <div class="card-header" sttyle=${{ color: "purple" }}>What is this?</div>
       <div class="card-body">
         With this tool you can search for specific motifs (sub-graphs) of size 3 in the connectome network. With A, B, C
@@ -35,7 +35,8 @@ function ExplainerCard() {
         for every pair of connected nodes. Matching
         motifs (if found) will be presented as a network along with 3D rendering of the corresponding cells.
         <br /><br />
-        <a class="btn btn btn-outline-success my-2 my-sm-0" href="/app/motifs/?queryA=720575940613052200&queryB=DL1_dorsal&queryC=DL1_dorsal&enabledAB=on&regionAB=Any&minSynapseCountAB=20&ntTypeAB=GLUT&enabledBA=on&regionBA=Any&minSynapseCountBA=20&ntTypeBA=GLUT&enabledAC=on&regionAC=Any&minSynapseCountAC=15&ntTypeAC=GLUT&enabledCA=on&regionCA=Any&minSynapseCountCA=15&ntTypeCA=GLUT&enabledBC=on&regionBC=Any&minSynapseCountBC=&ntTypeBC=GLUT&enabledCB=on&regionCB=Any&minSynapseCountCB=&ntTypeCB=GLUT">
+        <a class="btn btn btn-outline-success my-2 my-sm-0" onClick=${() => onRowClick(index)}
+            href="/app/motifs/?queryA=720575940613052200&queryB=DL1_dorsal&queryC=DL1_dorsal&enabledAB=on&regionAB=Any&minSynapseCountAB=20&ntTypeAB=GLUT&enabledBA=on&regionBA=Any&minSynapseCountBA=20&ntTypeBA=GLUT&enabledAC=on&regionAC=Any&minSynapseCountAC=15&ntTypeAC=GLUT&enabledCA=on&regionCA=Any&minSynapseCountCA=15&ntTypeCA=GLUT&enabledBC=on&regionBC=Any&minSynapseCountBC=&ntTypeBC=GLUT&enabledCB=on&regionCB=Any&minSynapseCountCB=&ntTypeCB=GLUT">
             Try Example Query
         </a>
       </div>
@@ -56,7 +57,7 @@ function Results({ results, query }) {
 
 
   return html`
-    <p>Matching motif${results.length > 1 ? "s (might not be exhaustive)" : ""}:</p>
+    <h4 style=${{ color: "purple", margin: "15px;" }} >Matching motif${results.length > 1 ? "s" : ""}</h4>
     <div className="row h-75">
       <div className="col">
         <${ResultsTable} results=${results} selected=${selected} setSelected=${setSelected} onRowClick=${setSelected} />