Skip to content
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

23.7 fb variantid searchbox #236

Merged
merged 7 commits into from
Oct 7, 2023
+148 −32
Merged

23.7 fb variantid searchbox #236

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
841acc4
FilterForm react-select
Sep 14, 2023
35a7115
React-select async callback + styling
Sep 29, 2023
7e846fd
Restrict the AsyncSelect to allowableValues > 10
Oct 4, 2023
f5710e7
Fix variantDetails field serialization in resolveVcfFields
Oct 5, 2023
97814c8
variableSamples searchbox UX coverage
Oct 5, 2023
c1f85e3
Fix isEmpty and add test coverage
Oct 6, 2023
eac5287
Fix No Filter displaying for is empty
Oct 7, 2023
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
1 change: 1 addition & 0 deletions jbrowse/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

30 changes: 14 additions & 16 deletions jbrowse/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,55 +13,53 @@
"test": "cross-env NODE_ENV=test jest",
"prepareCli": "rimraf ./buildCli && rimraf ./resources/external/jb-cli && npm install @jbrowse/[email protected] --prefix ./buildCli",
"jb-pkg": "npm run prepareCli && npx pkg --outdir=./resources/external/jb-cli ./buildCli/node_modules/@jbrowse/cli && rimraf ./buildCli"
},
"peerDependencies": {

},
"dependencies": {
"@gmod/vcf": "^5.0.10",
"@jbrowse/core": "^2.6.2",
"@jbrowse/plugin-variants": "^2.6.2",
"@jbrowse/plugin-svg": "^2.6.2",
"@jbrowse/plugin-linear-genome-view": "^2.6.2",
"@jbrowse/plugin-svg": "^2.6.2",
"@jbrowse/plugin-variants": "^2.6.2",
"@jbrowse/react-linear-genome-view": "^2.6.2",
"@labkey/api": "^1.22.0",
"@gmod/vcf": "^5.0.10",
"@labkey/components": "^2.355.0",
"@mui/x-data-grid": "^6.0.1",
"assert": "^2.0.0",
"browserify-zlib": "^0.2.0",
"buffer": "^6.0.3",
"child_process": "^1.0.2",
"fs": "^0.0.1-security",
"jquery": "^3.7.0",
"jspdf": "^2.5.1",
"jspdf-autotable": "^3.5.31",
"@mui/x-data-grid": "^6.0.1",
"node-polyfill-webpack-plugin": "2.0.1",
"@labkey/components": "^2.355.0",
"uuid": "^9.0.0",
"path-browserify": "^1.0.1",
"pkg": "^5.8.1",
"react-data-grid": "7.0.0-beta.10",
"react-google-charts": "^4.0.1",
"react-hot-loader": "^4.13.1",
"react-select": "^5.7.4",
"regenerator-runtime": "^0.13.11",
"stream-browserify": "^3.0.0",
"typescript": "^5.1.6",
"util": "^0.12.5",
"uuid": "^9.0.0",
"vm-browserify": "^1.1.2",
"xlsx": "https://cdn.sheetjs.com/xlsx-0.19.3/xlsx-0.19.3.tgz",
"fs": "^0.0.1-security",
"child_process": "^1.0.2",
"react-hot-loader": "^4.13.1"
"xlsx": "https://cdn.sheetjs.com/xlsx-0.19.3/xlsx-0.19.3.tgz"
},
"devDependencies": {
"@labkey/build": "6.10.0",
"@types/jest": "^29.0.0",
"@types/jquery": "^3.0.0",
"@types/jexl": "^2.3.1",
"@types/jquery": "^3.0.0",
"@types/node": "^18.17.1",
"@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
"enzyme": "^3.11.0",
"jest": "^29.0.0",
"jest-cli": "^29.0.0",
"jest-mock": "^29.0.0",
"ts-jest": "^29.0.0",
"rimraf": "^3.0.2",
"@wojtekmaj/enzyme-adapter-react-17": "^0.8.0"
"ts-jest": "^29.0.0"
},
"jest": {
"globals": {
Expand Down
40 changes: 36 additions & 4 deletions jbrowse/src/client/JBrowse/VariantSearch/components/FilterForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { useState } from 'react';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import Select from '@mui/material/Select';
import AsyncSelect from 'react-select/async';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
Expand Down Expand Up @@ -131,6 +132,10 @@ const FilterForm = (props: FilterFormProps ) => {
filters.forEach((filter, index) => {
highlightedInputs[index] = { field: false, operator: false, value: false };

filter.field = filter.field ?? '';
filter.operator = filter.operator ?? '';
filter.value = filter.value ?? '';

if (filter.field === '') {
highlightedInputs[index].field = true;
}
Expand All @@ -139,7 +144,9 @@ const FilterForm = (props: FilterFormProps ) => {
highlightedInputs[index].operator = true;
}

if (filter.value === '') {
if (filter.operator === 'is empty' || filter.operator === 'is not empty') {
filter.value = '';
} else if (filter.value === '') {
highlightedInputs[index].value = true;
}
});
Expand Down Expand Up @@ -208,8 +215,8 @@ const FilterForm = (props: FilterFormProps ) => {
{filters.map((filter, index) => (
<FilterRow key={index} >
<FormControlMinWidth sx={ highlightedInputs[index]?.field ? highlightedSx : null }>
<InputLabel id="field-label">Field</InputLabel>
<Select
<InputLabel id="field-label">Field</InputLabel>
<Select
labelId="field-label"
value={filter.field}
onChange={(event) =>
Expand Down Expand Up @@ -266,9 +273,33 @@ const FilterForm = (props: FilterFormProps ) => {
{allowedGroupNames?.map((gn) => (
<MenuItem value={gn} key={gn}>{gn}</MenuItem>
))}

</Select>
</FormControlMinWidth>
) : fieldTypeInfo.find(obj => obj.name === filter.field)?.allowableValues?.length > 10 ? (
<FormControlMinWidth sx={ highlightedInputs[index]?.value ? highlightedSx : null } >
<AsyncSelect
id={`value-select-${index}`}
inputId={`value-select-${index}`}
aria-labelledby={`value-select-${index}`}
menuPortalTarget={document.body}
menuPosition={'fixed'}
isDisabled={filter.operator === "is empty" || filter.operator === "is not empty"}
menuShouldBlockScroll={true}
styles={{menuPortal: base => ({...base, zIndex: 9999})}}
isMulti={fieldTypeInfo.find(obj => obj.name === filter.field)?.isMultiValued}
loadOptions={(inputValue, callback) => {
const fieldInfo = fieldTypeInfo.find(obj => obj.name === filter.field);

callback(
(fieldInfo?.allowableValues || [])
.filter(value => value.toLowerCase().includes(inputValue.toLowerCase()))
.map(value => ({label: value, value}))
);
}}
onChange={(selected) => handleFilterChange(index, "value", selected?.length > 0 ? selected.map(s => s.value).join(',') : undefined)}
value={filter.value ? filter.value.split(',').map(value => ({label: value, value})) : undefined}
/>
</FormControlMinWidth>
) : fieldTypeInfo.find(obj => obj.name === filter.field)?.allowableValues?.length > 0 ? (
<FormControlMinWidth sx={ highlightedInputs[index]?.value ? highlightedSx : null } >
<InputLabel id="value-select-label">Value</InputLabel>
Expand Down Expand Up @@ -316,6 +347,7 @@ const FilterForm = (props: FilterFormProps ) => {
<Button
onClick={handleSubmit}
type="submit"
className="filter-form-select-button"
variant="contained"
color="primary"
>
Expand Down
14 changes: 12 additions & 2 deletions jbrowse/src/client/JBrowse/VariantSearch/components/VariantTableWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -463,6 +463,17 @@ const VariantTableWidget = observer(props => {
<div style={{ marginBottom: "10px", display: "flex", alignItems: "center" }}>
<div style={{ flex: 1 }}>
{filters.map((filter, index) => {
if ((filter as any).field && ((filter as any).operator === "is empty" || (filter as any).operator === "is not empty") && !(filter as any).value) {
return (
<Button
key={index}
onClick={() => setFilterModalOpen(true)}
style={{ border: "1px solid gray", margin: "5px" }}
>
{`${(filter as any).field} ${(filter as any).operator}`}
</Button>
);
}
if ((filter as any).field == "" || (filter as any).operator == "" || (filter as any).value == "" ) {
return (<Button
key={index}
Expand All @@ -476,8 +487,7 @@ const VariantTableWidget = observer(props => {
<Button
key={index}
onClick={() => setFilterModalOpen(true)}
style={{ border: "1px solid gray", margin: "5px" }}
>
style={{ border: "1px solid gray", margin: "5px" }} >
{`${(filter as any).field} ${(filter as any).operator} ${(filter as any).value}`}
</Button>
);
Expand Down
2 changes: 1 addition & 1 deletion jbrowse/src/client/JBrowse/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -636,7 +636,7 @@ export function searchStringToInitialFilters(knownFieldNames: string[]) : Filter
export function getOperatorsForField(fieldObj: FieldModel): string[] {
const stringOperators = ["equals", "does not equal", "contains", "does not contain", "starts with", "ends with", "is empty", "is not empty"];
const variableSamplesType = ["in set", "variable in", "not variable in", "variable in all of", "variable in any of", "not variable in any of", "not variable in one of", "is empty", "is not empty"];
const numericOperators = ["=", "!=", ">", ">=", "<", "<=", "is empty", "is not empty"];
const numericOperators = ["=", "!=", ">", ">=", "<", "<="];
const noneOperators = [];

// This can occur for the blank placeholder field:
Expand Down
1 change: 1 addition & 0 deletions jbrowse/src/org/labkey/jbrowse/JBrowseController.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -861,6 +861,7 @@ public ApiResponse execute(ResolveVcfFieldsForm form, BindException errors)
if (form.isIncludeDefaultFields())
{
JBrowseFieldUtils.DEFAULT_FIELDS.forEach((key, val) -> ret.put(key, val.toJSON()));
ret.put(JBrowseFieldUtils.VARIABLE_SAMPLES, JBrowseFieldUtils.getVariableSamplesField(null).toJSON());
}

for (String key : form.getInfoKeys())
Expand Down
24 changes: 22 additions & 2 deletions jbrowse/src/org/labkey/jbrowse/JBrowseFieldUtils.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
import htsjdk.variant.vcf.VCFHeader;
import htsjdk.variant.vcf.VCFHeaderLineType;
import htsjdk.variant.vcf.VCFInfoHeaderLine;
import org.apache.logging.log4j.LogManager;
import org.jetbrains.annotations.Nullable;
import org.apache.logging.log4j.Logger;
import org.labkey.api.data.Container;
import org.labkey.api.jbrowse.JBrowseFieldDescriptor;
Expand All @@ -14,6 +14,7 @@
import org.labkey.jbrowse.model.JsonFile;

import java.io.File;
import java.util.Arrays;
import java.util.LinkedHashMap;
import java.util.Map;

Expand All @@ -31,12 +32,12 @@ public class JBrowseFieldUtils
put("ref", new JBrowseFieldDescriptor("ref", "The reference allele", true, true, VCFHeaderLineType.String, 4).label("Ref Allele"));
put("alt", new JBrowseFieldDescriptor("alt", "The alternate allele", true, true, VCFHeaderLineType.String, 5).label("Alt Allele"));
put("genomicPosition", new JBrowseFieldDescriptor("genomicPosition", "", false, true, VCFHeaderLineType.Integer, 6).hidden(true).label("Genomic Position"));
put("variableSamples", new JBrowseFieldDescriptor(VARIABLE_SAMPLES, "All samples with this variant", true, true, VCFHeaderLineType.Character, 7).multiValued(true).label("Samples With Variant"));
}};

public static Map<String, JBrowseFieldDescriptor> getIndexedFields(JsonFile jsonFile, User u, Container c)
{
Map<String, JBrowseFieldDescriptor> ret = new LinkedHashMap<>(DEFAULT_FIELDS);
ret.put(VARIABLE_SAMPLES, getVariableSamplesField(jsonFile));

File vcf = jsonFile.getTrackFile();
if (!vcf.exists())
Expand Down Expand Up @@ -66,6 +67,25 @@ public static Map<String, JBrowseFieldDescriptor> getIndexedFields(JsonFile json
return ret;
}

public static JBrowseFieldDescriptor getVariableSamplesField(@Nullable JsonFile jsonFile) {
JBrowseFieldDescriptor field = new JBrowseFieldDescriptor(VARIABLE_SAMPLES, "All samples with this variant", true, true, VCFHeaderLineType.Character, 7).multiValued(true).label("Samples With Variant");
if (jsonFile != null) {
File vcf = jsonFile.getTrackFile();
if (vcf == null || !vcf.exists()) {
String msg = "Unable to find VCF file for track: " + jsonFile.getObjectId();
_log.error(msg + ", expected: " + (vcf == null ? "null" : vcf.getPath()));
return null;
}

try (VCFFileReader reader = new VCFFileReader(vcf)) {
field.allowableValues(reader.getHeader().getSampleNamesInOrder());
}
}

return field;
}


public static JBrowseSession getSession(String sessionId)
{
JBrowseSession session = JBrowseSession.getForId(sessionId);
Expand Down
68 changes: 61 additions & 7 deletions jbrowse/test/src/org/labkey/test/tests/external/labModules/JBrowseTest.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1505,6 +1505,13 @@ private void testVariantTableComparators() throws Exception {
waitAndClick(Locator.tagWithAttributeContaining("button", "aria-label", "Show filters"));
}

private void clearFilterDialog(String filter_text) {
waitForElement(Locator.tagWithText("button", filter_text)).click();
waitForElement(Locator.tagWithText("button", "Remove Filter")).click();
waitAndClick(Locator.tagWithText("button", "Search").index(1));
waitForElement(Locator.tagWithText("span", "2"));
}

private void testLuceneSearchUI(String sessionId)
{
beginAt("/" + getProjectName() + "/jbrowse-jbrowse.view?session=" + sessionId);
Expand All @@ -1530,16 +1537,63 @@ private void testLuceneSearchUI(String sessionId)

waitForElement(Locator.tagWithClass("input", "MuiInputBase-inputSizeSmall")).sendKeys("C");

// TODO: index isnt very stable. we need to differentiate the modal button from the grid button bar:
waitAndClick(Locator.tagWithText("button", "Search").index(1));
waitAndClick(Locator.tagWithClass("button", "filter-form-select-button"));

// indicates row is filtered:
waitForElementToDisappear(Locator.tagWithText("span", "2"));

// should re-open the dialog
waitForElement(Locator.tagWithText("button", "ref equals C")).click();
waitForElement(Locator.tagWithText("button", "Remove Filter")).click();
waitAndClick(Locator.tagWithText("button", "Search").index(1));
waitForElement(Locator.tagWithText("span", "2"));
clearFilterDialog("ref equals C");

// VariableSamples variable in m000001
waitAndClick(Locator.tagWithText("button", "Search"));
waitForElement(Locator.tagWithAttribute("div", "aria-labelledby", "field-label")).click();
waitForElement(Locator.tagWithText("li", "Samples With Variant")).click();
waitForElement(Locator.tagWithAttribute("div", "aria-labelledby", "operator-label")).click();
waitForElement(Locator.tagWithText("li", "variable in")).click();
waitForElement(Locator.tagWithId("input", "value-select-0")).sendKeys("m00001");
waitForElement(Locator.tagWithId("input", "value-select-0")).sendKeys(Keys.ENTER);
waitAndClick(Locator.tagWithClass("button", "filter-form-select-button"));
waitForElement(Locator.tagWithText("span", "0.553"));

clearFilterDialog("variableSamples variable in m00001");

// VariableSamples li usage + variable in all of
waitAndClick(Locator.tagWithText("button", "Search"));
waitForElement(Locator.tagWithAttribute("div", "aria-labelledby", "field-label")).click();
waitForElement(Locator.tagWithText("li", "Samples With Variant")).click();
waitForElement(Locator.tagWithAttribute("div", "aria-labelledby", "operator-label")).click();
waitForElement(Locator.tagWithText("li", "variable in all of")).click();
waitForElement(Locator.tagWithId("input", "value-select-0")).sendKeys("m000");
waitForElement(Locator.tagWithText("div", "m00005")).click();
waitForElement(Locator.tagWithId("input", "value-select-0")).sendKeys("m000");
waitForElement(Locator.tagWithText("div", "m00004")).click();
waitAndClick(Locator.tagWithClass("button", "filter-form-select-button"));
waitForElement(Locator.tagWithText("span", "0.3"));

clearFilterDialog("variableSamples variable in all of m00005,m00004");

// VariableSamples not variable in m05710
waitAndClick(Locator.tagWithText("button", "Search"));
waitForElement(Locator.tagWithAttribute("div", "aria-labelledby", "field-label")).click();
waitForElement(Locator.tagWithText("li", "Samples With Variant")).click();
waitForElement(Locator.tagWithAttribute("div", "aria-labelledby", "operator-label")).click();
waitForElement(Locator.tagWithText("li", "not variable in")).click();
waitForElement(Locator.tagWithId("input", "value-select-0")).sendKeys("m05710");
waitForElement(Locator.tagWithId("input", "value-select-0")).sendKeys(Keys.ENTER);
waitAndClick(Locator.tagWithClass("button", "filter-form-select-button"));
waitForElementToDisappear(Locator.tagWithText("span", "3.277E-4"));

clearFilterDialog("variableSamples not variable in m05710");

// samples with variant isEmpty
waitAndClick(Locator.tagWithText("button", "Search"));
waitForElement(Locator.tagWithAttribute("div", "aria-labelledby", "field-label")).click();
waitForElement(Locator.tagWithText("li", "Samples With Variant")).click();
waitForElement(Locator.tagWithAttribute("div", "aria-labelledby", "operator-label")).click();
waitForElement(Locator.tagWithText("li", "is empty")).click();
waitAndClick(Locator.tagWithClass("button", "filter-form-select-button"));
waitForElementToDisappear(Locator.tagWithText("span", "2"));

clearFilterDialog("variableSamples is empty");
}
}