Merge branch 'main' into feature-360-diff-abund-cont-vars

.github/workflows/pr-check.yml

@@ -17,3 +17,4 @@ jobs:
       - uses: nrwl/nx-set-shas@v3
       - run: yarn
       - run: yarn nx affected --target=build-npm-modules --parallel=3
+      - run: yarn nx affected --target=compile:check

.gitignore

@@ -107,6 +107,9 @@ dist
 # TernJS port file
 .tern-port
 
+# VSCode config files
+.vscode
+
 .editorconfig
 
 .pnp.*

Dockerfile

@@ -33,12 +33,12 @@ COPY package.json package.json
 COPY yarn.lock yarn.lock
 COPY packages packages
 
+ARG NODE_OPTIONS=--max-old-space-size=4096
+
 # Build the client bundles
+# RUN echo "Building with NODE_OPTIONS=$NODE_OPTIONS"
 RUN yarn \
-    && yarn nx bundle:npm @veupathdb/clinepi-site \
-    && yarn nx bundle:npm @veupathdb/genomics-site \
-    && yarn nx bundle:npm @veupathdb/mbio-site \
-    && yarn nx bundle:npm @veupathdb/ortho-site
+  && yarn nx run-many --target=bundle:npm --parallel=1
 
 
 # # # # # # # # # # # # # # # # #

docker-compose.yml

@@ -1,7 +1,5 @@
 version: "3.5"
 
-name: "web-client"
-
 networks:
   traefik:
     external: true

packages/libs/components/package.json

@@ -19,7 +19,7 @@
     "@visx/text": "^1.3.0",
     "@visx/tooltip": "^1.3.0",
     "@visx/visx": "^1.1.0",
-    "@visx/xychart": "^3.1.0",
+    "@visx/xychart": "https://github.com/jernestmyers/visx.git#visx-xychart",
     "bootstrap": "^4.5.2",
     "color-math": "^1.1.3",
     "d3": "^7.1.1",

packages/libs/components/src/components/plotControls/AxisRangeControl.tsx

@@ -22,6 +22,8 @@ export interface AxisRangeControlProps
   disabled?: boolean;
   /** is this for a log scale axis? If so, we'll validate the min value to be > 0 */
   logScale?: boolean;
+  /** specify step for increment/decrement buttons in MUI number inputs; MUI's default is 1 */
+  step?: number;
 }
 
 export default function AxisRangeControl({
@@ -33,6 +35,7 @@ export default function AxisRangeControl({
   // add disabled prop to disable input fields: default is false
   disabled = false,
   logScale = false,
+  step = undefined,
 }: AxisRangeControlProps) {
   const validator = useCallback(
     (
@@ -87,6 +90,7 @@ export default function AxisRangeControl({
         validator={validator}
         // add disabled prop to disable input fields
         disabled={disabled}
+        step={step}
       />
     )
   ) : null;

packages/libs/components/src/components/plotControls/PlotBubbleLegend.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import { range } from 'd3';
+import _ from 'lodash';
+
+// set props for custom legend function
+export interface PlotLegendBubbleProps {
+  legendMax: number;
+  valueToDiameterMapper: ((value: number) => number) | undefined;
+}
+
+// legend ellipsis function for legend title and legend items (from custom legend work)
+// const legendEllipsis = (label: string, ellipsisLength: number) => {
+//   return (label || '').length > ellipsisLength
+//     ? (label || '').substring(0, ellipsisLength) + '...'
+//     : label;
+// };
+
+export default function PlotBubbleLegend({
+  legendMax,
+  valueToDiameterMapper,
+}: PlotLegendBubbleProps) {
+  if (valueToDiameterMapper) {
+    // Declare constants
+    const tickFontSize = '0.8em';
+    // const legendTextSize = '1.0em';
+    const circleStrokeWidth = 3;
+    const padding = 5;
+    const numCircles = 3;
+
+    // The largest circle's value will be the first number that's larger than
+    // legendMax and has only one significant digit. Each smaller circle will
+    // be half the size of the last (rounded and >= 1)
+    const roundedOneSigFig = Number(legendMax.toPrecision(1));
+    const largestCircleValue =
+      legendMax <= 10
+        ? legendMax
+        : roundedOneSigFig < legendMax
+        ? roundedOneSigFig + 10 ** Math.floor(Math.log10(legendMax)) // effectively rounding up
+        : roundedOneSigFig; // no need to adjust - already rounded up
+    const circleValues = _.uniq(
+      range(numCircles)
+        .map((i) => Math.round(largestCircleValue / 2 ** i))
+        .filter((value) => value >= 1)
+    );
+
+    const largestCircleDiameter = valueToDiameterMapper(largestCircleValue);
+    const largestCircleRadius = largestCircleDiameter / 2;
+
+    const tickLength = largestCircleRadius + 5;
+
+    return (
+      <svg
+        width={largestCircleDiameter + (tickLength - largestCircleRadius) + 50}
+        height={largestCircleDiameter + circleStrokeWidth * 2 + padding * 2}
+      >
+        {circleValues.map((value, i) => {
+          const circleDiameter = valueToDiameterMapper(value);
+          const circleRadius = circleDiameter / 2;
+          const tickY =
+            padding +
+            largestCircleDiameter +
+            circleStrokeWidth -
+            circleDiameter;
+
+          return (
+            <>
+              <circle
+                cx={padding + largestCircleRadius + circleStrokeWidth}
+                cy={
+                  padding +
+                  largestCircleDiameter +
+                  circleStrokeWidth -
+                  circleRadius
+                }
+                r={circleRadius}
+                stroke="black"
+                strokeWidth={circleStrokeWidth}
+                fill="white"
+              />
+              <g
+                className="axisTick"
+                overflow="visible"
+                key={'gradientTick' + i}
+              >
+                <line
+                  x1={padding + largestCircleRadius + circleStrokeWidth + 1}
+                  x2={
+                    padding +
+                    largestCircleRadius +
+                    circleStrokeWidth +
+                    tickLength +
+                    1
+                  }
+                  y1={tickY}
+                  y2={tickY}
+                  stroke="black"
+                  strokeDasharray="2 2"
+                  strokeWidth={2}
+                />
+                <text
+                  x={padding + largestCircleRadius + tickLength + 5}
+                  y={tickY}
+                  dominantBaseline="middle"
+                  fontSize={tickFontSize}
+                >
+                  {value}
+                </text>
+              </g>
+            </>
+          );
+        })}
+      </svg>
+    );
+  } else {
+    return null;
+  }
+
+  // for display, convert large value with k (e.g., 12345 -> 12k): return original value if less than a criterion
+  // const sumLabel = props.markerLabel ?? String(fullPieValue);
+}

packages/libs/components/src/components/plotControls/PlotGradientLegend.tsx

@@ -81,7 +81,11 @@ export default function PlotGradientLegend({
 
   return (
     <div>
-      <svg id="gradientLegend" height={gradientBoxHeight + 20} width={150}>
+      <svg
+        id="gradientLegend"
+        height={gradientBoxHeight + 20}
+        width={gradientBoxWidth + 60}
+      >
         <defs>
           <linearGradient id="linearGradient" x1="0" x2="0" y1="1" y2="0">
             {stopPoints}

packages/libs/components/src/components/plotControls/PlotLegend.tsx

@@ -4,6 +4,7 @@ import PlotListLegend, { PlotListLegendProps } from './PlotListLegend';
 import PlotGradientLegend, {
   PlotLegendGradientProps,
 } from './PlotGradientLegend';
+import PlotBubbleLegend, { PlotLegendBubbleProps } from './PlotBubbleLegend';
 
 interface PlotLegendBaseProps extends ContainerStylesAddon {
   legendTitle?: string;
@@ -13,6 +14,7 @@ export type PlotLegendProps = PlotLegendBaseProps &
   (
     | ({ type: 'list' } & PlotListLegendProps)
     | ({ type: 'colorscale' } & PlotLegendGradientProps)
+    | ({ type: 'bubble' } & PlotLegendBubbleProps)
   );
 
 export default function PlotLegend({
@@ -29,7 +31,8 @@ export default function PlotLegend({
       {((type === 'list' &&
         ((otherProps as PlotListLegendProps).legendItems.length > 1 ||
           (otherProps as PlotListLegendProps).showOverlayLegend)) ||
-        type === 'colorscale') && (
+        type === 'colorscale' ||
+        type === 'bubble') && (
         <div
           style={{
             display: 'inline-block', // for general usage (e.g., story)
@@ -63,6 +66,9 @@ export default function PlotLegend({
           {type === 'colorscale' && (
             <PlotGradientLegend {...(otherProps as PlotLegendGradientProps)} />
           )}
+          {type === 'bubble' && (
+            <PlotBubbleLegend {...(otherProps as PlotLegendBubbleProps)} />
+          )}
         </div>
       )}
     </>

packages/libs/components/src/components/widgets/NumberAndDateRangeInputs.tsx

@@ -6,6 +6,7 @@ import { NumberInput, DateInput } from './NumberAndDateInputs';
 import Button from './Button';
 import Notification from './Notification';
 import { NumberRange, DateRange, NumberOrDateRange } from '../../types/general';
+import { propTypes } from 'react-bootstrap/esm/Image';
 
 export type BaseProps<M extends NumberOrDateRange> = {
   /** Externally controlled range. */
@@ -44,7 +45,7 @@ export type BaseProps<M extends NumberOrDateRange> = {
   disabled?: boolean;
 };
 
-export type NumberRangeInputProps = BaseProps<NumberRange>;
+export type NumberRangeInputProps = BaseProps<NumberRange> & { step?: number };
 
 export function NumberRangeInput(props: NumberRangeInputProps) {
   return <BaseInput {...props} valueType="number" />;
@@ -85,6 +86,7 @@ function BaseInput({
   clearButtonLabel = 'Clear',
   // add disabled prop to disable input fields
   disabled = false,
+  ...props
 }: BaseInputProps) {
   if (validator && required)
     console.log(
@@ -161,6 +163,7 @@ function BaseInput({
   ]);
 
   const { min, max } = localRange ?? {};
+  const step = 'step' in props ? props.step : undefined;
 
   return (
     <div style={{ ...containerStyles }}>
@@ -188,6 +191,7 @@ function BaseInput({
             }}
             // add disabled prop to disable input fields
             disabled={disabled}
+            step={step}
           />
         ) : (
           <DateInput
@@ -236,6 +240,7 @@ function BaseInput({
             }}
             // add disabled prop to disable input fields
             disabled={disabled}
+            step={step}
           />
         ) : (
           <DateInput

packages/libs/components/src/components/widgets/Slider.tsx

@@ -8,6 +8,17 @@ import { DARK_GRAY, LIGHT_GRAY, MEDIUM_GRAY } from '../../constants/colors';
 import { debounce } from 'lodash';
 import { NumberOrDate } from '../../types/general';
 
+// a color spec shared among plot components that implements the track gradient
+export const plotsSliderOpacityGradientColorSpec: SliderWidgetProps['colorSpec'] =
+  {
+    type: 'gradient',
+    tooltip: '#aaa',
+    knobColor: '#aaa',
+    // normal slider color: e.g., from 0 to 1
+    trackGradientStart: '#fff',
+    trackGradientEnd: '#000',
+  };
+
 export type SliderWidgetProps = {
   /** The minimum value of the slider. */
   minimum?: number;

packages/libs/components/src/map/BoundsDriftMarker.tsx

@@ -38,6 +38,7 @@ export default function BoundsDriftMarker({
   showPopup,
   popupContent,
   popupClass,
+  zIndexOffset,
 }: BoundsDriftMarkerProps) {
   const map = useMap();
   const boundingBox = new LatLngBounds([
@@ -300,6 +301,7 @@ export default function BoundsDriftMarker({
         mouseout: (e: LeafletMouseEvent) => handleMouseOut(e),
         dblclick: handleDoubleClick,
       }}
+      zIndexOffset={zIndexOffset}
       {...optionalIconProp}
     >
       {showPopup && popup}