Skip to content

Airrkb develop #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
schristley wants to merge 5 commits into
base: beta-develop
Choose a base branch
from
Open

Airrkb develop #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c7cb13a
update airrkb entry
swollenburg Jun 26, 2026
1d5bcd7
change layout
swollenburg Jun 27, 2026
aedf8bf
fix spacing
swollenburg Jun 27, 2026
b0de7ea
change airrkb styling and filter-query section
swollenburg Jun 30, 2026
9ee36e0
split out airrkb from community filter query into separate html
swollenburg Jul 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion component/app/scripts/views/utilities/filter-query-view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,17 @@

import Marionette from 'backbone.marionette';
import Handlebars from 'handlebars';
import 'bootstrap-select';

// Filter View
// toolbar under the navigation bar
import filter_query_template from 'Templates/util/filter-query.html';
import airrkb_filter_query_template from 'Templates/util/airrkb-filter-query.html';
export default Marionette.View.extend({
template: Handlebars.compile(filter_query_template),
templates: {
default: Handlebars.compile(filter_query_template),
airrkb: Handlebars.compile(airrkb_filter_query_template)
},

initialize(parameters) {
// TODO, pull from environment-config?
Expand All @@ -59,6 +64,8 @@ export default Marionette.View.extend({
// check if on airrkb page
if (parameters.airrkb_search) this.airrkb_search = parameters.airrkb_search;
}
// Select template based on airrkb_search
this.template = this.airrkb_search ? this.templates.airrkb : this.templates.default;

this.baseFilters = this.model.baseFilters();
this.customFilters = this.model.customFilters();
Expand Down Expand Up @@ -280,6 +287,12 @@ export default Marionette.View.extend({
this.controller.applyFilter(examples[randIdx].filters, examples[randIdx].secondary_filters);
this.controller.showFilter();
},

'change #filter-query-chain-selectpicker': function(e) {
const chain_string = $(e.target).val();
this.$('[class$="-chain-select"]').attr('hidden', true);
this.$(`.${chain_string}-chain-select`).removeAttr('hidden').show();
},
},

setFocus() {
Expand All @@ -298,6 +311,7 @@ export default Marionette.View.extend({
},

onAttach() {
$('.selectpicker').selectpicker();
this.setFocus();
},

Expand Down
4 changes: 4 additions & 0 deletions component/app/styles/modules/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@ Custom Button Styles
background-color: map-get($theme-colors, 'primary-active');
}

.btn-search.btn-active {
background-color: map-get($theme-colors, 'search-active');
}

.btn-glow {
--box-shadow-color: black;
box-shadow: 0 0 30px var(--box-shadow-color);
Expand Down
1 change: 1 addition & 0 deletions component/app/styles/modules/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ $theme-colors: (
'success': $vdj-lightgreen,
'save': $vdj-lightgreen,
'search': $vdj-blue,
'search-active': $vdj-darkblue,
'new': $vdj-darkblue,
'add': $vdj-darkblue,
'create': $vdj-darkblue,
Expand Down
56 changes: 56 additions & 0 deletions component/app/styles/sections/_airrkb.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,59 @@ Airrkb Charts
.airrkb-welcome-banner {
margin: 10px 10px;
}

// search buttons

.airrkb-button-container {
display: flex !important;
flex-direction: column !important;
gap: 0.1em !important;
height: 100% !important;
padding: 0em 0em 0em 0.5em !important;
// padding: 0em 0.5em !important;
// margin: 0em 0.5em !important
}

.airrkb-button-container #filter-query-apply {
flex: 2 !important;
}

.airrkb-button-container #filter-query-apply-airrkb-example {
flex: 1 !important;
}

// Species select

.species-container {
border: 1px solid #ccc !important;
border-radius: 4px !important;
padding: 0em 0.75em !important;
margin: 0em 0em 0em 0em !important;
}

.species-title {
display: block !important;
font-weight: bold !important;
margin: 0.5em 0em !important;
}

.species-options {
display: flex !important;
flex-direction: column !important;
gap: 0.25em !important;
}

.species-radio {
display: flex !important;
align-items: center !important;
gap: 0.5em !important;
}

.species-radio input[type="radio"] {
margin: 0 !important;
}

.species-radio label {
margin: 0 !important;
cursor: pointer !important;
}
8 changes: 4 additions & 4 deletions component/app/templates/airrkb/airrkb-charts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,10 @@ <h3><p class="text-center">VDJServer's interface to the AIRR Knowledge Commons</

<div class="row airrkb-charts-display">
<div class="d-flex flex-column" style="gap: 0.5rem">
<button class="btn btn-primary btn-active">Distance 0</button>
<button class="btn btn-primary" disabled>Distance 1</button>
<button class="btn btn-primary" disabled>Distance 2</button>
<button class="btn btn-primary" disabled>Compare</button>
<button class="btn btn-search btn-active">Distance 0</button>
<button class="btn btn-search" disabled>Distance 1</button>
<button class="btn btn-search" disabled>Distance 2</button>
<button class="btn btn-search" disabled>Compare</button>
</div>
<div style="flex: 1">
<div id="chart-region" class="mainView"></div>
Expand Down
95 changes: 95 additions & 0 deletions component/app/templates/util/airrkb-filter-query.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<!--
- Generic Filter View
-->
<!-- *** add radio buttons for speciess (ALL, HUMAN, MOUSE) -->
<div class="navbar-tool" id="filter-query">
<form>
<div class="row">
<div class="species-container">
<label class="species-title">Species</label>
<div class="species-options">
<div class="species-radio">
<input type="radio" id="species-all" name="species" value="all" checked>
<label for="species-other">All</label>
</div>
<div class="species-radio">
<input type="radio" id="species-human" name="species" value="human">
<label for="species-human">Human</label>
</div>
<div class="species-radio">
<input type="radio" id="species-mouse" name="species" value="mouse">
<label for="species-mouse">Mouse</label>
</div>
</div>
</div>

<div class="col-md-6">

{{#if secondary_model}}
<div class="row secondary-filter">
<div class="input-group col">
<!-- {{#if airrkb_search}}
<button type="button" class="btn btn-search btn-glow" id="filter-query-apply-airrkb-example">Rand CDR3 <i class="fas fa-solid fa-dice" disabled></i></button>
{{/if}} -->
<div class="col-md-2 form-group">
<label for="filter-query-chain-selectpicker"><b>Receptor Type</b></label>
<select class="selectpicker form-control form-control-filter-query" name="filter-query-chain-selectpicker" id="filter-query-chain-selectpicker">
<!-- <option value="filter-secondary-text-search" selected>CDR3 AA Junction</option> -->
<option value="alpha-beta" selected>αβTCR</option>
<option value="gamma-delta">γδTCR</option>
<!-- <option value="heavy-light">IG H/L (L = κ or λ)</option> -->
<!-- <option value="heavy-kappa">IG H/κ</option> -->
<!-- <option value="heavy-lamda">IG H/λ</option> -->
</select>
</div>
<div class="col">
<div class="row">
<!-- *** add popup ? tool tip helper for whole form
*** or for full text search and for the current dropdown -->
<input type="search" class="col-md-12 form-control filter-secondary-text-search-chain-select" id="filter-secondary-text-search" aria-describedby="search" placeholder="CDR3 Junction AA Sequence Search" value="{{secondary_search}}" hidden>
<input type="search" class="col-md-3 form-control alpha-beta-chain-select" id="alpha-v" aria-describedby="search" placeholder="TRAV (optional)" value="{{secondary_search_heavy}}">
<input type="search" class="col-md-6 form-control alpha-beta-chain-select" id="alpha-cdr3" aria-describedby="search" placeholder="α Junction AA" value="{{secondary_search_heavy}}">
<input type="search" class="col-md-3 form-control alpha-beta-chain-select" id="alpha-j" aria-describedby="search" placeholder="TRAJ (optional)" value="{{secondary_search_heavy}}">
<input type="search" class="col-md-3 form-control gamma-delta-chain-select" id="gamma-v" aria-describedby="search" placeholder="TRGV (optional)" value="{{secondary_search_heavy}}" hidden>
<input type="search" class="col-md-6 form-control gamma-delta-chain-select" id="gamma-cdr3" aria-describedby="search" placeholder="γ Junction AA" value="{{secondary_search_heavy}}" hidden>
<input type="search" class="col-md-3 form-control gamma-delta-chain-select" id="gamma-j" aria-describedby="search" placeholder="TRGJ (optional)" value="{{secondary_search_heavy}}" hidden>
<input type="search" class="col-md-3 form-control heavy-light-chain-select heavy-lamda-chain-select heavy-kappa-chain-select" id="heavy-v" aria-describedby="search" placeholder="HV gene" value="{{secondary_search_heavy}}" hidden>
<input type="search" class="col-md-6 form-control heavy-light-chain-select heavy-lamda-chain-select heavy-kappa-chain-select" id="heavy-cdr3" aria-describedby="search" placeholder="H CDR3 Junc AA" value="{{secondary_search_heavy}}" hidden>
<input type="search" class="col-md-3 form-control heavy-light-chain-select heavy-lamda-chain-select heavy-kappa-chain-select" id="heavy-j" aria-describedby="search" placeholder="HJ gene" value="{{secondary_search_heavy}}" hidden>
</div>
<div class="row">
<input type="search" class="col-md-3 form-control alpha-beta-chain-select" id="beta-v" aria-describedby="search" placeholder="TRBV (optional)" value="{{secondary_search_heavy}}">
<input type="search" class="col-md-6 form-control alpha-beta-chain-select" id="beta-cdr3" aria-describedby="search" placeholder="β Junction AA" value="{{secondary_search_heavy}}">
<input type="search" class="col-md-3 form-control alpha-beta-chain-select" id="beta-j" aria-describedby="search" placeholder="TRBJ (optional)" value="{{secondary_search_heavy}}">
<input type="search" class="col-md-3 form-control gamma-delta-chain-select" id="delta-v" aria-describedby="search" placeholder="TRDV (optional)" value="{{secondary_search_heavy}}" hidden>
<input type="search" class="col-md-6 form-control gamma-delta-chain-select" id="delta-cdr3" aria-describedby="search" placeholder="δ Junction AA" value="{{secondary_search_heavy}}" hidden>
<input type="search" class="col-md-3 form-control gamma-delta-chain-select" id="delta-j" aria-describedby="search" placeholder="TRDJ (optional)" value="{{secondary_search_heavy}}" hidden>
<input type="search" class="col-md-3 form-control heavy-light-chain-select" id="light-v" aria-describedby="search" placeholder="LV gene" value="{{secondary_search_heavy}}" hidden>
<input type="search" class="col-md-6 form-control heavy-light-chain-select" id="light-cdr3" aria-describedby="search" placeholder="L CDR3 Junc AA" value="{{secondary_search_heavy}}" hidden>
<input type="search" class="col-md-3 form-control heavy-light-chain-select" id="light-j" aria-describedby="search" placeholder="LJ gene" value="{{secondary_search_heavy}}" hidden>
<input type="search" class="col-md-3 form-control heavy-kappa-chain-select" id="kappa-v" aria-describedby="search" placeholder="κV gene" value="{{secondary_search_heavy}}" hidden>
<input type="search" class="col-md-6 form-control heavy-kappa-chain-select" id="kappa-cdr3" aria-describedby="search" placeholder="κ CDR3 Junc AA" value="{{secondary_search_heavy}}" hidden>
<input type="search" class="col-md-3 form-control heavy-kappa-chain-select" id="kappa-j" aria-describedby="search" placeholder="κJ gene" value="{{secondary_search_heavy}}" hidden>
<input type="search" class="col-md-3 form-control heavy-lamda-chain-select" id="lamda-v" aria-describedby="search" placeholder="λV gene" value="{{secondary_search_heavy}}" hidden>
<input type="search" class="col-md-6 form-control heavy-lamda-chain-select" id="lamda-cdr3" aria-describedby="search" placeholder="λ CDR3 Junc AA" value="{{secondary_search_heavy}}" hidden>
<input type="search" class="col-md-3 form-control heavy-lamda-chain-select" id="lamda-j" aria-describedby="search" placeholder="λJ gene" value="{{secondary_search_heavy}}" hidden>
</div>
</div>
</div>
</div>
{{/if}}
</div>



<div class="col-md-1">
<div class="row airrkb-button-container">
<div class="row airrkb-button-container">
<button type="button" class="btn btn-save btn-block" id="filter-query-apply">Search <i class="fas fa-search"></i></button>
<button type="button" class="btn btn-search btn-block btn-glow" id="filter-query-apply-airrkb-example">Random CDR3 <i class="fas fa-solid fa-dice" disabled></i></button>
</div>
</div>
</div>
</div>
</form>
</div>
Loading