Skip to content

Commit f3d589c

Browse files
authored
Refactor JBrowse search component into a separate package/app (#109)
* Refactor JBrowse search component into a separate package/app, and move the Ajax call into RefNameAutocompleteWrapper
1 parent 896da55 commit f3d589c

File tree

17 files changed

+364
-20593
lines changed

17 files changed

+364
-20593
lines changed

jbrowse/package-lock.json

Lines changed: 185 additions & 20254 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

jbrowse/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
"setup": "npm ci",
77
"build": "npm run build-dev",
88
"start": "cross-env NODE_ENV=development LK_MODULE_CONTAINER=DiscvrLabKeyModules LK_MODULE=jbrowse webpack-dev-server --config config/watch.config.js",
9-
"build-dev": "npm run clean && cross-env NODE_ENV=development LK_MODULE_CONTAINER=DiscvrLabKeyModules LK_MODULE=jbrowse webpack --config config/dev.config.js --progress --profile && npm run jb-pkg",
9+
"build-no-pkg": "npm run clean && cross-env NODE_ENV=development LK_MODULE_CONTAINER=DiscvrLabKeyModules LK_MODULE=jbrowse webpack --config config/dev.config.js --progress --profile",
10+
"build-dev": "npm run build-no-pkg && npm run jb-pkg",
1011
"build-prod": "npm run clean && cross-env NODE_ENV=production PROD_SOURCE_MAP=source-map LK_MODULE_CONTAINER=DiscvrLabKeyModules LK_MODULE=jbrowse webpack --config config/prod.config.js --progress --profile && npm run jb-pkg",
1112
"clean": "rimraf resources/web/jbrowse/gen && rimraf resources/views/gen && rimraf resources/views/browser*",
1213
"test": "cross-env NODE_ENV=test jest",

jbrowse/resources/external/mGAPSession.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
}
3131
}
3232
},
33-
"location": "1:1..248,956,422",
33+
"location": "1:116,089,906..117,411,914",
3434
"tracks": [
3535
{
3636
"type": "ExtendedVariantTrack",
@@ -57,8 +57,9 @@
5757
{
5858
"type": "ExtendedVariantDisplay",
5959
"displayId": "mgap_hg38-ExtendedVariantDisplay",
60+
"maxDisplayedBpPerPx": 2000,
6061
"renderer": {
61-
"type": "ExtendedVariantRenderer",
62+
"type": "ExtendedVariantRenderer"
6263
}
6364
}
6465
],

jbrowse/resources/external/minimalSession.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,13 @@
4949
}
5050
}
5151
},
52+
"displays": [{
53+
"type": "ExtendedVariantDisplay",
54+
"displayId": "clinvar_ncbi_hg38-ExtendedVariantDisplay",
55+
"renderer": {
56+
"type": "ExtendedVariantRenderer"
57+
}
58+
}],
5259
"metadata": {
5360
"extendedVariantDisplayConfig" : [
5461
{ "name": "Predicted Function - 1",
Lines changed: 4 additions & 162 deletions
Original file line numberDiff line numberDiff line change
@@ -1,164 +1,6 @@
1-
<script type="text/javascript" src="<%=contextPath%>/jbrowseApp/src/dojo/dojo.js" data-dojo-config="async: 1, baseUrl: '<%=contextPath%>/jbrowseApp/src'"></script>
2-
<script type="text/javascript" src="<%=contextPath%>/jbrowseApp/src/JBrowse/init.js"></script>
3-
41
<script type="text/javascript">
5-
6-
require([
7-
'JBrowse/Browser',
8-
'dijit/form/ComboBox',
9-
'dijit/form/Button',
10-
'dojo/keys',
11-
'JBrowse/View/InfoDialog',
12-
"dojo/html"
13-
],
14-
function(
15-
Browser,
16-
dijitComboBox,
17-
dijitButton,
18-
keys,
19-
InfoDialog,
20-
html
21-
) {
22-
var webpart = <%=webpartContext%>;
23-
24-
var databaseId = webpart.databaseId;
25-
if (!databaseId){
26-
html.set(webpart.wrapperDivId, 'The target database has not been set for this webpart. Use the customize link to do this.');
27-
return;
28-
}
29-
30-
var base = LABKEY.contextPath + "/jbrowseApp/";
31-
var browserRoot = LABKEY.contextPath + "/jbrowseApp/";
32-
var dataRoot = LABKEY.contextPath + "/_webdav" + LABKEY.Security.currentContainer.path + "/@Files/.jbrowse/" + "databases/" + databaseId;
33-
34-
var browser = new Browser({
35-
baseUrl: base,
36-
names: {
37-
type: 'Hash',
38-
url: dataRoot + '/names/'
39-
},
40-
browserRoot: browserRoot,
41-
dataRoot: dataRoot,
42-
unitTestMode: true
43-
});
44-
browser.renderedFatalErrors = true;
45-
browser.fatalError = function(error){
46-
html.set(webpart.wrapperDivId, 'There was an error loading the JBrowse database with ID: ' + databaseId);
47-
}
48-
49-
browser.afterMilestone( 'loadNames', function() {
50-
this.nameStore = browser.nameStore;
51-
52-
var searchbox = dojo.create('div', {
53-
style: 'display:inline-block;'
54-
}, webpart.wrapperDivId);
55-
56-
this.inputBox = dojo.create('input', {placeHolder: "type in your name", baseClass: 'myClass'}, searchbox);
57-
58-
this.locationBox = new dijitComboBox({
59-
style: {width: '200px'},
60-
maxLength: 400,
61-
searchAttr: "name",
62-
placeHolder: "Enter gene name",
63-
title: 'Enter gene or feature name',
64-
'class': 'lk-input'
65-
}, this.inputBox);
66-
67-
browser.afterMilestone('loadNames', dojo.hitch(this, function () {
68-
if (this.nameStore) {
69-
this.locationBox.set('store', browser.nameStore);
70-
}
71-
}));
72-
this.locationBox.focusNode.spellcheck = false;
73-
74-
dojo.query('div.dijitArrowButton', this.locationBox.domNode ).orphan();
75-
76-
dojo.connect( this.locationBox.focusNode, "keydown", this, function(event) {
77-
if( event.keyCode == keys.ESCAPE ) {
78-
this.locationBox.set('value','');
79-
}
80-
else if (event.keyCode == keys.ENTER) {
81-
this.locationBox.closeDropDown(false);
82-
this.navigateTo( this.locationBox.get('value') );
83-
this.goButton.set('disabled',true);
84-
dojo.stopEvent(event);
85-
} else {
86-
this.goButton.set('disabled', false);
87-
}
88-
});
89-
dojo.connect( searchbox, 'onselectstart', function(evt) { evt.stopPropagation(); return true; });
90-
91-
this.searchNames = function( /**String*/ loc ) {
92-
return browser.nameStore.query({ name: loc }).then(
93-
function( nameMatches ) {
94-
// if we have no matches, pop up a dialog saying so, and
95-
// do nothing more
96-
if( ! nameMatches.length ) {
97-
return false;
98-
}
99-
100-
var goingTo;
101-
102-
//first check for exact case match
103-
for (var i = 0; i < nameMatches.length; i++) {
104-
if( nameMatches[i].name == loc )
105-
goingTo = nameMatches[i];
106-
}
107-
//if no exact case match, try a case-insentitive match
108-
if( !goingTo ) {
109-
for( i = 0; i < nameMatches.length; i++ ) {
110-
if( nameMatches[i].name.toLowerCase() == loc.toLowerCase() )
111-
goingTo = nameMatches[i];
112-
}
113-
}
114-
//else just pick a match
115-
if( !goingTo ) goingTo = nameMatches[0];
116-
117-
return goingTo;
118-
},
119-
function(e) {
120-
console.error( e );
121-
new InfoDialog({title: 'Error', content: 'Error reading from name store.'}).show();
122-
return false;
123-
});
124-
};
125-
126-
this.navigateTo = function (loc, callee) {
127-
if (!loc){
128-
return;
129-
}
130-
131-
this.searchNames(loc).then(function(loc, callee){
132-
if (!loc){
133-
new InfoDialog({title: 'Error', content: 'Coordinates not found for this location.'}).show();
134-
}
135-
else if (loc.multipleLocations){
136-
new InfoDialog({title: 'Error', content: 'This location matched multiple positions in the genome.'}).show();
137-
LDK.Utils.logToServer('Jbrowse multiple locations found: ' + JSON.stringify(loc.location));
138-
}
139-
else {
140-
var url = LABKEY.ActionURL.buildURL('jbrowse', 'browser', null, {database: databaseId, loc: loc.location.ref + ':' + loc.location.start + '..' + loc.location.end})
141-
//console.log(url)
142-
window.location = url;
143-
}
144-
});
145-
};
146-
147-
// make the 'Go' button
148-
this.goButton = new dijitButton({
149-
label: 'Go',
150-
baseClass: "noBorder",
151-
onClick: dojo.hitch(this, function (event) {
152-
this.navigateTo(this.locationBox.get('value'));
153-
this.goButton.set('disabled', true);
154-
dojo.stopEvent(event);
155-
}),
156-
className: 'labkey-button'
157-
}, dojo.create('button', {}, searchbox));
158-
});
159-
160-
browser.loadNames();
161-
});
162-
163-
2+
+function() {
3+
const sessionId = <%=webpartContext%>.databaseId;
4+
LABKEY.App.loadApp('jbrowseSearchWebpart', <%=webpartContext%>.wrapperDivId, sessionId);
5+
}();
1646
</script>
Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
<view xmlns="http://labkey.org/data/xml/view" title="JBrowse Search" frame="portal">
1+
<view xmlns="http://labkey.org/data/xml/view" title="JBrowse Search">
22
<permissions>
33
<permission name="read"/>
44
</permissions>
55
<dependencies>
6+
<dependency path="gen/jbrowse2SearchWebpart.lib.xml"/>
67
<dependency path="LDK.context"/>
7-
<dependency path="jbrowseApp/src/dijit/themes/tundra/tundra.css" />
8-
<dependency path="jbrowse/css/search.css" />
9-
<dependency path="internal/jQuery"/>
108
<dependency path="jbrowse/window/SearchCustomizeWindow.js"/>
9+
<dependency path="jbrowse/search.css"/>
1110
</dependencies>
1211
</view>
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
fieldset.MuiOutlinedInput-notchedOutline > legend {
2+
border-style: none; !important;
3+
}

jbrowse/resources/web/jbrowse/window/SearchCustomizeWindow.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,9 +58,7 @@ Ext4.define('JBrowse.window.SearchCustomizeWindow', {
5858
failure : LABKEY.Utils.onError,
5959
scope : this,
6060
success: function(){
61-
Ext4.Msg.hide();
62-
LABKEY.Utils.setWebpartTitle(this.down('#title').getValue(), this.webPartRowId);
63-
btn.up('window').close();
61+
window.location.reload();
6462
}
6563
});
6664
}

jbrowse/src/client/JBrowse/Browser/RefNameAutocompleteWrapper.tsx

Lines changed: 0 additions & 52 deletions
This file was deleted.

jbrowse/src/client/JBrowse/Browser/Search.tsx

Lines changed: 0 additions & 87 deletions
This file was deleted.

0 commit comments

Comments
 (0)