From e853eba274423c907179cb224357e077b7223c2c Mon Sep 17 00:00:00 2001 From: asizemore Date: Wed, 17 Jan 2024 13:31:00 -0500 Subject: [PATCH 1/2] update network compnoents and types for name uniformity --- .../components/src/plots/BipartiteNetwork.tsx | 39 +++++++------ .../libs/components/src/plots/Network.tsx | 6 +- .../plots/BipartiteNetwork.stories.tsx | 58 ++++++++++--------- .../src/stories/plots/Network.stories.tsx | 10 ++-- .../stories/plots/NodeWithLabel.stories.tsx | 4 +- .../components/src/types/plots/network.ts | 26 +++++---- .../eda/src/lib/core/api/DataClient/types.ts | 28 ++++----- .../BipartiteNetworkVisualization.tsx | 42 ++++++++------ 8 files changed, 116 insertions(+), 97 deletions(-) diff --git a/packages/libs/components/src/plots/BipartiteNetwork.tsx b/packages/libs/components/src/plots/BipartiteNetwork.tsx index 177c5817f2..ff93d4ffea 100755 --- a/packages/libs/components/src/plots/BipartiteNetwork.tsx +++ b/packages/libs/components/src/plots/BipartiteNetwork.tsx @@ -1,4 +1,4 @@ -import { BipartiteNetworkData, NodeData } from '../types/plots/network'; +import { BipartiteNetwork, NetworkNode } from '../types/plots/network'; import { partition } from 'lodash'; import { LabelPosition, Link, NodeWithLabel } from './Network'; import { Graph } from '@visx/network'; @@ -16,16 +16,16 @@ import domToImage from 'dom-to-image'; import { gray } from '@veupathdb/coreui/lib/definitions/colors'; import './BipartiteNetwork.css'; -export interface BipartiteNetworkSVGStyles { +export interface BipartiteNetworkPlotSVGStyles { width?: number; // svg width topPadding?: number; // space between the top of the svg and the top-most node nodeSpacing?: number; // space between vertically adjacent nodes columnPadding?: number; // space between the left of the svg and the left column, also the right of the svg and the right column. } -export interface BipartiteNetworkProps { - /** Bipartite network data */ - data: BipartiteNetworkData | undefined; +export interface BipartiteNetworkPlotProps { + /** Bipartite network */ + network: BipartiteNetwork | undefined; /** Name of column 1 */ column1Name?: string; /** Name of column 2 */ @@ -35,7 +35,7 @@ export interface BipartiteNetworkProps { /** bipartite network-specific styling for the svg itself. These * properties will override any adaptation the network may try to do based on the container styles. */ - svgStyleOverrides?: BipartiteNetworkSVGStyles; + svgStyleOverrides?: BipartiteNetworkPlotSVGStyles; /** container name */ containerClass?: string; /** shall we show the loading spinner? */ @@ -44,8 +44,8 @@ export interface BipartiteNetworkProps { labelTruncationLength?: number; } -// Show a few gray nodes when there is no real data. -const EmptyBipartiteNetworkData: BipartiteNetworkData = { +// Show a few gray nodes when there is no real network. +const EmptyBipartiteNetwork: BipartiteNetwork = { column1NodeIDs: ['0', '1', '2', '3', '4', '5'], column2NodeIDs: ['6', '7', '8'], nodes: [...Array(9).keys()].map((item) => ({ @@ -58,12 +58,12 @@ const EmptyBipartiteNetworkData: BipartiteNetworkData = { // The BipartiteNetwork function draws a two-column network using visx. This component handles // the positioning of each column, and consequently the positioning of nodes and links. -function BipartiteNetwork( - props: BipartiteNetworkProps, +function BipartiteNetworkPlot( + props: BipartiteNetworkPlotProps, ref: Ref ) { const { - data = EmptyBipartiteNetworkData, + network = EmptyBipartiteNetwork, column1Name, column2Name, containerStyles, @@ -102,19 +102,19 @@ function BipartiteNetwork( // In order to assign coordinates to each node, we'll separate the // nodes based on their column, then will use their order in the column // (given by columnXNodeIDs) to finally assign the coordinates. - const nodesByColumn: NodeData[][] = partition(data.nodes, (node) => { - return data.column1NodeIDs.includes(node.id); + const nodesByColumn: NetworkNode[][] = partition(network.nodes, (node) => { + return network.column1NodeIDs.includes(node.id); }); const nodesByColumnWithCoordinates = nodesByColumn.map( (column, columnIndex) => { const columnWithCoordinates = column.map((node) => { // Find the index of the node in the column - type ColumnName = keyof typeof data; + type ColumnName = keyof typeof network; const columnName = ('column' + (columnIndex + 1) + 'NodeIDs') as ColumnName; - const indexInColumn = data[columnName].findIndex( + const indexInColumn = network[columnName].findIndex( (id) => id === node.id ); @@ -132,7 +132,7 @@ function BipartiteNetwork( ); // Assign coordinates to links based on the newly created node coordinates - const linksWithCoordinates = data.links.map((link) => { + const linksWithCoordinates = network.links.map((link) => { const sourceNode = nodesByColumnWithCoordinates[0].find( (node) => node.id === link.source.id ); @@ -163,7 +163,10 @@ function BipartiteNetwork( void; /** Should the label be drawn to the left or right of the node? */ @@ -90,7 +90,7 @@ export function NodeWithLabel(props: NodeWithLabelProps) { } export interface LinkProps { - link: LinkData; + link: NetworkLink; // onClick?: () => void; To add in the future, maybe also some hover action } diff --git a/packages/libs/components/src/stories/plots/BipartiteNetwork.stories.tsx b/packages/libs/components/src/stories/plots/BipartiteNetwork.stories.tsx index 55e1d47df8..25dd0ac7ff 100755 --- a/packages/libs/components/src/stories/plots/BipartiteNetwork.stories.tsx +++ b/packages/libs/components/src/stories/plots/BipartiteNetwork.stories.tsx @@ -1,33 +1,33 @@ import { useState, useEffect, useRef, CSSProperties } from 'react'; import { Story, Meta } from '@storybook/react/types-6-0'; import { - NodeData, - LinkData, - BipartiteNetworkData, + NetworkNode, + NetworkLink, + BipartiteNetwork, } from '../../types/plots/network'; -import BipartiteNetwork, { - BipartiteNetworkProps, - BipartiteNetworkSVGStyles, +import BipartiteNetworkPlot, { + BipartiteNetworkPlotProps, + BipartiteNetworkPlotSVGStyles, } from '../../plots/BipartiteNetwork'; import { twoColorPalette } from '../../types/plots/addOns'; export default { title: 'Plots/Network/BipartiteNetwork', - component: BipartiteNetwork, + component: BipartiteNetworkPlot, } as Meta; interface TemplateProps { - data: BipartiteNetworkData; + data: BipartiteNetwork; column1Name?: string; column2Name?: string; loading?: boolean; showThumbnail?: boolean; containerStyles?: CSSProperties; - svgStyleOverrides?: BipartiteNetworkSVGStyles; + svgStyleOverrides?: BipartiteNetworkPlotSVGStyles; labelTruncationLength?: number; } -// Template for showcasing our BipartiteNetwork component. +// Template for showcasing our BipartiteNetworkPlot component. const Template: Story = (args) => { // Generate a jpeg version of the network (svg). // Mimicks the makePlotThumbnailUrl process in web-eda. @@ -41,8 +41,8 @@ const Template: Story = (args) => { }, 2000); }, []); - const bipartiteNetworkProps: BipartiteNetworkProps = { - data: args.data, + const bipartiteNetworkPlotProps: BipartiteNetworkPlotProps = { + network: args.data, column1Name: args.column1Name, column2Name: args.column2Name, showSpinner: args.loading, @@ -52,7 +52,7 @@ const Template: Story = (args) => { }; return ( <> - + {args.showThumbnail && ( <>

@@ -140,28 +140,32 @@ WithStyle.args = { function genBipartiteNetwork( column1nNodes: number, column2nNodes: number -): BipartiteNetworkData { +): BipartiteNetwork { // Create the first column of nodes - const column1Nodes: NodeData[] = [...Array(column1nNodes).keys()].map((i) => { - return { - id: String(i), - label: 'Node ' + String(i), - }; - }); + const column1Nodes: NetworkNode[] = [...Array(column1nNodes).keys()].map( + (i) => { + return { + id: String(i), + label: 'Node ' + String(i), + }; + } + ); // Create the second column of nodes - const column2Nodes: NodeData[] = [...Array(column2nNodes).keys()].map((i) => { - return { - id: String(i + column1nNodes), - label: 'Node ' + String(i + column1nNodes), - }; - }); + const column2Nodes: NetworkNode[] = [...Array(column2nNodes).keys()].map( + (i) => { + return { + id: String(i + column1nNodes), + label: 'Node ' + String(i + column1nNodes), + }; + } + ); // Create links // Not worried about exactly how many edges we're adding just yet since this is // used for stories only. Adding color here to mimic what the visualization // will do. - const links: LinkData[] = [...Array(column1nNodes * 2).keys()].map(() => { + const links: NetworkLink[] = [...Array(column1nNodes * 2).keys()].map(() => { return { source: column1Nodes[Math.floor(Math.random() * column1nNodes)], target: column2Nodes[Math.floor(Math.random() * column2nNodes)], diff --git a/packages/libs/components/src/stories/plots/Network.stories.tsx b/packages/libs/components/src/stories/plots/Network.stories.tsx index fa4d41c9b8..3ccf98d8e2 100755 --- a/packages/libs/components/src/stories/plots/Network.stories.tsx +++ b/packages/libs/components/src/stories/plots/Network.stories.tsx @@ -1,6 +1,6 @@ import { Story, Meta } from '@storybook/react/types-6-0'; import { Graph } from '@visx/network'; -import { NodeData, LinkData, NetworkData } from '../../types/plots/network'; +import { NetworkNode, NetworkLink, Network } from '../../types/plots/network'; import { Link, NodeWithLabel } from '../../plots/Network'; export default { @@ -12,7 +12,7 @@ export default { const DEFAULT_PLOT_SIZE = 500; interface TemplateProps { - data: NetworkData; + data: Network; } // This template is a simple network that highlights our NodeWithLabel and Link components. @@ -69,7 +69,7 @@ function genNetwork( width: number ) { // Create nodes with random positioning, an id, and optionally a label - const nodes: NodeData[] = [...Array(nNodes).keys()].map((i) => { + const nodes: NetworkNode[] = [...Array(nNodes).keys()].map((i) => { return { x: Math.floor(Math.random() * width), y: Math.floor(Math.random() * height), @@ -79,12 +79,12 @@ function genNetwork( }); // Create {nNodes} links. Just basic links no weighting or colors for now. - const links: LinkData[] = [...Array(nNodes).keys()].map(() => { + const links: NetworkLink[] = [...Array(nNodes).keys()].map(() => { return { source: nodes[Math.floor(Math.random() * nNodes)], target: nodes[Math.floor(Math.random() * nNodes)], }; }); - return { nodes, links } as NetworkData; + return { nodes, links } as Network; } diff --git a/packages/libs/components/src/stories/plots/NodeWithLabel.stories.tsx b/packages/libs/components/src/stories/plots/NodeWithLabel.stories.tsx index 5581465b64..d585883db8 100755 --- a/packages/libs/components/src/stories/plots/NodeWithLabel.stories.tsx +++ b/packages/libs/components/src/stories/plots/NodeWithLabel.stories.tsx @@ -1,5 +1,5 @@ import { Story, Meta } from '@storybook/react/types-6-0'; -import { NodeData } from '../../types/plots/network'; +import { NetworkNode } from '../../types/plots/network'; import { NodeWithLabel } from '../../plots/Network'; import { Group } from '@visx/group'; @@ -9,7 +9,7 @@ export default { } as Meta; interface TemplateProps { - data: NodeData; + data: NetworkNode; onClick: () => void; labelPosition?: 'right' | 'left'; fontWeight?: number; diff --git a/packages/libs/components/src/types/plots/network.ts b/packages/libs/components/src/types/plots/network.ts index a8cfb8a5c4..a38dafcc63 100755 --- a/packages/libs/components/src/types/plots/network.ts +++ b/packages/libs/components/src/types/plots/network.ts @@ -1,5 +1,9 @@ -// Types required for creating networks -export type NodeData = { +// Types required for creating networks. +// These types are intended to be generally useful for the final plotting +// stage of visualizing networks. They do not attempt to corral any data used +// to define network properties. That role is left to the application and context in which +// these types are used. +export type NetworkNode = { /** Node ID. Must be unique in the network! */ id: string; /** The x coordinate of the node */ @@ -18,11 +22,11 @@ export type NodeData = { strokeWidth?: number; }; -export type LinkData = { +export type NetworkLink = { /** The beginning node of the link */ - source: NodeData; + source: NetworkNode; /** The ending node of the link */ - target: NodeData; + target: NetworkNode; /** Link stroke width */ strokeWidth?: number; /** Link color */ @@ -31,16 +35,16 @@ export type LinkData = { opacity?: number; }; -/** NetworkData is the same format accepted by visx's Graph component. */ -export type NetworkData = { - nodes: NodeData[]; - links: LinkData[]; +/** Network is the same format accepted by visx's Graph component. */ +export type Network = { + nodes: NetworkNode[]; + links: NetworkLink[]; }; /** Bipartite network data is a regular network with addiitonal declarations of * nodes in each of the two columns. IDs in columnXNodeIDs must match node ids exactly. */ -export type BipartiteNetworkData = { +export type BipartiteNetwork = { column1NodeIDs: string[]; column2NodeIDs: string[]; -} & NetworkData; +} & Network; diff --git a/packages/libs/eda/src/lib/core/api/DataClient/types.ts b/packages/libs/eda/src/lib/core/api/DataClient/types.ts index 2e8524ffe2..3bb68fb77c 100755 --- a/packages/libs/eda/src/lib/core/api/DataClient/types.ts +++ b/packages/libs/eda/src/lib/core/api/DataClient/types.ts @@ -387,21 +387,23 @@ export interface VolcanoPlotRequestParams { } // Bipartite network -export type BipartiteNetworkResponse = TypeOf; +export type BipartiteNetworkPlotResponse = TypeOf< + typeof BipartiteNetworkPlotResponse +>; -const NodeData = type({ +const NetworkNodeData = type({ id: string, }); export const BipartiteNetworkData = type({ column1NodeIDs: array(string), column2NodeIDs: array(string), - nodes: array(NodeData), + nodes: array(NetworkNodeData), links: array( intersection([ type({ - source: NodeData, - target: NodeData, + source: NetworkNodeData, + target: NetworkNodeData, weight: string, }), partial({ @@ -411,32 +413,32 @@ export const BipartiteNetworkData = type({ ), }); -const BipartiteNetworkConfig = type({ +const BipartiteNetworkPlotConfig = type({ column1Metadata: string, column2Metadata: string, }); -export const BipartiteNetworkResponse = type({ +export const BipartiteNetworkPlotResponse = type({ bipartitenetwork: type({ data: BipartiteNetworkData, - config: BipartiteNetworkConfig, + config: BipartiteNetworkPlotConfig, }), }); // Correlation Bipartite Network // a specific flavor of the bipartite network that also includes correlationCoefThreshold and significanceThreshold -export type CorrelationBipartiteNetworkResponse = TypeOf< - typeof CorrelationBipartiteNetworkResponse +export type CorrelationBipartiteNetworkPlotResponse = TypeOf< + typeof CorrelationBipartiteNetworkPlotResponse >; -export const CorrelationBipartiteNetworkResponse = intersection([ - BipartiteNetworkResponse, +export const CorrelationBipartiteNetworkPlotResponse = intersection([ + BipartiteNetworkPlotResponse, type({ correlationCoefThreshold: number, significanceThreshold: number, }), ]); -export interface BipartiteNetworkRequestParams { +export interface BipartiteNetworkPlotRequestParams { studyId: string; filters: Filter[]; config: { diff --git a/packages/libs/eda/src/lib/core/components/visualizations/implementations/BipartiteNetworkVisualization.tsx b/packages/libs/eda/src/lib/core/components/visualizations/implementations/BipartiteNetworkVisualization.tsx index 853986de8b..a5376102d5 100755 --- a/packages/libs/eda/src/lib/core/components/visualizations/implementations/BipartiteNetworkVisualization.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/implementations/BipartiteNetworkVisualization.tsx @@ -10,13 +10,13 @@ import { import { RequestOptions } from '../options/types'; // Bipartite network imports -import BipartiteNetwork, { - BipartiteNetworkProps, +import BipartiteNetworkPlot, { + BipartiteNetworkPlotProps, } from '@veupathdb/components/lib/plots/BipartiteNetwork'; import BipartiteNetworkSVG from './selectorIcons/BipartiteNetworkSVG'; import { - BipartiteNetworkRequestParams, - CorrelationBipartiteNetworkResponse, + BipartiteNetworkPlotRequestParams, + CorrelationBipartiteNetworkPlotResponse, } from '../../../api/DataClient/types'; import { twoColorPalette } from '@veupathdb/components/lib/types/plots/addOns'; import { useCallback, useMemo } from 'react'; @@ -46,8 +46,8 @@ import { FacetedPlotLayout } from '../../layouts/FacetedPlotLayout'; // end imports // Defaults -const DEFAULT_CORRELATION_COEF_THRESHOLD = 0.5; // Ability for user to change this value not yet implemented. -const DEFAULT_SIGNIFICANCE_THRESHOLD = 0.05; // Ability for user to change this value not yet implemented. +const DEFAULT_CORRELATION_COEF_THRESHOLD = 0.5; +const DEFAULT_SIGNIFICANCE_THRESHOLD = 0.05; const DEFAULT_LINK_COLOR_DATA = '0'; const MIN_STROKE_WIDTH = 0.5; // Minimum stroke width for links in the network. Will represent the smallest link weight. const MAX_STROKE_WIDTH = 6; // Maximum stroke width for links in the network. Will represent the largest link weight. @@ -65,16 +65,18 @@ export const bipartiteNetworkVisualization = createVisualizationPlugin({ createDefaultConfig: createDefaultConfig, }); -function createDefaultConfig(): BipartiteNetworkConfig { +function createDefaultConfig(): BipartiteNetworkPlotConfig { return { correlationCoefThreshold: DEFAULT_CORRELATION_COEF_THRESHOLD, significanceThreshold: DEFAULT_SIGNIFICANCE_THRESHOLD, }; } -export type BipartiteNetworkConfig = t.TypeOf; +export type BipartiteNetworkPlotConfig = t.TypeOf< + typeof BipartiteNetworkPlotConfig +>; // eslint-disable-next-line @typescript-eslint/no-redeclare -export const BipartiteNetworkConfig = t.partial({ +export const BipartiteNetworkPlotConfig = t.partial({ correlationCoefThreshold: t.number, significanceThreshold: t.number, }); @@ -83,11 +85,15 @@ interface Options extends LayoutOptions, TitleOptions, LegendOptions, - RequestOptions {} + RequestOptions< + BipartiteNetworkPlotConfig, + {}, + BipartiteNetworkPlotRequestParams + > {} // Bipartite Network Visualization // The bipartite network takes no input variables, because the received data will complete the plot. -// Eventually the user will be able to control the significance and correlation coefficient threshold values. +// The only user controls are the significance and correlation coefficient threshold values. function BipartiteNetworkViz(props: VisualizationProps) { const { options, @@ -106,7 +112,7 @@ function BipartiteNetworkViz(props: VisualizationProps) { const { id: studyId } = studyMetadata; const entities = useStudyEntities(filters); const dataClient: DataClient = useDataClient(); - // todo allow this to also be CorrelationAssayAssayConfig + const computationConfiguration: | CorrelationAssayMetadataConfig | CorrelationAssayAssayConfig = computation.descriptor.configuration as @@ -115,7 +121,7 @@ function BipartiteNetworkViz(props: VisualizationProps) { const [vizConfig, updateVizConfig] = useVizConfig( visualization.descriptor.configuration, - BipartiteNetworkConfig, + BipartiteNetworkPlotConfig, createDefaultConfig, updateConfiguration ); @@ -123,7 +129,7 @@ function BipartiteNetworkViz(props: VisualizationProps) { // Get data from the compute job const data = usePromise( useCallback(async (): Promise< - CorrelationBipartiteNetworkResponse | undefined + CorrelationBipartiteNetworkPlotResponse | undefined > => { // Only need to check compute job status and filter status, since there are no // viz input variables. @@ -145,7 +151,7 @@ function BipartiteNetworkViz(props: VisualizationProps) { computation.descriptor.type, visualization.descriptor.type, params, - CorrelationBipartiteNetworkResponse + CorrelationBipartiteNetworkPlotResponse ); return response; @@ -267,8 +273,8 @@ function BipartiteNetworkViz(props: VisualizationProps) { [cleanedData] ); - const bipartiteNetworkProps: BipartiteNetworkProps = { - data: cleanedData ?? undefined, + const bipartiteNetworkProps: BipartiteNetworkPlotProps = { + network: cleanedData ?? undefined, showSpinner: data.pending, containerStyles: finalPlotContainerStyles, svgStyleOverrides: bipartiteNetworkSVGStyles, @@ -277,7 +283,7 @@ function BipartiteNetworkViz(props: VisualizationProps) { const plotNode = ( //@ts-ignore - + ); const controlsNode = <> ; From 75209e819e28eccde33819991e36e0c3fe28cf5c Mon Sep 17 00:00:00 2001 From: asizemore Date: Wed, 17 Jan 2024 13:51:37 -0500 Subject: [PATCH 2/2] change Barplot to BarPlot --- .../libs/components/src/map/ChartMarker.tsx | 4 +- .../libs/components/src/plots/Barplot.tsx | 18 ++--- .../components/src/plots/BirdsEyePlot.tsx | 2 +- .../src/plots/facetedPlots/FacetedBarplot.tsx | 22 +++--- .../src/stories/plots/Barplot.stories.tsx | 26 +++---- .../components/src/types/plots/barplot.ts | 6 +- .../src/types/plots/birdseyeplot.ts | 2 +- .../libs/components/src/types/plots/index.ts | 4 +- .../eda/src/lib/core/api/DataClient/index.ts | 14 ++-- .../eda/src/lib/core/api/DataClient/types.ts | 6 +- .../plugins/countsAndProportions.tsx | 2 +- .../components/computations/plugins/pass.tsx | 2 +- .../implementations/BarplotVisualization.tsx | 74 +++++++++---------- .../implementations/BoxplotVisualization.tsx | 2 +- .../lib/core/utils/axis-range-calculations.ts | 6 +- .../eda/src/lib/core/utils/visualization.ts | 6 +- .../BarPlotMarkerConfigurationMenu.tsx | 4 +- .../PieMarkerConfigurationMenu.tsx | 4 +- .../lib/map/analysis/hooks/plugins/barplot.ts | 4 +- .../analysis/hooks/standaloneVizPlugins.ts | 2 +- 20 files changed, 105 insertions(+), 105 deletions(-) diff --git a/packages/libs/components/src/map/ChartMarker.tsx b/packages/libs/components/src/map/ChartMarker.tsx index b6ba8717c8..19074fd6d6 100755 --- a/packages/libs/components/src/map/ChartMarker.tsx +++ b/packages/libs/components/src/map/ChartMarker.tsx @@ -1,7 +1,7 @@ import L from 'leaflet'; import BoundsDriftMarker, { BoundsDriftMarkerProps } from './BoundsDriftMarker'; -import Barplot from '../plots/Barplot'; +import BarPlot from '../plots/BarPlot'; //import Histogram from '../plots/Histogram'; // import NumberRange type def import { NumberRange } from '../types/general'; @@ -68,7 +68,7 @@ export default function ChartMarker(props: ChartMarkerProps) { const popupSize = plotSize + 2 * marginSize; const popupPlot = ( - , +export interface BarPlotProps + extends PlotProps, BarLayoutAddon<'overlay' | 'stack' | 'group'>, OrientationAddon, OpacityAddon, @@ -48,13 +48,13 @@ export interface BarplotProps dependentAxisRange?: NumberRange; } -const EmptyBarplotData: BarplotData = { series: [] }; +const EmptyBarPlotData: BarPlotData = { series: [] }; -/** A Plotly-based Barplot component. */ -const Barplot = makePlotlyPlotComponent( +/** A Plotly-based BarPlot component. */ +const BarPlot = makePlotlyPlotComponent( 'BarPlot', ({ - data = EmptyBarplotData, + data = EmptyBarPlotData, independentAxisLabel, dependentAxisLabel, showValues = false, @@ -68,7 +68,7 @@ const Barplot = makePlotlyPlotComponent( // truncation axisTruncationConfig, ...restProps - }: BarplotProps) => { + }: BarPlotProps) => { // set tick label Length for ellipsis const maxIndependentTickLabelLength = 20; @@ -261,4 +261,4 @@ const Barplot = makePlotlyPlotComponent( } ); -export default Barplot; +export default BarPlot; diff --git a/packages/libs/components/src/plots/BirdsEyePlot.tsx b/packages/libs/components/src/plots/BirdsEyePlot.tsx index f740bb0d86..6072c089dc 100644 --- a/packages/libs/components/src/plots/BirdsEyePlot.tsx +++ b/packages/libs/components/src/plots/BirdsEyePlot.tsx @@ -23,7 +23,7 @@ export interface BirdsEyePlotProps extends PlotProps { const EmptyBirdsEyePlotData: BirdsEyePlotData = { brackets: [], bars: [] }; -/** A Plotly-based Barplot component. */ +/** A Plotly-based BarPlot component. */ export default function BirdsEyePlot({ data = EmptyBirdsEyePlotData, dependentAxisLabel = '', diff --git a/packages/libs/components/src/plots/facetedPlots/FacetedBarplot.tsx b/packages/libs/components/src/plots/facetedPlots/FacetedBarplot.tsx index b2f5375683..852ce6ed1a 100644 --- a/packages/libs/components/src/plots/facetedPlots/FacetedBarplot.tsx +++ b/packages/libs/components/src/plots/facetedPlots/FacetedBarplot.tsx @@ -1,8 +1,8 @@ -import Barplot, { BarplotProps } from '../Barplot'; +import BarPlot, { BarPlotProps } from '../BarPlot'; import FacetedPlot, { FacetedPlotPropsWithRef } from '../FacetedPlot'; -import { BarplotData } from '../../types/plots'; +import { BarPlotData } from '../../types/plots'; -export const defaultContainerStyles: BarplotProps['containerStyles'] = { +export const defaultContainerStyles: BarPlotProps['containerStyles'] = { height: 300, width: 375, marginBottom: '0.25rem', @@ -10,25 +10,25 @@ export const defaultContainerStyles: BarplotProps['containerStyles'] = { boxShadow: '1px 1px 4px #00000066', }; -export const defaultSpacingOptions: BarplotProps['spacingOptions'] = { +export const defaultSpacingOptions: BarPlotProps['spacingOptions'] = { marginRight: 10, marginLeft: 10, marginBottom: 10, marginTop: 50, }; -type FacetedBarplotProps = Omit< - FacetedPlotPropsWithRef, +type FacetedBarPlotProps = Omit< + FacetedPlotPropsWithRef, 'component' >; -const FacetedBarplot = (facetedBarplotProps: FacetedBarplotProps) => { - const { componentProps } = facetedBarplotProps; +const FacetedBarPlot = (facetedBarPlotProps: FacetedBarPlotProps) => { + const { componentProps } = facetedBarPlotProps; return ( { ); }; -export default FacetedBarplot; +export default FacetedBarPlot; diff --git a/packages/libs/components/src/stories/plots/Barplot.stories.tsx b/packages/libs/components/src/stories/plots/Barplot.stories.tsx index 7503231997..208902267a 100644 --- a/packages/libs/components/src/stories/plots/Barplot.stories.tsx +++ b/packages/libs/components/src/stories/plots/Barplot.stories.tsx @@ -1,15 +1,15 @@ import React, { useState } from 'react'; import { Story, Meta } from '@storybook/react/types-6-0'; -import Barplot, { BarplotProps } from '../../plots/Barplot'; -import { FacetedData, BarplotData } from '../../types/plots'; -import FacetedBarplot from '../../plots/facetedPlots/FacetedBarplot'; +import BarPlot, { BarPlotProps } from '../../plots/BarPlot'; +import { FacetedData, BarPlotData } from '../../types/plots'; +import FacetedBarPlot from '../../plots/facetedPlots/FacetedBarPlot'; import AxisRangeControl from '../../components/plotControls/AxisRangeControl'; import { NumberRange, NumberOrDateRange } from '../../types/general'; import { Toggle } from '@veupathdb/coreui'; export default { - title: 'Plots/Barplot', - component: Barplot, + title: 'Plots/BarPlot', + component: BarPlot, } as Meta; const dataSet = { @@ -27,7 +27,7 @@ const dataSet = { ], }; -const Template: Story = (args) => ; +const Template: Story = (args) => ; export const Basic = Template.bind({}); Basic.args = { data: dataSet, @@ -63,7 +63,7 @@ NoDataOverlay.args = { * FACETING */ -const facetedData: FacetedData = { +const facetedData: FacetedData = { facets: [ { label: 'indoors', @@ -95,9 +95,9 @@ const facetedData: FacetedData = { }; interface FacetedStoryProps { - data: FacetedData; - componentProps: BarplotProps; - modalComponentProps: BarplotProps; + data: FacetedData; + componentProps: BarPlotProps; + modalComponentProps: BarPlotProps; } const FacetedTemplate: Story = ({ @@ -105,7 +105,7 @@ const FacetedTemplate: Story = ({ componentProps, modalComponentProps, }) => ( - > = ( +const TemplateWithSelectedRangeControls: Story> = ( args ) => { const [dependentAxisRange, setDependentAxisRange] = useState< @@ -155,7 +155,7 @@ const TemplateWithSelectedRangeControls: Story> = ( return (
- ; +export type BarPlotData = { + series: Array; }; diff --git a/packages/libs/components/src/types/plots/birdseyeplot.ts b/packages/libs/components/src/types/plots/birdseyeplot.ts index 67d1d611d6..6fb7f934ee 100644 --- a/packages/libs/components/src/types/plots/birdseyeplot.ts +++ b/packages/libs/components/src/types/plots/birdseyeplot.ts @@ -1,4 +1,4 @@ -import { BarplotData } from './barplot'; +import { BarPlotData } from './barplot'; export type BirdsEyePlotData = { brackets: { diff --git a/packages/libs/components/src/types/plots/index.ts b/packages/libs/components/src/types/plots/index.ts index fb1567b321..4bbfb4c464 100644 --- a/packages/libs/components/src/types/plots/index.ts +++ b/packages/libs/components/src/types/plots/index.ts @@ -8,7 +8,7 @@ import { LinePlotData } from './lineplot'; import { PiePlotData } from './piePlot'; import { BoxplotData } from './boxplot'; import { ScatterPlotData } from './scatterplot'; -import { BarplotData } from './barplot'; +import { BarPlotData } from './barplot'; import { HeatmapData } from './heatmap'; import { MosaicPlotData } from './mosaicPlot'; import { BirdsEyePlotData } from './birdseyeplot'; @@ -41,7 +41,7 @@ export type UnionOfPlotDataTypes = | LinePlotData | BoxplotData | ScatterPlotData - | BarplotData + | BarPlotData | HeatmapData | MosaicPlotData | BirdsEyePlotData; diff --git a/packages/libs/eda/src/lib/core/api/DataClient/index.ts b/packages/libs/eda/src/lib/core/api/DataClient/index.ts index a69b4b797a..06af0c40f3 100644 --- a/packages/libs/eda/src/lib/core/api/DataClient/index.ts +++ b/packages/libs/eda/src/lib/core/api/DataClient/index.ts @@ -10,8 +10,8 @@ import { AppsResponse, HistogramRequestParams, HistogramResponse, - BarplotRequestParams, - BarplotResponse, + BarPlotRequestParams, + BarPlotResponse, ScatterplotRequestParams, ScatterplotResponse, LineplotRequestParams, @@ -75,16 +75,16 @@ export default class DataClient extends FetchClientWithCredentials { ); } - // Barplot - getBarplot( + // BarPlot + getBarPlot( computationName: string, - params: BarplotRequestParams - ): Promise { + params: BarPlotRequestParams + ): Promise { return this.getVisualizationData( computationName, 'barplot', params, - BarplotResponse + BarPlotResponse ); } diff --git a/packages/libs/eda/src/lib/core/api/DataClient/types.ts b/packages/libs/eda/src/lib/core/api/DataClient/types.ts index 3bb68fb77c..ea0d03b36a 100755 --- a/packages/libs/eda/src/lib/core/api/DataClient/types.ts +++ b/packages/libs/eda/src/lib/core/api/DataClient/types.ts @@ -230,7 +230,7 @@ export const HistogramResponse = intersection([ }), ]); -export interface BarplotRequestParams { +export interface BarPlotRequestParams { studyId: string; filters: Filter[]; // derivedVariables: // TO DO @@ -246,8 +246,8 @@ export interface BarplotRequestParams { }; } -export type BarplotResponse = TypeOf; -export const BarplotResponse = intersection([ +export type BarPlotResponse = TypeOf; +export const BarPlotResponse = intersection([ type({ barplot: type({ config: plotConfig, diff --git a/packages/libs/eda/src/lib/core/components/computations/plugins/countsAndProportions.tsx b/packages/libs/eda/src/lib/core/components/computations/plugins/countsAndProportions.tsx index ef0e5b182c..51599ea43a 100644 --- a/packages/libs/eda/src/lib/core/components/computations/plugins/countsAndProportions.tsx +++ b/packages/libs/eda/src/lib/core/components/computations/plugins/countsAndProportions.tsx @@ -1,5 +1,5 @@ import * as t from 'io-ts'; -import { barplotVisualization } from '../../visualizations/implementations/BarplotVisualization'; +import { barplotVisualization } from '../../visualizations/implementations/BarPlotVisualization'; import { contTableVisualization, twoByTwoVisualization, diff --git a/packages/libs/eda/src/lib/core/components/computations/plugins/pass.tsx b/packages/libs/eda/src/lib/core/components/computations/plugins/pass.tsx index 933c986d86..cd51ff7bf9 100644 --- a/packages/libs/eda/src/lib/core/components/computations/plugins/pass.tsx +++ b/packages/libs/eda/src/lib/core/components/computations/plugins/pass.tsx @@ -1,4 +1,4 @@ -import { barplotVisualization } from '../../visualizations/implementations/BarplotVisualization'; +import { barplotVisualization } from '../../visualizations/implementations/BarPlotVisualization'; import { boxplotVisualization } from '../../visualizations/implementations/BoxplotVisualization'; import { histogramVisualization } from '../../visualizations/implementations/HistogramVisualization'; import { diff --git a/packages/libs/eda/src/lib/core/components/visualizations/implementations/BarplotVisualization.tsx b/packages/libs/eda/src/lib/core/components/visualizations/implementations/BarplotVisualization.tsx index 0941d30d3e..f7dc2cdadb 100755 --- a/packages/libs/eda/src/lib/core/components/visualizations/implementations/BarplotVisualization.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/implementations/BarplotVisualization.tsx @@ -1,9 +1,9 @@ -// load Barplot component -import Barplot, { BarplotProps } from '@veupathdb/components/lib/plots/Barplot'; -import FacetedBarplot from '@veupathdb/components/lib/plots/facetedPlots/FacetedBarplot'; +// load BarPlot component +import BarPlot, { BarPlotProps } from '@veupathdb/components/lib/plots/BarPlot'; +import FacetedBarPlot from '@veupathdb/components/lib/plots/facetedPlots/FacetedBarPlot'; import { - BarplotData, - BarplotDataSeries, + BarPlotData, + BarPlotDataSeries, FacetedData, } from '@veupathdb/components/lib/types/plots'; import LabelledGroup from '@veupathdb/components/lib/components/widgets/LabelledGroup'; @@ -14,10 +14,10 @@ import * as t from 'io-ts'; import { useCallback, useMemo, useState, useEffect } from 'react'; import PluginError from '../PluginError'; -// need to set for Barplot +// need to set for BarPlot import DataClient, { - BarplotResponse, - BarplotRequestParams, + BarPlotResponse, + BarPlotRequestParams, } from '../../../api/DataClient'; import { usePromise } from '../../../hooks/promise'; @@ -107,9 +107,9 @@ import { ResetButtonCoreUI } from '../../ResetButton'; import { useFindOutputEntity } from '../../../hooks/findOutputEntity'; // export -export type BarplotDataWithStatistics = ( - | BarplotData - | FacetedData +export type BarPlotDataWithStatistics = ( + | BarPlotData + | FacetedData ) & CoverageStatistics; @@ -138,13 +138,13 @@ export const barplotVisualization = createVisualizationPlugin({ interface Options extends LayoutOptions, OverlayOptions, - RequestOptions {} + RequestOptions {} function FullscreenComponent(props: VisualizationProps) { - return ; + return ; } -function createDefaultConfig(): BarplotConfig { +function createDefaultConfig(): BarPlotConfig { return { dependentAxisLogScale: false, valueSpec: 'count', @@ -157,9 +157,9 @@ type ValueSpec = t.TypeOf; const ValueSpec = t.keyof({ count: null, proportion: null }); // export -export type BarplotConfig = t.TypeOf; +export type BarPlotConfig = t.TypeOf; // eslint-disable-next-line @typescript-eslint/no-redeclare -export const BarplotConfig = t.intersection([ +export const BarPlotConfig = t.intersection([ t.type({ dependentAxisLogScale: t.boolean, valueSpec: ValueSpec, @@ -177,7 +177,7 @@ export const BarplotConfig = t.intersection([ }), ]); -function BarplotViz(props: VisualizationProps) { +function BarPlotViz(props: VisualizationProps) { const { options, computation, @@ -209,7 +209,7 @@ function BarplotViz(props: VisualizationProps) { // use useVizConfig hook const [vizConfig, updateVizConfig] = useVizConfig( visualization.descriptor.configuration, - BarplotConfig, + BarPlotConfig, createDefaultConfig, updateConfiguration ); @@ -259,7 +259,7 @@ function BarplotViz(props: VisualizationProps) { // prettier-ignore const onChangeHandlerFactory = useCallback( - < ValueType,>(key: keyof BarplotConfig, resetCheckedLegendItems?: boolean, resetAxisRanges?: boolean) => (newValue?: ValueType) => { + < ValueType,>(key: keyof BarPlotConfig, resetCheckedLegendItems?: boolean, resetAxisRanges?: boolean) => (newValue?: ValueType) => { const newPartialConfig = { [key]: newValue, ...(resetCheckedLegendItems ? { checkedLegendItems: undefined } : {}), @@ -391,7 +391,7 @@ function BarplotViz(props: VisualizationProps) { ); const data = usePromise( - useCallback(async (): Promise => { + useCallback(async (): Promise => { if ( variable == null || outputEntity == null || @@ -431,7 +431,7 @@ function BarplotViz(props: VisualizationProps) { outputEntity ); - const response = await dataClient.getBarplot( + const response = await dataClient.getBarPlot( computation.descriptor.type, params ); @@ -525,7 +525,7 @@ function BarplotViz(props: VisualizationProps) { )?.data?.series; return legendData != null - ? legendData.map((dataItem: BarplotDataSeries, index: number) => { + ? legendData.map((dataItem: BarPlotDataSeries, index: number) => { return { label: dataItem.name, // barplot does not have mode, so set to square @@ -540,7 +540,7 @@ function BarplotViz(props: VisualizationProps) { ? true : false : data.value?.facets - .map((el: { label: string; data?: BarplotData }) => { + .map((el: { label: string; data?: BarPlotData }) => { // faceted plot: here data.value is full data // need to check whether el.data.series[index] exists return el.data?.series[index]?.value.some( @@ -660,7 +660,7 @@ function BarplotViz(props: VisualizationProps) { // these props are passed to either a single plot // or by FacetedPlot to each individual facet plot (where some will be overridden) - const plotProps: BarplotProps = { + const plotProps: BarPlotProps = { containerStyles: !isFaceted(data.value) ? finalPlotContainerStyles : undefined, @@ -701,7 +701,7 @@ function BarplotViz(props: VisualizationProps) { const plotNode = ( <> {isFaceted(data.value) ? ( - ) { checkedLegendItems={checkedLegendItems} /> ) : ( - ) { } /** - * Reformat response from Barplot endpoints into complete BarplotData + * Reformat response from BarPlot endpoints into complete BarPlotData * @param response - * @returns BarplotData & completeCases & completeCasesAllVars & completeCasesAxesVars + * @returns BarPlotData & completeCases & completeCasesAllVars & completeCasesAxesVars */ export function barplotResponseToData( - response: BarplotResponse, + response: BarPlotResponse, variable: Variable, overlayVariable?: Variable, facetVariable?: Variable -): BarplotDataWithStatistics { +): BarPlotDataWithStatistics { // group by facet variable value (if only one facet variable in response - there may be up to two in future) // BM tried to factor this out into a function in utils/visualization.ts but got bogged down in TS issues const facetGroupedResponseData = groupBy(response.barplot.data, (data) => @@ -1010,11 +1010,11 @@ export function barplotResponseToData( completeCases: response.completeCasesTable, completeCasesAllVars: response.barplot.config.completeCasesAllVars, completeCasesAxesVars: response.barplot.config.completeCasesAxesVars, - } as BarplotDataWithStatistics; // sorry, but seemed necessary! + } as BarPlotDataWithStatistics; // sorry, but seemed necessary! } type DataRequestConfig = Pick< - BarplotConfig, + BarPlotConfig, | 'xAxisVariable' | 'overlayVariable' | 'facetVariable' @@ -1027,7 +1027,7 @@ function getRequestParams( filters: Filter[], config: DataRequestConfig, outputEntity: StudyEntity -): BarplotRequestParams { +): BarPlotRequestParams { return { studyId, filters, @@ -1046,7 +1046,7 @@ function getRequestParams( } /** - * reorder the series prop of the BarplotData object so that labels + * reorder the series prop of the BarPlotData object so that labels * go in the same order as the main variable's vocabulary, and the overlay * strata are ordered in that variable's vocabulary order too, with missing values and traces added as undefined * @@ -1054,11 +1054,11 @@ function getRequestParams( * */ function reorderData( - data: BarplotDataWithStatistics | BarplotData, + data: BarPlotDataWithStatistics | BarPlotData, labelVocabulary: string[] = [], overlayVocabulary: string[] = [], facetVocabulary: string[] = [] -): BarplotDataWithStatistics | BarplotData { +): BarPlotDataWithStatistics | BarPlotData { // If faceted, reorder the facets and within the facets if (isFaceted(data)) { if (facetVocabulary.length === 0) return data; // FIX-ME stop-gap for vocabulary-less numeric variables @@ -1082,7 +1082,7 @@ function reorderData( facetData, labelVocabulary, overlayVocabulary - ) as BarplotData) + ) as BarPlotData) : undefined, }; }), diff --git a/packages/libs/eda/src/lib/core/components/visualizations/implementations/BoxplotVisualization.tsx b/packages/libs/eda/src/lib/core/components/visualizations/implementations/BoxplotVisualization.tsx index 57390786c0..51288ef89c 100755 --- a/packages/libs/eda/src/lib/core/components/visualizations/implementations/BoxplotVisualization.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/implementations/BoxplotVisualization.tsx @@ -1299,7 +1299,7 @@ export function boxplotResponseToData( } /** - * reorder the series prop of the BarplotData object so that labels + * reorder the series prop of the BarPlotData object so that labels * go in the same order as the main variable's vocabulary, and the overlay * strata are ordered in that variable's vocabulary order too, with missing values and traces added as undefined * diff --git a/packages/libs/eda/src/lib/core/utils/axis-range-calculations.ts b/packages/libs/eda/src/lib/core/utils/axis-range-calculations.ts index b2789cd045..a4d811537c 100755 --- a/packages/libs/eda/src/lib/core/utils/axis-range-calculations.ts +++ b/packages/libs/eda/src/lib/core/utils/axis-range-calculations.ts @@ -5,7 +5,7 @@ import { HistogramData, HistogramDataSeries, } from '@veupathdb/components/lib/types/plots'; -import { BarplotDataWithStatistics } from '../components/visualizations/implementations/BarplotVisualization'; +import { BarPlotDataWithStatistics } from '../components/visualizations/implementations/BarPlotVisualization'; import { BoxplotDataWithCoverage } from '../components/visualizations/implementations/BoxplotVisualization'; import { min, max, map } from 'lodash'; import { Variable } from '../types/study'; @@ -74,7 +74,7 @@ export function histogramDefaultDependentAxisMinMax( } export function barplotDefaultDependentAxisMax( - data: PromiseHookState + data: PromiseHookState ) { if (isFaceted(data?.value)) { return data?.value?.facets != null @@ -92,7 +92,7 @@ export function barplotDefaultDependentAxisMax( } export function barplotDefaultDependentAxisMinPos( - data: PromiseHookState + data: PromiseHookState ) { if (isFaceted(data?.value)) { return data?.value?.facets != null diff --git a/packages/libs/eda/src/lib/core/utils/visualization.ts b/packages/libs/eda/src/lib/core/utils/visualization.ts index e15bac75ab..e0faeeb376 100644 --- a/packages/libs/eda/src/lib/core/utils/visualization.ts +++ b/packages/libs/eda/src/lib/core/utils/visualization.ts @@ -1,6 +1,6 @@ import { HistogramData, - BarplotData, + BarPlotData, BoxplotData, FacetedData, } from '@veupathdb/components/lib/types/plots'; @@ -30,14 +30,14 @@ import { import { isEqual } from 'lodash'; import { UNSELECTED_DISPLAY_TEXT, UNSELECTED_TOKEN } from '../../map/constants'; -// was: BarplotData | HistogramData | { series: BoxplotData }; +// was: BarPlotData | HistogramData | { series: BoxplotData }; type SeriesWithStatistics = T & CoverageStatistics; type MaybeFacetedSeries = T | FacetedData; type MaybeFacetedSeriesWithStatistics = MaybeFacetedSeries & CoverageStatistics; export function grayOutLastSeries< - T extends { series: BoxplotData } | BarplotData | HistogramData + T extends { series: BoxplotData } | BarPlotData | HistogramData >( data: T | MaybeFacetedSeriesWithStatistics, showMissingness: boolean = false, diff --git a/packages/libs/eda/src/lib/map/analysis/MarkerConfiguration/BarPlotMarkerConfigurationMenu.tsx b/packages/libs/eda/src/lib/map/analysis/MarkerConfiguration/BarPlotMarkerConfigurationMenu.tsx index e50d686716..866ae96249 100644 --- a/packages/libs/eda/src/lib/map/analysis/MarkerConfiguration/BarPlotMarkerConfigurationMenu.tsx +++ b/packages/libs/eda/src/lib/map/analysis/MarkerConfiguration/BarPlotMarkerConfigurationMenu.tsx @@ -14,7 +14,7 @@ import { } from '../../../core'; import { CategoricalMarkerConfigurationTable } from './CategoricalMarkerConfigurationTable'; import { CategoricalMarkerPreview } from './CategoricalMarkerPreview'; -import Barplot from '@veupathdb/components/lib/plots/Barplot'; +import BarPlot from '@veupathdb/components/lib/plots/BarPlot'; import { SubsettingClient } from '../../../core/api'; import { Toggle } from '@veupathdb/coreui'; import { useUncontrolledSelections } from '../hooks/uncontrolledSelections'; @@ -312,7 +312,7 @@ export function BarPlotMarkerConfigurationMenu({ Raw distribution of overall filtered data - Raw distribution of overall filtered data - & { + props: RequestOptionProps & { overlayConfig: OverlayConfig | undefined; } ) { diff --git a/packages/libs/eda/src/lib/map/analysis/hooks/standaloneVizPlugins.ts b/packages/libs/eda/src/lib/map/analysis/hooks/standaloneVizPlugins.ts index ab9997a313..017ed4266e 100644 --- a/packages/libs/eda/src/lib/map/analysis/hooks/standaloneVizPlugins.ts +++ b/packages/libs/eda/src/lib/map/analysis/hooks/standaloneVizPlugins.ts @@ -15,7 +15,7 @@ import { histogramVisualization } from '../../../core/components/visualizations/ import { contTableVisualization } from '../../../core/components/visualizations/implementations/MosaicVisualization'; import { scatterplotVisualization } from '../../../core/components/visualizations/implementations/ScatterplotVisualization'; import { lineplotVisualization } from '../../../core/components/visualizations/implementations/LineplotVisualization'; -import { barplotVisualization } from '../../../core/components/visualizations/implementations/BarplotVisualization'; +import { barplotVisualization } from '../../../core/components/visualizations/implementations/BarPlotVisualization'; import { boxplotVisualization } from '../../../core/components/visualizations/implementations/BoxplotVisualization'; import { BinDefinitions,