Skip to content

GitLab

Unverified Commit bbd47e9f authored by Ridwan Amode's avatar Ridwan Amode Committed by GitHub
Browse files

blast parameter layout for different screen sizes (#738)

parent b0874e05
Pipeline #274029 passed with stages
in 5 minutes and 7 seconds
Hide whitespace changes
Inline Side-by-side
Showing with 198 additions and 124 deletions
src/content/app/tools/blast/components/blast-settings/BlastSettings.scss
View file @ bbd47e9f
@import 'src/styles/common';
.topLevelContainer {
display: grid;
grid-template-columns: 1fr auto;
column-gap: 20px;
max-width: 1800px;
}
.topLevel {
display: flex;
gap: 1rem;
flex-wrap: wrap;
align-items: center;
gap: 20px;
}
.mainSettings {
display: flex;
gap: 1rem;
.title {
margin: 0 25px 3px 0;
font-size: 16px;
}
.mainSettings > * {
flex: 0 0 auto;
.runJob {
font-weight: $bold;
margin-right: 35px;
}
.mainSettings select {
flex: 0 0 auto;
.previousJobs {
height: 32px;
width: 120px;
}
.select label {
......@@ -24,6 +34,15 @@
column-gap: 10px;
}
.parametersColumn .select label {
grid-template-columns: 140px 70px;
text-align: right;
}
.parametersColumn .matrixSetting .select label {
grid-template-columns: 140px 110px;
}
.select label span {
font-weight: $light;
line-height: 27px;
......@@ -32,8 +51,12 @@
.bottomLevel {
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding-top: 0.6rem;
gap: 15px;
padding-top: 20px;
margin-left: 104px;
@media (max-width: 1610px) {
margin-left: -10px;
}
}
.bottomLevel > * {
......@@ -41,15 +64,28 @@
white-space: nowrap;
}
.parametersColumn {
display: grid;
grid-template-rows: 40px 40px;
}
.blastJobBlock {
display: inline-flex;
align-items: center;
column-gap: 32px;
column-gap: 30px;
margin-left: 20px;
}
.blastJobName {
display: inline-flex;
column-gap: 24px;
column-gap: 11px;
align-items: center;
white-space: nowrap;
}
.checkboxesColumn {
margin-left: 60px;
@media (min-width: 1190px) and (max-width: 1490px) {
margin-left: 150px;
}
}
src/content/app/tools/blast/components/blast-settings/BlastSettings.tsx
View file @ bbd47e9f
......@@ -15,12 +15,15 @@
*/
import React, { FormEvent, useEffect, useState } from 'react';
import classNames from 'classnames';
import { useSelector, useDispatch } from 'react-redux';
import noop from 'lodash/noop';
import ShowHide from 'src/shared/components/show-hide/ShowHide';
import Checkbox from 'src/shared/components/checkbox/Checkbox';
import SimpleSelect from 'src/shared/components/simple-select/SimpleSelect';
import ShadedInput from 'src/shared/components/input/ShadedInput';
import { SecondaryButton } from 'src/shared/components/button/Button';
import BlastJobSubmit from 'src/content/app/tools/blast/components/blast-job-submit/BlastJobSubmit';
import {
......@@ -152,118 +155,154 @@ const BlastSettings = ({ config }: Props) => {
return (
<>
<div className={styles.topLevel}>
Settings
<div className={styles.mainSettings}>
{buildSelect({
...(config.parameters['database'] as BlastSelectSetting),
selectedOption: blastParameters.database as string,
onChange: onDatabaseChange
})}
{buildSelect({
...(availableBlastPrograms as BlastSelectSetting),
selectedOption: blastProgram,
onChange: onBlastProgramChange
})}
{buildSelect({
...(getPresetsList(config) as BlastSelectSetting),
selectedOption: searchSensitivity,
onChange: onSearchSensitivityChange
})}
</div>
<div>
<ShowHide
label="Parameters"
isExpanded={parametersExpanded}
onClick={onParametersToggle}
/>
</div>
<div className={styles.blastJobBlock}>
<BlastJobName />
<BlastJobSubmit />
<div className={styles.topLevelContainer}>
<div className={styles.topLevel}>
<h1 className={styles.title}>Blast</h1>
<div className={styles.runJob}>Run a job</div>
<div>
{buildSelect({
...(config.parameters['database'] as BlastSelectSetting),
selectedOption: blastParameters.database as string,
onChange: onDatabaseChange
})}
</div>
<div>
{buildSelect({
...(availableBlastPrograms as BlastSelectSetting),
selectedOption: blastProgram,
onChange: onBlastProgramChange
})}
</div>
<div>
{buildSelect({
...(getPresetsList(config) as BlastSelectSetting),
selectedOption: searchSensitivity,
onChange: onSearchSensitivityChange
})}
</div>
<div>
<ShowHide
label="Parameters"
isExpanded={parametersExpanded}
onClick={onParametersToggle}
/>
</div>
<div className={styles.blastJobBlock}>
<BlastJobName />
<BlastJobSubmit />
</div>
</div>
<SecondaryButton className={styles.previousJobs} onClick={noop}>
Jobs list
</SecondaryButton>
</div>
{parametersExpanded && (
<div className={styles.bottomLevel}>
{buildSelect({
...(config.parameters['alignments'] as BlastSelectSetting),
selectedOption: blastParameters.alignments as string,
onChange: (value: string) =>
onBlastParameterChange('alignments', value)
})}
{buildSelect({
...(config.parameters['scores'] as BlastSelectSetting),
selectedOption: blastParameters.scores as string,
onChange: (value: string) => onBlastParameterChange('scores', value)
})}
{buildSelect({
...(config.parameters['hsps'] as BlastSelectSetting),
selectedOption: blastParameters.hsps as string,
onChange: (value: string) => onBlastParameterChange('hsps', value)
})}
{buildSelect({
...(config.parameters['dropoff'] as BlastSelectSetting),
selectedOption: blastParameters.dropoff as string,
onChange: (value: string) =>
onBlastParameterChange('dropoff', value)
})}
{buildCheckbox({
...(config.parameters['gapalign'] as BlastBooleanSetting),
selectedOption: blastParameters.gapalign as string,
onChange: (value: string) =>
onBlastParameterChange('gapalign', value)
})}
{buildCheckbox({
...(config.parameters['filter'] as BlastBooleanSetting),
selectedOption: blastParameters.filter as string,
onChange: (value: string) => onBlastParameterChange('filter', value)
})}
{buildSelect({
...(config.parameters['compstats'] as BlastSelectSetting),
selectedOption: blastParameters.compstats as string,
onChange: (value: string) =>
onBlastParameterChange('compstats', value)
})}
{buildSelect({
...(config.parameters['exp'] as BlastSelectSetting),
selectedOption: blastParameters.exp as string,
onChange: (value: string) => onBlastParameterChange('exp', value)
})}
{databaseSequenceType === 'dna' &&
buildSelect({
...(config.parameters['match_scores'] as BlastSelectSetting),
selectedOption: blastParameters.match_scores as string,
<div className={styles.parametersColumn}>
{buildSelect({
...(config.parameters['alignments'] as BlastSelectSetting),
selectedOption: blastParameters.alignments as string,
onChange: (value: string) =>
onBlastParameterChange('alignments', value)
})}
{buildSelect({
...(config.parameters['scores'] as BlastSelectSetting),
selectedOption: blastParameters.scores as string,
onChange: (value: string) =>
onBlastParameterChange('scores', value)
})}
</div>
<div className={styles.parametersColumn}>
{buildSelect({
...(config.parameters['exp'] as BlastSelectSetting),
selectedOption: blastParameters.exp as string,
onChange: (value: string) => onBlastParameterChange('exp', value)
})}
{buildSelect({
...(config.parameters['compstats'] as BlastSelectSetting),
selectedOption: blastParameters.compstats as string,
onChange: (value: string) =>
onBlastParameterChange('compstats', value)
})}
</div>
<div className={styles.parametersColumn}>
{buildSelect({
...(config.parameters['hsps'] as BlastSelectSetting),
selectedOption: blastParameters.hsps as string,
onChange: (value: string) => onBlastParameterChange('hsps', value)
})}
{buildSelect({
...(config.parameters['dropoff'] as BlastSelectSetting),
selectedOption: blastParameters.dropoff as string,
onChange: (value: string) =>
onBlastParameterChange('dropoff', value)
})}
</div>
<div className={styles.parametersColumn}>
{buildSelect({
...(config.parameters['gapopen'] as BlastSelectSetting),
selectedOption: blastParameters.gapopen as string,
onChange: (value: string) =>
onBlastParameterChange('gapopen', value)
})}
{buildSelect({
...(config.parameters['gapext'] as BlastSelectSetting),
selectedOption: blastParameters.gapext as string,
onChange: (value: string) =>
onBlastParameterChange('gapext', value)
})}
</div>
<div className={styles.parametersColumn}>
{buildSelect({
options: config.programs_parameters_override.wordsize[
blastProgram
]
? config.programs_parameters_override.wordsize[blastProgram]
.options
: (config.parameters.wordsize.options as Option[]),
label: config.parameters.wordsize.label,
selectedOption: blastParameters.wordsize as string,
onChange: (value: string) =>
onBlastParameterChange('wordsize', value)
})}
{databaseSequenceType === 'dna' &&
buildSelect({
...(config.parameters['match_scores'] as BlastSelectSetting),
selectedOption: blastParameters.match_scores as string,
onChange: (value: string) =>
onBlastParameterChange('match_scores', value)
})}
<div className={styles.matrixSetting}>
{databaseSequenceType === 'protein' &&
buildSelect({
...(config.parameters['matrix'] as BlastSelectSetting),
selectedOption: blastParameters.matrix as string,
onChange: (value: string) =>
onBlastParameterChange('matrix', value)
})}
</div>
</div>
<div
className={classNames(
styles.parametersColumn,
styles.checkboxesColumn
)}
>
{buildCheckbox({
...(config.parameters['gapalign'] as BlastBooleanSetting),
selectedOption: blastParameters.gapalign as string,
onChange: (value: string) =>
onBlastParameterChange('match_scores', value)
onBlastParameterChange('gapalign', value)
})}
{buildSelect({
options: config.programs_parameters_override.wordsize[blastProgram]
? config.programs_parameters_override.wordsize[blastProgram]
.options
: (config.parameters.wordsize.options as Option[]),
label: config.parameters.wordsize.label,
selectedOption: blastParameters.wordsize as string,
onChange: (value: string) =>
onBlastParameterChange('wordsize', value)
})}
{buildSelect({
...(config.parameters['gapopen'] as BlastSelectSetting),
selectedOption: blastParameters.gapopen as string,
onChange: (value: string) =>
onBlastParameterChange('gapopen', value)
})}
{buildSelect({
...(config.parameters['gapext'] as BlastSelectSetting),
selectedOption: blastParameters.gapext as string,
onChange: (value: string) => onBlastParameterChange('gapext', value)
})}
{databaseSequenceType === 'protein' &&
buildSelect({
...(config.parameters['matrix'] as BlastSelectSetting),
selectedOption: blastParameters.matrix as string,
{buildCheckbox({
...(config.parameters['filter'] as BlastBooleanSetting),
selectedOption: blastParameters.filter as string,
onChange: (value: string) =>
onBlastParameterChange('matrix', value)
onBlastParameterChange('filter', value)
})}
</div>
</div>
)}
</>
......@@ -281,7 +320,7 @@ const BlastJobName = () => {
return (
<div className={styles.blastJobName}>
<span>Name the job</span>
<span>Name this job</span>
<ShadedInput value={jobName} onChange={onChange} placeholder="optional" />
</div>
);
......
src/content/app/tools/shared/components/tools-top-bar/ToolsTopBar.scss
View file @ bbd47e9f
......@@ -3,7 +3,7 @@
.topBar {
min-height: 74px;
background-color: $light-grey;
padding-left: 36px; // TODO: does this value repeat across Genome Browser, Entity Viewer, and Tools?
padding: 24px 20px 20px 30px;
box-shadow: 0 3px 5px $global-box-shadow;
margin-bottom: 21px;
}
src/shared/hooks/tests/useApiService.test.tsx
View file @ bbd47e9f
......@@ -59,9 +59,8 @@ const TestingComponent = (props: TestingComponentProps) => {
endpoint: mockEndpoint,
...props
};
const { loadingState, data, error } = useApiService<{ message: string }>(
params
);
const { loadingState, data, error } =
useApiService<{ message: string }>(params);
if (loadingState === LoadingState.NOT_REQUESTED) {
return <div>Data not requested</div>;
......
tests/fixtures/blast/blastSettingsConfig.json
View file @ bbd47e9f
......@@ -211,7 +211,7 @@
]
},
"gapalign": {
"label": "Gapalign",
"label": "Gap align",
"description": "This is a true/false setting that tells the program the perform optimised alignments within regions involving gaps. If set to true, the program will perform an alignment using gaps. Otherwise, if it is set to false, it will report only individual HSP where two sequence match each other, and thus will not produce alignments with gaps.",
"type": "boolean",
"options": {
......@@ -220,7 +220,7 @@
}
},
"filter": {
"label": "Filter",
"label": "Filter low complexity regions",
"description": "Filter regions of low sequence complexity. This can avoid issues with low complexity sequences where matches are found due to composition rather than meaningful sequence similarity. However in some cases filtering also masks regions of interest and so should be used with caution.",
"type": "boolean",
"options": {
......@@ -708,7 +708,7 @@
"database": "dna"
},
"presets": {
"label": "Search sensitivity",
"label": "Sensitivity",
"defaultPreset": "normal",
"options": [
{
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment