Fix rename plotnames

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 = (
-    <Barplot
+    <BarPlot
       data={{
         series: [
           {

packages/libs/components/src/plots/Barplot.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { PlotParams } from 'react-plotly.js';
 import {
   BarLayoutAddon,
-  BarplotData,
+  BarPlotData,
   OpacityAddon,
   OpacityDefault,
   OrientationAddon,
@@ -26,8 +26,8 @@ import { truncationLayoutShapes } from '../utils/truncation-layout-shapes';
 import { tickSettings } from '../utils/tick-settings';
 
 // in this example, the main variable is 'country'
-export interface BarplotProps
-  extends PlotProps<BarplotData>,
+export interface BarPlotProps
+  extends PlotProps<BarPlotData>,
     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;

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<HTMLDivElement>
 ) {
   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(
         <svg
           width={svgStyles.width}
           height={
-            Math.max(data.column1NodeIDs.length, data.column2NodeIDs.length) *
+            Math.max(
+              network.column1NodeIDs.length,
+              network.column2NodeIDs.length
+            ) *
               svgStyles.nodeSpacing +
             svgStyles.topPadding
           }
@@ -216,4 +219,4 @@ function BipartiteNetwork(
   );
 }
 
-export default forwardRef(BipartiteNetwork);
+export default forwardRef(BipartiteNetworkPlot);

packages/libs/components/src/plots/BirdsEyePlot.tsx

@@ -23,7 +23,7 @@ export interface BirdsEyePlotProps extends PlotProps<BirdsEyePlotData> {
 
 const EmptyBirdsEyePlotData: BirdsEyePlotData = { brackets: [], bars: [] };
 
-/** A Plotly-based Barplot component. */
+/** A Plotly-based BarPlot component. */
 export default function BirdsEyePlot({
   data = EmptyBirdsEyePlotData,
   dependentAxisLabel = '',

packages/libs/components/src/plots/Network.tsx

@@ -1,14 +1,14 @@
 import { DefaultNode } from '@visx/network';
 import { Text } from '@visx/text';
-import { LinkData, NodeData } from '../types/plots/network';
+import { NetworkLink, NetworkNode } from '../types/plots/network';
 import { truncateWithEllipsis } from '../utils/axis-tick-label-ellipsis';
 import './Network.css';
 
 export type LabelPosition = 'right' | 'left';
 
 interface NodeWithLabelProps {
   /** Network node */
-  node: NodeData;
+  node: NetworkNode;
   /** Function to run when a user clicks either the node or label */
   onClick?: () => 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
 }
 

packages/libs/components/src/plots/facetedPlots/FacetedBarplot.tsx

@@ -1,34 +1,34 @@
-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',
   border: '1px solid #dedede',
   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<BarplotData, BarplotProps>,
+type FacetedBarPlotProps = Omit<
+  FacetedPlotPropsWithRef<BarPlotData, BarPlotProps>,
   'component'
 >;
 
-const FacetedBarplot = (facetedBarplotProps: FacetedBarplotProps) => {
-  const { componentProps } = facetedBarplotProps;
+const FacetedBarPlot = (facetedBarPlotProps: FacetedBarPlotProps) => {
+  const { componentProps } = facetedBarPlotProps;
 
   return (
     <FacetedPlot
-      component={Barplot}
-      {...facetedBarplotProps}
+      component={BarPlot}
+      {...facetedBarPlotProps}
       componentProps={{
         ...componentProps,
         containerStyles:
@@ -39,4 +39,4 @@ const FacetedBarplot = (facetedBarplotProps: FacetedBarplotProps) => {
   );
 };
 
-export default FacetedBarplot;
+export default FacetedBarPlot;

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<BarplotProps> = (args) => <Barplot {...args} />;
+const Template: Story<BarPlotProps> = (args) => <BarPlot {...args} />;
 export const Basic = Template.bind({});
 Basic.args = {
   data: dataSet,
@@ -63,7 +63,7 @@ NoDataOverlay.args = {
  * FACETING
  */
 
-const facetedData: FacetedData<BarplotData> = {
+const facetedData: FacetedData<BarPlotData> = {
   facets: [
     {
       label: 'indoors',
@@ -95,17 +95,17 @@ const facetedData: FacetedData<BarplotData> = {
 };
 
 interface FacetedStoryProps {
-  data: FacetedData<BarplotData>;
-  componentProps: BarplotProps;
-  modalComponentProps: BarplotProps;
+  data: FacetedData<BarPlotData>;
+  componentProps: BarPlotProps;
+  modalComponentProps: BarPlotProps;
 }
 
 const FacetedTemplate: Story<FacetedStoryProps> = ({
   data,
   componentProps,
   modalComponentProps,
 }) => (
-  <FacetedBarplot
+  <FacetedBarPlot
     data={data}
     componentProps={componentProps}
     modalComponentProps={modalComponentProps}
@@ -134,7 +134,7 @@ Faceted.args = {
   },
 };
 
-const TemplateWithSelectedRangeControls: Story<Omit<BarplotProps, 'data'>> = (
+const TemplateWithSelectedRangeControls: Story<Omit<BarPlotProps, 'data'>> = (
   args
 ) => {
   const [dependentAxisRange, setDependentAxisRange] = useState<
@@ -155,7 +155,7 @@ const TemplateWithSelectedRangeControls: Story<Omit<BarplotProps, 'data'>> = (
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column' }}>
-      <Barplot
+      <BarPlot
         data={dataSet}
         {...args}
         dependentAxisRange={dependentAxisRange}