Skip to content

Commit

Permalink
Add edge card collapsing
Browse files Browse the repository at this point in the history
  • Loading branch information
@rmorey
rmorey committed Jul 13, 2023
1 parent eb019ae commit 1a8c7a4
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 149 deletions.
6 changes: 4 additions & 2 deletions src/blueprints/app.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1263,6 +1263,7 @@ def motifs():


if request.args:

try:
motifs_query = MotifSearchQuery.from_form_query(request.args, NeuronDataFactory.instance())
except Exception as e:
Expand All @@ -1277,11 +1278,12 @@ def motifs():
error = f"Error searching for motif: {e=}"
log_error(error)

return render_template("motif_search.html", regions=list(REGIONS.keys()), results=[], error=error, NEURO_TRANSMITTER_NAMES=NEURO_TRANSMITTER_NAMES)
return render_template("motif_search.html", regions=list(REGIONS.keys()), results=[], error=error, NEURO_TRANSMITTER_NAMES=NEURO_TRANSMITTER_NAMES, query=request.args)

print(search_results)


return render_template("motif_search.html", regions=list(REGIONS.keys()), results=search_results, query=request.args, NEURO_TRANSMITTER_NAMES=NEURO_TRANSMITTER_NAMES)


return render_template("motif_search.html", regions=list(REGIONS.keys()), error=None, NEURO_TRANSMITTER_NAMES=NEURO_TRANSMITTER_NAMES)
return render_template("motif_search.html", regions=list(REGIONS.keys()), error=None, NEURO_TRANSMITTER_NAMES=NEURO_TRANSMITTER_NAMES, query={}, results=[])
130 changes: 74 additions & 56 deletions src/templates/motif_search.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,81 +4,99 @@

{% extends "base.html" %} {% block title %}Motif Search{% endblock title %} {% block content %}

<div class="container">
<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}}" />
</div>
{% endfor %}
</div>
<div class="container-fluid">
<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>

{% for group in edge_groups %}
<div class="row">
{% for edge in group %}
<div class="col">
<div class="row p-1">
{% for group in edge_groups %}
<div class="row">
{% for edge in group %}
<div class="col">
<div class="card">
<div class="card-header">
<div class="row">
<div class="col">Edge {{edge[0]}} -> {{edge[1]}}</div>
<div class="col">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="enabled{{edge}}" name="enabled{{edge}}" />
<label class="custom-control-label" for="enabled{{edge}}"></label>
<div class="row p-1">
<div class="col">
<div class="card">
{# Edge Header #}
<div class="card-header">
<div class="row">
<div class="col">Edge {{edge[0]}} -> {{edge[1]}}</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}}"
{% if query.get("enabled" + edge) %} checked {% endif %} />
<label class="custom-control-label" for="enabled{{edge}}"></label>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="card-body row">
<div class="form-group col">
<label for="neuropil{{edge}}">Region</label>
<select class="form-control" id="region{{edge}}" name="region{{edge}}">
{% for neuropil in neuropils %}
<option value="{{neuropil}}">{{neuropil}}</option>
{% endfor %}
</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)" />
</div>
<!-- Neurotransmitter type -->
<div class="form-group col">
<label for="ntType{{edge}}">Neurotransmitter Type</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() %}
<option value="{{neurotransmitter}}">{{neurotransmitter_name}}</option>
{% endfor %}
</select>
{# 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}}" >
{% for neuropil in neuropils %}
<option value="{{neuropil}}"
{% if query.get("region" + edge) == neuropil %}
selected
{% endif %}>
{{neuropil}}</option>
{% endfor %}
</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 %}
/>
</div>
<!-- Neurotransmitter type -->
<div class="form-group col">
<label for="ntType{{edge}}">Neurotransmitter Type</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() %}
<option value="{{neurotransmitter}}"
{% if query.get("ntType" + edge) == neurotransmitter %}
selected
{% endif %}
>{{neurotransmitter_name}}</option>
{% endfor %}
</select>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
{% endfor %}
{% endfor %}

<div class="d-flex justify-content-center">
<button type="submit" class="btn btn-primary">Submit</button>
<div class="d-flex justify-content-center">
<button type="submit" class="btn btn-primary">Search</button>
</div>
</form>
</div>
</form>
</div>
</div>
<div id="root" class="h-100">Loading...</div>

<script type="module">
import { render } from "https://esm.sh/react-dom";
import { createElement } from "https://esm.sh/react";
import MotifSearch from "/js/motif_search.js";
const results = {% if results %} {{ results | tojson }} {% else %} null {% endif %}
const results = {{ results | tojson }}
const query = {% if query %} {{ query | tojson }} {% else %} null {% endif %}

render(createElement(() => MotifSearch({results: results, query: query})), document.getElementById("root"));
</script>

{% endblock content %}
106 changes: 15 additions & 91 deletions static/js/motif_search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,117 +14,41 @@ function MotifSearch({ results, query }) {
${error && html`<div className="alert alert-danger" role="alert">${error}</div>`}
</div>
<div className="container-fluid h-100">
${results
? html`<div>
<${Results} results=${results} />
</div>`
: ExplainerCard()}
<div>
${query ? Results({results: results, query:query}) : ExplainerCard()}
</div>
</div>
`;
}

function MotifForm({regions }) {
const NODES = ["A", "B", "C"];
const EDGES = [
["AB", "BA"],
["AC", "CA"],
["BC", "CB"],
];
const NEUROPILS = ["Any", ...regions];
const NEUROTRANSMITTERS = {
DA: "dopamine",
SER: "serotonin",
GABA: "gabaergic",
GLUT: "glutamate",
ACH: "acetylcholine",
OCT: "octopamine",
};

return html`
<form className="mw-50">
<div className="row">
${NODES.map(
(n) => html`
<div className="form-group col">
<label for="node${n}">Node ${n} Query</label>
<input type="text" className="form-control" name="query${n}" id="node${n}" placeholder="Enter node ${n}" />
</div>
`
)}
</div>
${EDGES.map(
(edges) => html`
<div className="row p-1">
${edges.map(
(edge) => html`
<div className="col">
<div className="card">
<div className="card-header">
<div className="row">
<div className="col">Edge ${edge[0]} -> ${edge[1]}</div>
<div className="col">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="enabled${edge}" name="enabled${edge}" />
<label class="custom-control-label" for="enabled${edge}"></label>
</div>
</div>
</div>
</div>
<div className="card-body row">
<div className="form-group col">
<label for="neuropiljk${edge}">Region</label>
<select class="form-control" id="region${edge}" name="region${edge}">
${NEUROPILS.map((r) => html`<option value=${r}>${r}</option>`)}
</select>
</div>
<div className="form-group col">
<label for="minSynapseCount${edge}">Min Synapse Count</label>
<input type="number" className="form-control" name="minSynapseCount${edge}" id="minSynapseCount${edge}" placeholder="(Default=5)" />
</div>
<!-- Neurotransmitter type -->
<div className="form-group col">
<label for="ntType${edge}">Neurotransmitter Type</label>
<select class="form-control" id="ntType${edge}" name="ntType${edge}">
<option value="Any">Any</option>
${Object.keys(NEUROTRANSMITTERS).map((r) => html`<option value=${r}>${NEUROTRANSMITTERS[r]}</option>`)}
</select>
</div>
</div>
</div>
</div>
`
)}
</div>
`
)}
<div className="d-flex justify-content-center">
<button type="submit" className="btn btn-primary">Submit</button>
</div>
</form>
`;
}

function ExplainerCard() {
return html`<div>
<div class="card" style=${{ margin: "15px" }}>
<div class="card-header" sttyle=${{ color: "purple" }}>What is this?</div>
<div class="card-body">
[TODO: explanatory text]
[TODO: explanatory text and demo query]
<br /><br />
<button class="btn btn btn-outline-success my-2 my-sm-0" type="button">Try Example Query</button>
</div>
</div>
</div>`;
}

function Results({ results }) {
const [selected, setSelected] = useState(0);
const selectedResult = results[selected];



function Results({ results, query }) {


if (results.length === 0) {
return html`<p>No results found. Try widening your search.</p>`;
}
const [selected, setSelected] = useState(0);
const selectedResult = results[selected];


return html`
<p>${results.length} Result${results.length > 1 ? "s" : ""}:</p>
<div className="row h-75">
Expand Down Expand Up @@ -277,7 +201,7 @@ function MorphologyCard({ selectedResult }) {
return html`
<div className="card mt-3" style=${{ height: "500px" }}>
<div className="card-header">
<a href=${morphologyURLForResult(selectedResult)}>3D Re</a>
<a href=${morphologyURLForResult(selectedResult)}>3D Rendering</a>
</div>
<div className="card-body">
<iframe className="w-100 h-100" src=${morphologyURLForResult(selectedResult)} title="neuroglancer"> </iframe>
Expand Down

0 comments on commit 1a8c7a4

Please sign in to comment.