update metadata, histogram, visualization, violin plot modules component

libs/cde-visualization/src/index.ts

@@ -2,6 +2,7 @@ import { provideHttpClient } from '@angular/common/http';
 import { importProvidersFrom } from '@angular/core';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideDesignSystem } from '@hra-ui/design-system';
+import { provideButtonToggle } from '@hra-ui/design-system/button-toggle';
 import { provideScrolling } from '@hra-ui/design-system/scrolling';
 import { InputProps, createCustomElement } from '@hra-ui/webcomponents';
 import { ColorPickerModule } from 'ngx-color-picker';
@@ -37,5 +38,6 @@ export const CdeVisualizationElement = createCustomElement('cde-visualization',
     provideScrolling(),
     importProvidersFrom(ColorPickerModule),
     provideDesignSystem(),
+    provideButtonToggle(),
   ],
 });

libs/cde-visualization/src/lib/cde-visualization/cde-visualization.component.html

@@ -2,8 +2,6 @@
   <cde-visualization-header
     (resetView)="visualization.resetView()"
     (resetAll)="cellTypesTable.resetSort(); visualization.resetView(); histogram.resetAllCellsColor(); resetCellTypes()"
-    (downloadNodes)="downloadNodes()"
-    (downloadEdges)="downloadEdges()"
     [homeLink]="homeLink()"
   ></cde-visualization-header>
 </div>
@@ -37,6 +35,7 @@
       (nodeClick)="nodeClick.emit($event)"
       (nodeHover)="nodeHover.emit($event)"
       (edgesChange)="edges.set($event)"
+      (resetAllCells)="resetCellTypes()"
       #visualization
     ></cde-node-dist-visualization>
 

libs/cde-visualization/src/lib/cde-visualization/cde-visualization.component.scss

@@ -44,10 +44,10 @@
 :host {
   width: 100%;
   display: grid;
-  grid-template-columns: 22.75rem minmax(59rem, calc(100vw - 21rem));
-  grid-template-rows: 5.25rem minmax(calc(900px - 5.25rem), calc(100vh - 5.25rem));
+  grid-template-columns: 22.75rem minmax(57.1875rem, calc(100vw - 22.75rem));
+  grid-template-rows: 4rem minmax(42.375rem, calc(100vh - 4rem));
   grid-template-areas:
-    'header header'
+    'header visualization'
     'metadata visualization';
   color: #201e3d;
 
@@ -58,6 +58,7 @@
       border-color: #d5dbe3;
       border-width: 0 0px 2px 0px;
       border-style: solid;
+      overflow: hidden;
     }
   }
 
@@ -83,12 +84,52 @@
       border-width: 0 0 2px 0;
       border-style: solid;
       height: 100%;
-      width: calc(100% - 488px);
+      min-width: 32.75rem;
     }
 
     cde-violin {
       height: 100%;
-      width: 488px;
+      min-width: 24.25rem;
+      max-width: 31.5rem;
+    }
+  }
+}
+
+::ng-deep {
+  .metadata-overlay,
+  .histogram-overlay,
+  .vis-overlay,
+  .violin-overlay {
+    .mat-mdc-menu-content {
+      background-color: var(--sys-on-primary);
+      color: var(--sys-secondary);
+      .mat-mdc-menu-item {
+        --mat-menu-item-with-icon-leading-spacing: 1rem;
+        --mat-menu-item-with-icon-trailing-spacing: 1rem;
+
+        .mat-mdc-menu-item-text {
+          font: var(--sys-label-medium);
+        }
+      }
+    }
+  }
+
+  div.mat-mdc-menu-panel {
+    max-width: 260px;
+    min-width: 208px;
+    &.info-sub-menu .mat-mdc-menu-content {
+      padding: 0.75rem 1rem;
+      background-color: var(--sys-on-primary);
+      font: var(--sys-label-medium);
+    }
+
+    &.download-sub-menu .mat-mdc-menu-content {
+      background-color: var(--sys-on-primary);
+      font: var(--sys-label-medium);
+
+      .mat-mdc-menu-item-text {
+        font: var(--sys-label-medium);
+      }
     }
   }
 }

libs/cde-visualization/src/lib/cde-visualization/cde-visualization.component.spec.ts

@@ -1,17 +1,11 @@
-import { TestBed } from '@angular/core/testing';
-import { RenderComponentOptions, render, screen } from '@testing-library/angular';
-import userEvent from '@testing-library/user-event';
+import { RenderComponentOptions, render } from '@testing-library/angular';
 import { mockDeep } from 'jest-mock-extended';
 import embed, { Result } from 'vega-embed';
 
-import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { MatMenuHarness } from '@angular/material/menu/testing';
-import { rgbToHex } from '@hra-ui/design-system/color-picker';
 import { provideScrolling } from '@hra-ui/design-system/scrolling';
 import { ColorMapEntry, DEFAULT_COLOR_MAP_KEY, DEFAULT_COLOR_MAP_VALUE_KEY } from '../models/color-map';
 import { EdgeEntry } from '../models/edge';
 import { DEFAULT_NODE_TARGET_KEY, DEFAULT_NODE_TARGET_VALUE, NodeEntry } from '../models/node';
-import { FileSaverService } from '../services/file-saver/file-saver.service';
 import { CdeVisualizationComponent } from './cde-visualization.component';
 
 jest.mock('hra-node-dist-vis/docs/hra-node-dist-vis.wc.js', () => ({}));
@@ -109,66 +103,6 @@ describe('CdeVisualizationComponent', () => {
     embedResult.view.signal.mockReturnThis();
   });
 
-  it('should update nodes when downloadNodes is called', async () => {
-    const {
-      fixture: { componentInstance: instance },
-    } = await setup({
-      componentInputs: {
-        ...sampleData,
-        nodes: sampleNodes,
-      },
-    });
-
-    const fileSaver = TestBed.inject(FileSaverService);
-    const fileSaveSpy = jest.spyOn(fileSaver, 'saveCsv').mockReturnValue(undefined);
-
-    const downloadNodesButton = screen.getByText('Nodes');
-    await userEvent.click(downloadNodesButton);
-    expect(fileSaveSpy).toHaveBeenCalledWith(instance.loadedNodes(), 'nodes.csv');
-  });
-
-  it('should update edges when downloadEdges is called', async () => {
-    const {
-      fixture: { componentInstance: instance },
-    } = await setup({
-      componentInputs: {
-        ...sampleData,
-        edges: sampleEdges,
-      },
-    });
-
-    const fileSaver = TestBed.inject(FileSaverService);
-    const fileSaveSpy = jest.spyOn(fileSaver, 'saveCsv').mockReturnValue(undefined);
-
-    const downloadEdgesButton = screen.getByText('Edges');
-    await userEvent.click(downloadEdgesButton);
-    expect(fileSaveSpy).toHaveBeenCalledWith(instance.loadedEdges(), 'edges.csv');
-  });
-
-  it('should update color map when downloadColorMap is called', async () => {
-    const { fixture } = await setup({
-      componentInputs: {
-        ...sampleData,
-        nodes: sampleNodes,
-        colorMap: sampleColorMap,
-      },
-    });
-
-    const instance = fixture.componentInstance;
-    const processedColorMap = instance
-      .cellTypesAsColorMap()
-      .map((entry) => ({ ...entry, [instance.colorMapValueKey()]: rgbToHex(entry[instance.colorMapValueKey()]) }));
-
-    const fileSaver = TestBed.inject(FileSaverService);
-    const fileSaveSpy = jest.spyOn(fileSaver, 'saveCsv').mockReturnValue(undefined);
-
-    const loader = TestbedHarnessEnvironment.loader(fixture);
-    const menu = await loader.getHarness(MatMenuHarness);
-
-    await menu.clickItem({ text: /Download/ }, { text: /Cell Color Map CSV/ });
-    expect(fileSaveSpy).toHaveBeenCalledWith(processedColorMap, 'color-map.csv');
-  });
-
   it('should reset cell types and increase reset counter', async () => {
     const {
       fixture: { componentInstance: instance },

libs/cde-visualization/src/lib/components/cell-types/cell-types.component.scss

@@ -228,15 +228,10 @@ $blue-theme: mat.m2-define-light-theme(
 }
 
 ::ng-deep {
-  .mat-mdc-menu-content button {
-    color: var(--sys-primary);
-  }
-
   div.mat-mdc-menu-panel {
     max-width: 308px;
     &.info-sub-menu .mat-mdc-menu-content {
       padding: 1rem 1rem;
-      color: var(--sys-primary);
     }
   }
 }

libs/cde-visualization/src/lib/components/cell-types/cell-types.component.spec.ts

@@ -1,5 +1,6 @@
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { MatCheckboxHarness } from '@angular/material/checkbox/testing';
+import { MatMenuHarness } from '@angular/material/menu/testing';
 import { provideScrolling } from '@hra-ui/design-system/scrolling';
 import { RenderComponentOptions, render, screen } from '@testing-library/angular';
 import { CellTypeEntry } from '../../models/cell-type';
@@ -20,6 +21,53 @@ describe('CellTypesComponent', () => {
     });
   }
 
+  it('should update nodes when downloadNodes is called', async () => {
+    const emitFn = jest.fn();
+    const { fixture } = await setup({
+      inputs: { cellTypes, cellTypesSelection },
+      on: {
+        downloadNodes: emitFn,
+      },
+    });
+    const loader = TestbedHarnessEnvironment.loader(fixture);
+    const menu = await loader.getHarness(MatMenuHarness);
+
+    await menu.clickItem({ text: /Download/ }, { text: /Cells CSV/ });
+    expect(emitFn).toHaveBeenCalled();
+  });
+
+  it('should update edges when downloadEdges is called', async () => {
+    const emitFn = jest.fn();
+    const { fixture } = await setup({
+      inputs: { cellTypes, cellTypesSelection },
+      on: {
+        downloadEdges: emitFn,
+      },
+    });
+
+    const loader = TestbedHarnessEnvironment.loader(fixture);
+    const menu = await loader.getHarness(MatMenuHarness);
+
+    await menu.clickItem({ text: /Download/ }, { text: /Cell Links CSV/ });
+    expect(emitFn).toHaveBeenCalled();
+  });
+
+  it('should update color map when downloadColorMap is called', async () => {
+    const emitFn = jest.fn();
+    const { fixture } = await setup({
+      inputs: { cellTypes, cellTypesSelection },
+      on: {
+        downloadColorMap: emitFn,
+      },
+    });
+
+    const loader = TestbedHarnessEnvironment.loader(fixture);
+    const menu = await loader.getHarness(MatMenuHarness);
+
+    await menu.clickItem({ text: /Download/ }, { text: /Cell Color Map CSV/ });
+    expect(emitFn).toHaveBeenCalled();
+  });
+
   it('should render the component', async () => {
     await setup({
       componentInputs: { cellTypes, cellTypesSelection },