feat(agora): migrate Agora to use shared boxplot component (AG-1460)

apps/agora/app/project.json

@@ -57,7 +57,7 @@
             {
               "type": "initial",
               "maximumWarning": "1mb",
-              "maximumError": "3mb"
+              "maximumError": "4mb"
             },
             {
               "type": "anyComponentStyle",

libs/agora/about/src/lib/about.component.html

@@ -13,11 +13,3 @@ <h1 class="h2">About</h1>
     </div>
   </div>
 </div>
-
-<agora-score-barchart
-  [shouldResize]="false"
-  [score]="20"
-  [barColor]="'#8B8AD1'"
-  [data]="scoreDistribution"
->
-</agora-score-barchart>

libs/agora/about/src/lib/about.component.stories.ts

@@ -0,0 +1,24 @@
+import { CommonModule } from '@angular/common';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { WikiComponent } from '@sagebionetworks/agora/shared';
+import { applicationConfig, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { AboutComponent } from './about.component';
+
+const meta: Meta<AboutComponent> = {
+  component: AboutComponent,
+  title: 'About',
+  decorators: [
+    applicationConfig({
+      providers: [provideHttpClient(withInterceptorsFromDi())],
+    }),
+    moduleMetadata({
+      imports: [CommonModule, WikiComponent],
+    }),
+  ],
+};
+export default meta;
+type Story = StoryObj<AboutComponent>;
+
+export const Primary: Story = {
+  args: {},
+};

libs/agora/about/src/lib/about.component.ts

@@ -1,11 +1,10 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
-import { ScoreBarChartComponent } from '@sagebionetworks/agora/charts';
 import { WikiComponent } from '@sagebionetworks/agora/shared';
 
 @Component({
   selector: 'agora-about',
-  imports: [CommonModule, WikiComponent, ScoreBarChartComponent],
+  imports: [CommonModule, WikiComponent],
   templateUrl: './about.component.html',
   styleUrls: ['./about.component.scss'],
 })

libs/agora/about/tsconfig.lib.json

@@ -7,6 +7,12 @@
     "inlineSources": true,
     "types": []
   },
-  "exclude": ["src/test-setup.ts", "**/*.spec.ts", "**/*.test.ts", "jest.config.ts"],
+  "exclude": [
+    "src/test-setup.ts",
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "jest.config.ts",
+    "**/*.stories.ts"
+  ],
   "include": ["**/*.ts"]
 }

libs/agora/charts/src/lib/box-plot-chart/box-plot-chart-data-mock.ts

@@ -0,0 +1,24 @@
+import { boxPlotChartItem } from '@sagebionetworks/agora/models';
+
+export const boxPlotChartItemsMock: boxPlotChartItem[] = [
+  {
+    key: 'CBE',
+    value: [-0.5, -0.08, 0.5],
+    circle: {
+      value: -0.0752,
+      tooltip:
+        'MSN is not significantly differentially expressed in CBE with a log fold change value of -0.0752 and an adjusted p-value of 0.531.',
+    },
+    quartiles: [-0.1, -0.08, 0.1],
+  },
+  {
+    key: 'ACC',
+    value: [-0.256, -0.0036, 0.2503],
+    circle: {
+      value: -0.0144,
+      tooltip:
+        'MSN is not significantly differentially expressed in ACC with a log fold change value of -0.0145 and an adjusted p-value of 0.893.',
+    },
+    quartiles: [-0.0661, -0.0036, 0.0604],
+  },
+];

libs/agora/charts/src/lib/box-plot-chart/box-plot-chart.component.html

@@ -1,31 +1,12 @@
-<!-- <div class="chart box-plot-chart" (window:resize)="onResize()">
-  <div class="chart-inner">
-    @if (heading) {
-      <h4 class="chart-heading">{{ heading }}</h4>
-    }
-    <div class="chart-body">
-      <div #chartContainer class="chart-container"></div>
-    </div>
-    @if (xAxisLabel) {
-      <div class="chart-x-axis-label">{{ xAxisLabel }}</div>
-    }
-    @if (!this._data.length) {
-      <div class="chart-no-data">
-        <div class="chart-no-data-text">No data is currently available.</div>
-      </div>
-    }
-  </div>
-</div> -->
-
-<!-- <div
+<div
   sageBoxplot
   [points]="points"
   [summaries]="summaries"
-  [title]="title"
-  [xAxisTitle]="xAxisTitle"
-  [yAxisTitle]="yAxisTitle"
+  [title]="heading"
+  [xAxisTitle]="xAxisLabel"
+  [yAxisTitle]="yAxisLabel"
   [yAxisMin]="yAxisMin"
   [yAxisMax]="yAxisMax"
   [xAxisCategoryToTooltipText]="xAxisCategoryToTooltipText"
   [pointTooltipFormatter]="pointTooltipFormatter"
-></div> -->
+></div>

libs/agora/charts/src/lib/box-plot-chart/box-plot-chart.component.spec.ts

@@ -0,0 +1,40 @@
+import { HelperService } from '@sagebionetworks/agora/services';
+import { BoxplotDirective } from '@sagebionetworks/shared/charts-angular';
+import { render, screen } from '@testing-library/angular';
+import { boxPlotChartItemsMock } from './box-plot-chart-data-mock';
+import { BoxPlotComponent } from './box-plot-chart.component';
+
+class MockHelperService {
+  getGCTColumnTooltipText(column: string): string {
+    return column + '-mock-text';
+  }
+}
+
+describe('Component: Chart - Box Plot', () => {
+  it('should render chart with data', async () => {
+    await render(BoxPlotComponent, {
+      componentProperties: {
+        data: boxPlotChartItemsMock,
+      },
+      imports: [BoxplotDirective],
+      providers: [{ provide: HelperService, useClass: MockHelperService }],
+    });
+
+    // keys are sorted alphabetically
+    const tooltipTextRegExp = new RegExp(
+      `${boxPlotChartItemsMock[1].circle.tooltip}.*${boxPlotChartItemsMock[0].circle.tooltip}`,
+    );
+    expect(screen.getByLabelText(tooltipTextRegExp)).toBeVisible();
+  });
+
+  it('should render no data placeholder when no data is passed', async () => {
+    await render(BoxPlotComponent, {
+      componentProperties: {
+        data: undefined,
+      },
+      imports: [BoxplotDirective],
+      providers: [{ provide: HelperService, useClass: MockHelperService }],
+    });
+    expect(screen.getByLabelText('No data is currently available.')).toBeVisible();
+  });
+});

libs/agora/charts/src/lib/box-plot-chart/box-plot-chart.component.stories.ts

@@ -0,0 +1,41 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { BoxplotDirective } from '@sagebionetworks/shared/charts-angular';
+import { applicationConfig, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { boxPlotChartItemsMock } from './box-plot-chart-data-mock';
+import { BoxPlotComponent } from './box-plot-chart.component';
+
+const meta: Meta<BoxPlotComponent> = {
+  component: BoxPlotComponent,
+  title: 'Charts/BoxPlot',
+  decorators: [
+    applicationConfig({
+      providers: [provideHttpClient(withInterceptorsFromDi())],
+    }),
+    moduleMetadata({
+      imports: [BoxplotDirective],
+    }),
+  ],
+};
+export default meta;
+type Story = StoryObj<BoxPlotComponent>;
+
+export const Primary: Story = {
+  args: {
+    heading: 'AD Diagnosis (males and females)',
+    data: boxPlotChartItemsMock,
+    xAxisLabel: 'Brain Region',
+    yAxisLabel: 'LOG 2 FOLD CHANGE',
+    yAxisMin: -1,
+    yAxisMax: 1,
+  },
+};
+
+export const NoData: Story = {
+  args: {
+    heading: 'AD Diagnosis (males and females)',
+    xAxisLabel: 'Brain Region',
+    yAxisLabel: 'LOG 2 FOLD CHANGE',
+    yAxisMin: -1,
+    yAxisMax: 1,
+  },
+};