{
const loadPromises = HISTOGRAM_FONTS.map((font) => this.document.fonts.load(font));
await Promise.all(loadPromises);
}
- /** Compute distances between nodes based on edges */
- private computeDistances(): DistanceEntry[] {
- const nodes = this.nodes();
- const edges = this.edges();
- if (nodes.length === 0 || edges.length === 0) {
- return [];
- }
-
- const nodeTargetKey = this.nodeTargetKey();
- const selectedCellType = this.selectedCellType();
- const distances: DistanceEntry[] = [];
- for (const edge of edges) {
- const sourceNode = nodes[edge[EdgeIndex.SourceNode]];
- const type = sourceNode[nodeTargetKey];
- if (type !== selectedCellType) {
- distances.push({ type, distance: edgeDistance(edge) });
- }
- }
-
- return distances;
- }
-
- /** Compute data for the histogram visualization */
- private computeData(): DistanceEntry[] {
- const selection = new Set(this.cellTypesSelection());
- if (selection.size === 0) {
- return [];
- }
-
- return this.distances().filter(({ type }) => selection.has(type));
- }
-
- /** Compute colors for the histogram visualization */
- private computeColors(): string[] {
- const totalCellType = { name: this.totalCellTypeLabel, color: this.totalCellTypeColor() };
- return [totalCellType, ...this.filteredCellTypes()]
- .sort((a, b) => (a.name < b.name ? -1 : a.name === b.name ? 0 : 1))
- .map(({ color }) => rgbToHex(color));
+ /** Reset the color of the total cell type */
+ resetAllCellsColor(): void {
+ this.totalCellTypeColor.set([0, 0, 0]);
}
}
diff --git a/libs/cde-visualization/src/lib/components/histogram/histogram.vl.json b/libs/cde-visualization/src/lib/components/histogram/histogram.vl.json
index 1cfba9d02..f491e15ad 100644
--- a/libs/cde-visualization/src/lib/components/histogram/histogram.vl.json
+++ b/libs/cde-visualization/src/lib/components/histogram/histogram.vl.json
@@ -23,15 +23,6 @@
"ticks": false,
"domain": false,
"labelPadding": 8
- },
- "legend": {
- "titleFontSize": 14,
- "titleLineHeight": 21,
- "titleColor": "#201E3D",
- "titleFontWeight": 500,
- "labelFontSize": 14,
- "labelFontWeight": 500,
- "labelColor": "#4B4B5E"
}
},
"data": {
diff --git a/libs/cde-visualization/src/lib/components/violin/violin.component.html b/libs/cde-visualization/src/lib/components/violin/violin.component.html
new file mode 100644
index 000000000..d9b13f4cb
--- /dev/null
+++ b/libs/cde-visualization/src/lib/components/violin/violin.component.html
@@ -0,0 +1,46 @@
+
+ Violin Graph
+ info
+
+ Violin plot
+
+
+
+
+
+
+
+
+
+
+
diff --git a/libs/cde-visualization/src/lib/components/violin/violin.component.scss b/libs/cde-visualization/src/lib/components/violin/violin.component.scss
new file mode 100644
index 000000000..dab5c4020
--- /dev/null
+++ b/libs/cde-visualization/src/lib/components/violin/violin.component.scss
@@ -0,0 +1,80 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../../../../../../apps/cde-ui/src/styles/constants/palettes' as palettes;
+
+$blue: mat.m2-define-palette(map.get(palettes.$palettes, 'blue'), 600, 500, 700);
+$blue-theme: mat.m2-define-light-theme(
+ (
+ color: (
+ primary: $blue,
+ accent: $blue,
+ ),
+ )
+);
+
+:host {
+ @include mat.button-color($blue-theme);
+ display: grid;
+ grid:
+ 'violin . download'
+ 'plot plot plot' 1fr
+ / auto 1fr auto;
+ grid-template-rows: 2rem calc(100% - 2rem);
+ align-items: start;
+ row-gap: 0.75rem;
+ overflow: hidden;
+ padding: 0.75rem 0.5rem;
+ border-width: 0px 0px 2px 2px;
+ border-style: solid;
+ border-color: map.get(map.get(palettes.$palettes, 'blue'), 600);
+ $button-text-color: map.get(map.get(palettes.$palettes, 'blue'), 900);
+ --mdc-filled-button-container-height: 2rem;
+
+ span.violin-label {
+ grid-area: violin;
+ font-size: 1rem;
+ height: 2rem;
+ display: flex;
+ align-items: center;
+ gap: 0.25rem;
+ padding-left: 0.5rem;
+ }
+
+ .download {
+ grid-area: download;
+ padding-right: 0.5rem;
+ }
+
+ .violin {
+ grid-area: plot;
+ height: 100%;
+ overflow-y: scroll;
+ }
+
+ button {
+ --mdc-filled-button-label-text-color: #201e3d;
+ padding: 0.375rem 0.5rem;
+ margin-left: 0.5rem;
+
+ mat-icon {
+ margin-left: unset;
+ margin-right: 0.125rem;
+ font-size: 1.25rem;
+ height: 1.25rem;
+ width: 1.25rem;
+ }
+ }
+}
+
+::ng-deep {
+ #vg-tooltip-element.vg-tooltip {
+ font-family: 'Metropolis';
+ font-weight: 500;
+ font-size: 0.75rem;
+ line-height: 1.125rem;
+ color: #201e3d;
+ padding: 0.5rem;
+ max-width: 22.5rem;
+ box-shadow: 0px 5px 16px 0px #201e3d3d;
+ }
+}
diff --git a/libs/cde-visualization/src/lib/components/violin/violin.component.ts b/libs/cde-visualization/src/lib/components/violin/violin.component.ts
new file mode 100644
index 000000000..e076480e6
--- /dev/null
+++ b/libs/cde-visualization/src/lib/components/violin/violin.component.ts
@@ -0,0 +1,213 @@
+import { OverlayModule } from '@angular/cdk/overlay';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import {
+ ChangeDetectionStrategy,
+ Component,
+ effect,
+ ElementRef,
+ inject,
+ input,
+ Renderer2,
+ signal,
+ viewChild,
+} from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatIconModule } from '@angular/material/icon';
+import { ScrollingModule } from '@hra-ui/design-system/scrolling';
+import { produce } from 'immer';
+import { View } from 'vega';
+import embed, { VisualizationSpec } from 'vega-embed';
+
+import { DistanceEntry } from '../../cde-visualization/cde-visualization.component';
+import { FileSaverService } from '../../services/file-saver/file-saver.service';
+import { TOOLTIP_POSITION_RIGHT_SIDE } from '../../shared/tooltip-position';
+import { ColorPickerLabelComponent } from '../color-picker-label/color-picker-label.component';
+import * as VIOLIN_SPEC from './violin.vl.json';
+
+/** Interface for modifying the violin specification */
+interface ModifiableViolinSpec {
+ /** Configuration for the padding */
+ config: {
+ padding: {
+ top: number;
+ right: number;
+ bottom: number;
+ left: number;
+ };
+ };
+
+ /** Data values for the violin */
+ data: {
+ values?: unknown[];
+ };
+ /** Encoding configuration for the violin */
+ spec: {
+ /** Width of the violin */
+ width: string | number;
+ /** Height of the violin */
+ height: string | number;
+ layer: {
+ encoding: {
+ color: {
+ legend?: unknown;
+ scale: {
+ range: unknown[];
+ };
+ value?: string;
+ };
+ };
+ }[];
+ };
+}
+
+/** Fonts used in the violin */
+const VIOLIN_FONTS = ['12px Metropolis', '14px Metropolis'];
+
+/** Width of the exported image */
+const EXPORT_IMAGE_WIDTH = 1000;
+
+/** Height of the exported image */
+const EXPORT_IMAGE_HEIGHT = 40;
+
+/** Padding for the exported image */
+const EXPORT_IMAGE_PADDING = 16;
+
+/** Configuration for the legend in the exported image */
+const EXPORT_IMAGE_LEGEND_CONFIG = {
+ title: null,
+ symbolType: 'circle',
+ symbolStrokeWidth: 10,
+ labelFontSize: 14,
+ titleFontSize: 14,
+ titleLineHeight: 21,
+ titleColor: '#201E3D',
+ titleFontWeight: 500,
+ labelFontWeight: 500,
+ labelColor: '#4B4B5E',
+ symbolStrokeColor: 'type',
+ symbolSize: 400,
+};
+
+/** Length of the dynamic color range */
+const DYNAMIC_COLOR_RANGE_LENGTH = 2000;
+
+/** Dynamic color range for the violin */
+const DYNAMIC_COLOR_RANGE = Array(DYNAMIC_COLOR_RANGE_LENGTH)
+ .fill(0)
+ .map((_value, index) => ({ expr: `colors[${index}] || '#000'` }));
+
+/**
+ * Violin Component
+ */
+@Component({
+ selector: 'cde-violin',
+ standalone: true,
+ imports: [
+ CommonModule,
+ MatIconModule,
+ MatButtonModule,
+ MatExpansionModule,
+ ColorPickerLabelComponent,
+ OverlayModule,
+ ScrollingModule,
+ ],
+ templateUrl: './violin.component.html',
+ styleUrl: './violin.component.scss',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ViolinComponent {
+ /** Tooltip position configuration */
+ readonly tooltipPosition = TOOLTIP_POSITION_RIGHT_SIDE;
+
+ /** State indicating whether the info panel is open */
+ infoOpen = false;
+
+ /** Data for the violin visualization */
+ readonly data = input.required();
+
+ /** Colors for the violin visualization */
+ readonly colors = input.required();
+
+ /** Reference to the document object */
+ private readonly document = inject(DOCUMENT);
+
+ /** Reference to the renderer for DOM manipulation */
+ private readonly renderer = inject(Renderer2);
+
+ /** Service for saving files */
+ private readonly fileSaver = inject(FileSaverService);
+
+ /** Element reference for the violin container */
+ private readonly violinEl = viewChild.required('violin');
+
+ /** Vega view instance for the violin */
+ private readonly view = signal(undefined);
+
+ /** Effect for updating view data */
+ protected readonly viewDataRef = effect(() => this.view()?.data('data', this.data()).run());
+
+ /** Effect for updating view colors */
+ protected readonly viewColorsRef = effect(() => {
+ this.view()?.signal('colors', this.colors()).run();
+ this.view()?.resize();
+ });
+
+ /** Effect for creating the Vega view */
+ protected readonly viewCreateRef = effect(
+ async (onCleanup) => {
+ const el = this.violinEl().nativeElement;
+ await this.ensureFontsLoaded();
+
+ const spec = produce(VIOLIN_SPEC, (draft) => {
+ for (const layer of draft.spec.layer) {
+ if (layer.encoding.color.legend === null) {
+ layer.encoding.color.scale = { range: DYNAMIC_COLOR_RANGE };
+ }
+ }
+ });
+
+ const { finalize, view } = await embed(el, spec as VisualizationSpec, {
+ actions: false,
+ });
+
+ onCleanup(finalize);
+ this.view.set(view);
+ },
+ { allowSignalWrites: true },
+ );
+
+ /** Download the violin as an image in the specified format */
+ async download(format: string): Promise {
+ const spec = produce(VIOLIN_SPEC as ModifiableViolinSpec, (draft) => {
+ draft.spec.width = EXPORT_IMAGE_WIDTH;
+ for (const layer of draft.spec.layer) {
+ if (layer.encoding.color.legend === null) {
+ layer.encoding.color.legend = EXPORT_IMAGE_LEGEND_CONFIG;
+ layer.encoding.color.scale = { range: this.colors() };
+ }
+ }
+ draft.spec.height = EXPORT_IMAGE_HEIGHT;
+ draft.config.padding.bottom = EXPORT_IMAGE_PADDING;
+ draft.config.padding.top = EXPORT_IMAGE_PADDING;
+ draft.config.padding.right = EXPORT_IMAGE_PADDING;
+ draft.config.padding.left = EXPORT_IMAGE_PADDING;
+ draft.data.values = this.data();
+ });
+
+ const el = this.renderer.createElement('div');
+ const { view, finalize } = await embed(el, spec as VisualizationSpec, {
+ actions: false,
+ });
+
+ const url = await view.toImageURL(format);
+ this.fileSaver.save(url, `cde-violin.${format}`);
+ finalize();
+ }
+
+ /** Ensure required fonts are loaded for the violin */
+ private async ensureFontsLoaded(): Promise {
+ const loadPromises = VIOLIN_FONTS.map((font) => this.document.fonts.load(font));
+ await Promise.all(loadPromises);
+ }
+}
diff --git a/libs/cde-visualization/src/lib/components/violin/violin.vl.json b/libs/cde-visualization/src/lib/components/violin/violin.vl.json
new file mode 100644
index 000000000..bb78da376
--- /dev/null
+++ b/libs/cde-visualization/src/lib/components/violin/violin.vl.json
@@ -0,0 +1,150 @@
+{
+ "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+ "spacing": -2,
+ "config": {
+ "font": "Metropolis",
+ "padding": {
+ "top": 0,
+ "right": 0,
+ "bottom": 0,
+ "left": 0
+ },
+ "view": {
+ "stroke": "transparent"
+ },
+ "axis": {
+ "labelFontSize": 12,
+ "titleFontSize": 14,
+ "titleFontWeight": 500,
+ "labelFontWeight": 500,
+ "titleLineHeight": 21,
+ "labelLineHeight": 18,
+ "titleColor": "#201E3D",
+ "labelColor": "#4B4B5E",
+ "labelAngle": -45,
+ "ticks": false,
+ "labelPadding": 8
+ },
+ "scale": { "continuousPadding": 20 }
+ },
+ "data": {
+ "name": "data"
+ },
+ "params": [
+ {
+ "name": "colors",
+ "value": []
+ }
+ ],
+ "facet": {
+ "row": {
+ "field": "type",
+ "title": "Cell Types",
+ "header": {
+ "labelAngle": 0,
+ "labelPadding": 4,
+ "labelAlign": "left",
+ "labelLimit": 100,
+ "labelBaseline": "middle",
+ "titlePadding": 8,
+ "labelFontSize": 12,
+ "titleFontSize": 14,
+ "titleFontWeight": 500,
+ "labelFontWeight": 500
+ }
+ }
+ },
+ "resolve": {
+ "scale": {
+ "y": "independent"
+ }
+ },
+ "spec": {
+ "height": 40,
+ "width": 300,
+ "layer": [
+ {
+ "mark": {
+ "type": "area",
+ "stroke": "black",
+ "strokeWidth": 0.5
+ },
+ "transform": [
+ {
+ "density": "distance",
+ "bandwidth": 0,
+ "groupby": ["type"]
+ }
+ ],
+ "encoding": {
+ "x": {
+ "field": "value",
+ "type": "quantitative",
+ "title": "Distance (µm)",
+ "axis": {
+ "minExtent": 25,
+ "labelFlush": false,
+ "grid": true,
+ "labelAngle": 0,
+ "labelOverlap": true,
+ "labelSeparation": 4
+ },
+ "scale": {
+ "domainMin": 0
+ }
+ },
+ "y": {
+ "field": "density",
+ "type": "quantitative",
+ "stack": "center",
+ "impute": null,
+ "title": null,
+ "axis": {
+ "labels": false,
+ "grid": false
+ },
+ "scale": {
+ "nice": false,
+ "padding": 4
+ }
+ },
+ "color": {
+ "field": "type",
+ "legend": null,
+ "scale": {
+ "range": [
+ {
+ "expr": "'Replaced/repeated in javascript' || color[0] || '#000'"
+ }
+ ]
+ }
+ },
+ "tooltip": {
+ "field": "type",
+ "type": "nominal"
+ }
+ }
+ },
+ {
+ "mark": {
+ "type": "boxplot",
+ "extent": "min-max",
+ "size": 4
+ },
+ "encoding": {
+ "x": {
+ "field": "distance",
+ "type": "quantitative",
+ "title": "Distance (µm)",
+ "scale": {
+ "domainMin": 0
+ }
+ },
+ "color": {
+ "value": "black"
+ }
+ }
+ }
+ ]
+ }
+}