Skip to content

Commit

Permalink
EDA in WDK: Integrate EDA Subsetting in a WDK search page (#1314)
Browse files Browse the repository at this point in the history 
* checkpoint

* Add type annotations to remove inferred `any` type.

* Allow an analysis descriptor to be provided to `useAnalysis`

* Only update state if the next param value is different than the previous
param value

* Extract useAnalysisState to allow external state tracking of analysis object

* Use useAnalysisState, add counts, etc

* Add stubbed question page with custom name

* Allow hiding starred variable feature

* fix typo

* Use global memoization

* Encapsulate creation of eda api clients

* Adhere to lastest "api" for GenesByEdaSubset

* dont wrap sentence

* fix label in user comment upload form

* Fix volcano plot thumbnail out of sync (#1299)

* fix for thumnails not rendering

* replace mutating state with better check of filters

* Allow html formatting in search page header

* Enable override for GenesByEdaSubset and set question page heading
dynamically.

* use more specific query name

* Use alphabetic ordering when displaying a flattened list of eda entities (#1323)

* only order variable tree entities alphabetically (#1324)

* Add annotations to plotly plots (#1321)

* added plot annotations functionality

* improve scatter annotation story

* added histogram annotation story

* introduce VEuPathDBAnnotation type

* fix annotation types in histogram

* update query name

* use dynamic import for plotly, to keep it out of the main bundle

* replace "EdaSubsetting" with "EdaSubset"

* Revert to injecting script and link tags in document head

* rename component

* Add custom formatter for stepDetails

* Handle empty filters in param value formatter

---------

Co-authored-by: aurreco-uga <[email protected]>
Co-authored-by: Cristina Aurrecoechea <[email protected]>
Co-authored-by: Ann Sizemore Blevins <[email protected]>
  • Loading branch information
@dmfalke @aurreco-uga @asizemore
4 people authored Feb 18, 2025
1 parent f13e699 commit da03916
Show file tree
Hide file tree
Showing 20 changed files with 638 additions and 249 deletions.
5 changes: 3 additions & 2 deletions packages/libs/components/src/plots/PlotlyPlot.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import {
// add d3.select
import { select } from 'd3';
// 3rd party toImage function from plotly
import Plotly, { ToImgopts, DataTitle } from 'plotly.js';
import { ToImgopts, DataTitle } from 'plotly.js';
import { uniqueId } from 'lodash';
import { makeSharedPromise } from '../utils/promise-utils';
import NoDataOverlay from '../components/NoDataOverlay';
Expand Down Expand Up @@ -402,7 +402,8 @@ function PlotlyPlot<T>(
try {
await sharedPlotCreation.promise;
// Call the 3rd party function that actually creates the image
return await Plotly.toImage(plotId, imageOpts);
const plotlyModule = await import('plotly.js');
return await plotlyModule.default.toImage(plotId, imageOpts);
} catch (error) {
console.error('Could not create image for plot:', error);
}
Expand Down
95 changes: 54 additions & 41 deletions packages/libs/eda/src/lib/core/components/variableSelectors/VariableList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ interface FieldNodeProps {
activeFieldEntity?: string;
isStarred: boolean;
starredVariablesLoading: boolean;
onClickStar: () => void;
onClickStar?: () => void;
scrollIntoView: boolean;
asDropdown?: boolean;
isFeaturedField?: boolean;
Expand Down Expand Up @@ -189,7 +189,7 @@ interface VariableListProps {
fieldTree: VariableFieldTreeNode;
autoFocus: boolean;
starredVariables?: VariableDescriptor[];
toggleStarredVariable: (targetVariableId: VariableDescriptor) => void;
toggleStarredVariable?: (targetVariableId: VariableDescriptor) => void;
disabledFieldIds?: string[];
customDisabledVariableMessage?: string;
featuredFields: FieldWithMetadata[];
Expand Down Expand Up @@ -441,7 +441,10 @@ export default function VariableList({
activeFieldEntity={activeFieldEntity}
isStarred={starredVariableTermsSet.has(fieldTerm)}
starredVariablesLoading={starredVariablesLoading}
onClickStar={() => toggleStarredVariable({ entityId, variableId })}
onClickStar={
toggleStarredVariable &&
(() => toggleStarredVariable({ entityId, variableId }))
}
/**
* map UI has limited space, so let's disable scrollIntoView
* in the map context so that we don't inadvertantly hide
Expand All @@ -466,6 +469,7 @@ export default function VariableList({
starredVariablesLoading,
asDropdown,
toggleStarredVariable,
scope,
]
);

Expand All @@ -477,44 +481,48 @@ export default function VariableList({
!showOnlyStarredVariables && starredVariableTermsSet.size === 0;

const additionalFilters = useMemo(
() => [
<Tooltip
title={makeStarredVariablesFilterTooltipContent(
showOnlyStarredVariables,
starredVariableToggleDisabled
)}
>
<div>
<button
className="btn"
style={{
display: 'grid',
padding: '0.5em',
gridAutoFlow: 'column',
gap: '0.4em',
cursor: starredVariableToggleDisabled ? 'not-allowed' : 'default',
opacity: starredVariableToggleDisabled ? '0.5' : '1',
color: '#f8cb6a',
}}
type="button"
onClick={toggleShowOnlyStarredVariables}
>
<Toggle
value={showOnlyStarredVariables}
onChange={() => {}}
disabled={starredVariableToggleDisabled}
size="small"
themeRole="primary"
/>
<Icon fa="star" />
</button>
</div>
</Tooltip>,
],
() =>
toggleStarredVariable && [
<Tooltip
title={makeStarredVariablesFilterTooltipContent(
showOnlyStarredVariables,
starredVariableToggleDisabled
)}
>
<div>
<button
className="btn"
style={{
display: 'grid',
padding: '0.5em',
gridAutoFlow: 'column',
gap: '0.4em',
cursor: starredVariableToggleDisabled
? 'not-allowed'
: 'default',
opacity: starredVariableToggleDisabled ? '0.5' : '1',
color: '#f8cb6a',
}}
type="button"
onClick={toggleShowOnlyStarredVariables}
>
<Toggle
value={showOnlyStarredVariables}
onChange={() => {}}
disabled={starredVariableToggleDisabled}
size="small"
themeRole="primary"
/>
<Icon fa="star" />
</button>
</div>
</Tooltip>,
],
[
showOnlyStarredVariables,
starredVariableToggleDisabled,
toggleShowOnlyStarredVariables,
toggleStarredVariable,
]
);

Expand Down Expand Up @@ -778,8 +786,13 @@ export default function VariableList({
field.term
)}
starredVariablesLoading={starredVariablesLoading}
onClickStar={() =>
toggleStarredVariable({ entityId, variableId })
onClickStar={
toggleStarredVariable &&
(() =>
toggleStarredVariable({
entityId,
variableId,
}))
}
scrollIntoView={false}
asDropdown={asDropdown}
Expand Down Expand Up @@ -1019,7 +1032,7 @@ const FieldNode = ({
<div css={{ ...fieldNodeCssSelectors, width: '100%' }}>
<div className={canBeStarred ? 'starred-var-container' : ''}>
{fieldContents}
{isFilterField(field) && !isMultiFilterDescendant && (
{onClickStar && isFilterField(field) && !isMultiFilterDescendant && (
/**
* Temporarily replace Tooltip components with title attribute to alleviate performance issues in new CheckboxTree.
* We are currently rendering 2 Tooltips per variable, which in Microbiome equates to several thousand Tooltips
Expand All @@ -1046,7 +1059,7 @@ const FieldNode = ({
) : (
<div className={canBeStarred ? 'starred-var-container' : ''}>
{fieldContents}
{isFilterField(field) && !isMultiFilterDescendant && (
{onClickStar && isFilterField(field) && !isMultiFilterDescendant && (
/**
* Temporarily replace Tooltip components with title attribute to alleviate performance issues in new CheckboxTree.
* We are currently rendering 2 Tooltips per variable, which in Microbiome equates to several thousand Tooltips
Expand Down
2 changes: 1 addition & 1 deletion packages/libs/eda/src/lib/core/components/variableSelectors/VariableTree.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { orderBy } from 'lodash';

export interface VariableTreeProps {
starredVariables?: VariableDescriptor[];
toggleStarredVariable: (targetVariableId: VariableDescriptor) => void;
toggleStarredVariable?: (targetVariableId: VariableDescriptor) => void;
entityId?: string;
variableId?: string;
disabledVariables?: VariableDescriptor[];
Expand Down
Loading

0 comments on commit da03916

Please sign in to comment.