Skip to content

Commit

Permalink
Fix v2.2.3 (#396)
Browse files Browse the repository at this point in the history 
* point to correct data file in GCS

* Change order of PDB ID input and protein selector

* Clear PDB ID on protein change, or set to a default PDB ID if available

* Add link to RCSB COVID-19 resource page

* more lenient default settings for the surveillance plot

* Set default sort mode to descending counts, and disable sorting inputs

* Hide surveillance settings under an accordion

* Fix clicking on map to select country in global seq plot

* bump version
  • Loading branch information
@atc3
atc3 authored Aug 26, 2021
1 parent dc5397d commit 25086cb
Show file tree
Hide file tree
Showing 11 changed files with 216 additions and 137 deletions.
2 changes: 1 addition & 1 deletion package-lock.json
View file

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

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "covidcg",
"version": "2.2.2",
"version": "2.2.3",
"description": "",
"engines": {
"node": ">=8",
Expand Down
38 changes: 26 additions & 12 deletions src/components/GroupReport/GroupStructuralViewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { colorHeatmap, getMoleculeAssemblies } from '../LiteMol/litemolutils';
import { reds } from '../../constants/colors';
import { hexToRgb } from '../../utils/color';
import { getAllProteins } from '../../utils/gene_protein';
import defaultStructures from '../../../static_data/default_structures.json';

import EmptyPlot from '../Common/EmptyPlot';
import DownloadPymolScriptModal from '../Modals/DownloadPymolScriptModal';
Expand Down Expand Up @@ -64,11 +65,24 @@ const StructuralViewer = observer(() => {
};
const onChangeReportStructureActiveProtein = (event) => {
const newProtein = event.target.value;

if (newProtein === state.activeProtein) {
return;
}

setState({
...state,
activeProtein: newProtein,
activeProteinChanged:
newProtein != plotSettingsStore.reportStructureActiveProtein,
// Clear PDB ID when protein changes
pdbId: Object.keys(defaultStructures).includes(newProtein)
? defaultStructures[newProtein]
: '',
validPdbId: Object.keys(defaultStructures).includes(newProtein)
? true
: false,
pdbIdChanged: true,
});
};
const onChangePdbId = (event) => {
Expand Down Expand Up @@ -300,17 +314,6 @@ const StructuralViewer = observer(() => {
<ConfirmButton onClick={downloadData}>Download Data</ConfirmButton>
</StructuralViewerHeader>
<StructuralViewerHeader>
<OptionSelectContainer>
<label>
Protein
<select
value={state.activeProtein}
onChange={onChangeReportStructureActiveProtein}
>
{proteinOptionItems}
</select>
</label>
</OptionSelectContainer>
<OptionInputContainer>
<label>
PDB ID
Expand All @@ -319,10 +322,21 @@ const StructuralViewer = observer(() => {
{!state.validPdbId && <InvalidText>Invalid PDB ID</InvalidText>}
{(state.pdbIdChanged || state.activeProteinChanged) && (
<ConfirmButton disabled={!state.validPdbId} onClick={applyChanges}>
Apply Changes
Apply
</ConfirmButton>
)}
</OptionInputContainer>
<OptionSelectContainer>
<label>
Protein
<select
value={state.activeProtein}
onChange={onChangeReportStructureActiveProtein}
>
{proteinOptionItems}
</select>
</label>
</OptionSelectContainer>
<div className="spacer"></div>
<ConfirmButton onClick={showDownloadPymolScriptModal}>
Download PyMOL Script
Expand Down
6 changes: 6 additions & 0 deletions src/components/Pages/GroupReportTab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,12 @@ const GroupReportTab = observer(() => {
compatibility, so it is possible to, for example, erroneously map
nsp12 SNVs onto a Spike structure.
</li>
<li>
More structures available at the{' '}
<ExternalLink href="https://www.rcsb.org/news?year=2020&article=5e74d55d2d410731e9944f52&feature=true">
RCSB COVID-19 resource page
</ExternalLink>
</li>
</ul>
}
>
Expand Down
254 changes: 138 additions & 116 deletions src/components/Vega/SurveillancePlot.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import {
LegendItemContainer,
LegendItemName,
LegendItemCounts,
CollapseButton,
} from './SurveillancePlot.styles';

const maxCharsPerLine = 10;
Expand Down Expand Up @@ -198,8 +199,16 @@ const SurveillancePlot = observer(({ width }) => {
},
signalListeners: {},
legendItems: [],
showSettings: false,
});

const onToggleShowSettings = () => {
setState({
...state,
showSettings: !state.showSettings,
});
};

const onDismissWarning = () => {
setState({
...state,
Expand Down Expand Up @@ -349,127 +358,140 @@ const SurveillancePlot = observer(({ width }) => {
</select>
</label>
</OptionSelectContainer>{' '}
Sort by{' '}
<OptionSelectContainer>
<label>
<select
value={plotSettingsStore.surveillanceSortField}
onChange={onChangeSortField}
>
<option value={'group'}>Name</option>
<option value={'counts'}>Counts</option>
</select>
</label>
</OptionSelectContainer>
<OptionSelectContainer>
<label>
<select
value={plotSettingsStore.surveillanceSortDirection}
onChange={onChangeSortDirection}
>
<option value={SORT_DIRECTIONS.SORT_ASC}>Ascending</option>
<option value={SORT_DIRECTIONS.SORT_DESC}>Descending</option>
</select>
</label>
</OptionSelectContainer>
</OptionsRow>
<OptionsRow>
<span>Displayed {groupName}</span>
<QuestionButton
data-tip={`<p>To improve readability, ${groupName} which do not meet these conditions in any of the six continents are removed from the plots. For example, if one ${groupName} fails these conditions in 5 continents but passes in the last one, it will still be shown. If one ${groupName} fails these conditions in all 6 continents, it will be excluded.</p><p>Min Counts is defined as the minimum number of sequences with this ${groupName} in a given continent on a given week</p><p>Min Percent is defined as the minimum percent of sequences with this ${groupName} in a given continent on a given week</p>`}
data-html="true"
data-place="right"
data-for="main-tooltip"
style={{ marginRight: 8 }}
<CollapseButton onClick={onToggleShowSettings}>
{state.showSettings ? 'Hide' : 'Show'} Settings{' '}
<span className="caret"></span>
</CollapseButton>
<div className="spacer"></div>
<DropdownButton
text={'Download'}
options={[
PLOT_DOWNLOAD_OPTIONS.DOWNLOAD_DATA,
PLOT_DOWNLOAD_OPTIONS.DOWNLOAD_PNG,
PLOT_DOWNLOAD_OPTIONS.DOWNLOAD_PNG_2X,
PLOT_DOWNLOAD_OPTIONS.DOWNLOAD_PNG_4X,
PLOT_DOWNLOAD_OPTIONS.DOWNLOAD_SVG,
]}
onSelect={handleDownloadSelect}
/>
<OptionInputContainer>
<label>
Min Counts
<input
type="number"
value={plotSettingsStore.surveillanceDisplayMinCounts}
onChange={onChangeDisplayMinCounts}
min={0}
step={1}
/>
</label>
</OptionInputContainer>
<OptionInputContainer>
<label>
Min Percent
<input
type="number"
value={plotSettingsStore.surveillanceDisplayMinPercent}
onChange={onChangeDisplayMinPercent}
min={0}
max={1}
step={0.01}
/>
</label>
</OptionInputContainer>
</OptionsRow>
<OptionsRow>
<span>Highlighted {groupName}</span>
<QuestionButton
data-tip={`<p>Choose ${groupName} to highlight and display in the legend. ${groupName} which pass these conditions in at least one of six continents will be highlighted. Non-highlighted ${groupName} are still displayed but not colored.</p><p>Min Counts is defined as the minimum number of sequences with this ${groupName} in a given continent on a given week</p><p>Min Percent is defined as the minimum percent of sequences with this ${groupName} in a given continent on a given week</p><p>Min Correlation is defined as the minimum Pearson correlation of the % sequences of this ${groupName}. For the correlation calculations, the last ${config.surv_end_date_days_ago} days from today are omitted, to reduce noise in this metric.</p>`}
data-html="true"
data-place="right"
data-for="main-tooltip"
style={{ marginRight: 8 }}
/>
<OptionInputContainer>
<label>
Min Counts
<input
type="number"
value={plotSettingsStore.surveillanceSigMinCounts}
onChange={onChangeSigMinCounts}
min={0}
step={1}
{state.showSettings && (
<>
<OptionsRow>
Sort by{' '}
<OptionSelectContainer>
<label>
<select
value={plotSettingsStore.surveillanceSortField}
onChange={onChangeSortField}
>
<option value={'group'}>Name</option>
<option value={'counts'}>Counts</option>
</select>
</label>
</OptionSelectContainer>
<OptionSelectContainer>
<label>
<select
value={plotSettingsStore.surveillanceSortDirection}
onChange={onChangeSortDirection}
>
<option value={SORT_DIRECTIONS.SORT_ASC}>
Ascending
</option>
<option value={SORT_DIRECTIONS.SORT_DESC}>
Descending
</option>
</select>
</label>
</OptionSelectContainer>
</OptionsRow>
<OptionsRow>
<span>Displayed {groupName}</span>
<QuestionButton
data-tip={`<p>To improve readability, ${groupName} which do not meet these conditions in any of the six continents are removed from the plots. For example, if one ${groupName} fails these conditions in 5 continents but passes in the last one, it will still be shown. If one ${groupName} fails these conditions in all 6 continents, it will be excluded.</p><p>Min Counts is defined as the minimum number of sequences with this ${groupName} in a given continent on a given week</p><p>Min Percent is defined as the minimum percent of sequences with this ${groupName} in a given continent on a given week</p>`}
data-html="true"
data-place="right"
data-for="main-tooltip"
style={{ marginRight: 8 }}
/>
</label>
</OptionInputContainer>
<OptionInputContainer>
<label>
Min Percent
<input
type="number"
value={plotSettingsStore.surveillanceSigMinPercent}
onChange={onChangeSigMinPercent}
min={0}
max={1}
step={0.01}
/>
</label>
</OptionInputContainer>
<OptionInputContainer>
<label>
Min Correlation
<input
type="number"
value={plotSettingsStore.surveillanceSigMinR}
onChange={onChangeSigMinR}
min={-1}
max={1}
step={0.01}
<OptionInputContainer>
<label>
Min Counts
<input
type="number"
value={plotSettingsStore.surveillanceDisplayMinCounts}
onChange={onChangeDisplayMinCounts}
min={0}
step={1}
/>
</label>
</OptionInputContainer>
<OptionInputContainer>
<label>
Min Percent
<input
type="number"
value={plotSettingsStore.surveillanceDisplayMinPercent}
onChange={onChangeDisplayMinPercent}
min={0}
max={1}
step={0.01}
/>
</label>
</OptionInputContainer>
</OptionsRow>
<OptionsRow>
<span>Highlighted {groupName}</span>
<QuestionButton
data-tip={`<p>Choose ${groupName} to highlight and display in the legend. ${groupName} which pass these conditions in at least one of six continents will be highlighted. Non-highlighted ${groupName} are still displayed but not colored.</p><p>Min Counts is defined as the minimum number of sequences with this ${groupName} in a given continent on a given week</p><p>Min Percent is defined as the minimum percent of sequences with this ${groupName} in a given continent on a given week</p><p>Min Correlation is defined as the minimum Pearson correlation of the % sequences of this ${groupName}. For the correlation calculations, the last ${config.surv_end_date_days_ago} days from today are omitted, to reduce noise in this metric.</p>`}
data-html="true"
data-place="right"
data-for="main-tooltip"
style={{ marginRight: 8 }}
/>
</label>
</OptionInputContainer>
</OptionsRow>
<OptionInputContainer>
<label>
Min Counts
<input
type="number"
value={plotSettingsStore.surveillanceSigMinCounts}
onChange={onChangeSigMinCounts}
min={0}
step={1}
/>
</label>
</OptionInputContainer>
<OptionInputContainer>
<label>
Min Percent
<input
type="number"
value={plotSettingsStore.surveillanceSigMinPercent}
onChange={onChangeSigMinPercent}
min={0}
max={1}
step={0.01}
/>
</label>
</OptionInputContainer>
<OptionInputContainer>
<label>
Min Correlation
<input
type="number"
value={plotSettingsStore.surveillanceSigMinR}
onChange={onChangeSigMinR}
min={-1}
max={1}
step={0.01}
/>
</label>
</OptionInputContainer>
</OptionsRow>
</>
)}
</OptionsColumn>

<div className="spacer"></div>
<DropdownButton
text={'Download'}
options={[
PLOT_DOWNLOAD_OPTIONS.DOWNLOAD_DATA,
PLOT_DOWNLOAD_OPTIONS.DOWNLOAD_PNG,
PLOT_DOWNLOAD_OPTIONS.DOWNLOAD_PNG_2X,
PLOT_DOWNLOAD_OPTIONS.DOWNLOAD_PNG_4X,
PLOT_DOWNLOAD_OPTIONS.DOWNLOAD_SVG,
]}
onSelect={handleDownloadSelect}
/>
</PlotOptions>
<PlotAndLegend>
<SurveillanceLegend
Expand Down
Loading

0 comments on commit 25086cb

Please sign in to comment.