Node dist vis integration

apps/cde-ui/project.json

@@ -4,7 +4,7 @@
   "projectType": "application",
   "prefix": "cde",
   "sourceRoot": "apps/cde-ui/src",
-  "tags": ["app", "cde"],
+  "tags": ["type:app", "project:cde"],
   "targets": {
     "build": {
       "executor": "@nx/angular:application",

apps/cde-ui/tsconfig.json

@@ -14,13 +14,13 @@
   "include": [],
   "references": [
     {
-      "path": "./tsconfig.app.json"
+      "path": "./tsconfig.editor.json"
     },
     {
-      "path": "./tsconfig.spec.json"
+      "path": "./tsconfig.app.json"
     },
     {
-      "path": "./tsconfig.editor.json"
+      "path": "./tsconfig.spec.json"
     }
   ],
   "extends": "../../tsconfig.base.json",

libs/cde-visualization/package.json

@@ -17,7 +17,8 @@
     "@angular/platform-browser": "18.2.1",
     "@angular/cdk": "18.2.1",
     "@angular/material": "18.2.1",
-    "@hra-ui/common": "0.0.1"
+    "@hra-ui/common": "0.0.1",
+    "@hra-ui/node-dist-vis": "0.0.1"
   },
   "dependencies": {},
   "sideEffects": [

libs/cde-visualization/project.json

@@ -7,20 +7,10 @@
   "tags": ["type:lib", "project:cde", "webcomponent"],
   "targets": {
     "build": {
-      "executor": "@angular-devkit/build-angular:browser",
-      "outputs": ["{options.outputPath}"],
+      "executor": "@nx/angular:package",
+      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
       "options": {
-        "outputPath": "dist/libs/cde-visualization",
-        "index": "libs/cde-visualization/src/index.html",
-        "main": "libs/cde-visualization/src/index.ts",
-        "polyfills": ["zone.js"],
-        "tsConfig": "libs/cde-visualization/tsconfig.app.json",
-        "inlineStyleLanguage": "scss",
-        "styles": ["libs/cde-visualization/src/styles.scss"],
-        "stylePreprocessorOptions": {
-          "includePaths": ["node_modules/", "libs/design-system/styles"]
-        },
-        "scripts": []
+        "project": "libs/cde-visualization/ng-package.json"
       },
       "configurations": {
         "production": {

libs/cde-visualization/src/index.ts

@@ -18,14 +18,11 @@ export * from './lib/shared/tooltip-position';
 export * from './lib/services/data/color-map-loader.service';
 
 /** Type for CdeVisualizationElement instance */
-export type CdeVisualizationElement = InstanceType<CdeVisualizationElementConstructor>;
+export type CdeVisualizationElement = InstanceType<Awaited<typeof CdeVisualizationElement>>;
 
 /** Input properties for CdeVisualizationComponent */
 export type CdeVisualizationElementProps = InputProps<CdeVisualizationComponent>;
 
-/** Constructor type for CdeVisualizationElement */
-export type CdeVisualizationElementConstructor = Awaited<typeof CdeVisualizationElement>;
-
 /** Custom element definition for CdeVisualizationComponent */
 export const CdeVisualizationElement = createCustomElement('cde-visualization', CdeVisualizationComponent, {
   providers: [

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

@@ -9,11 +9,11 @@
 </div>
 
 <div class="metadata">
-  <cde-metadata [metadata]="mergedMetadata()"></cde-metadata>
+  <cde-metadata [metadata]="metadataView()"></cde-metadata>
   <cde-cell-types
     [(cellTypes)]="cellTypes"
     [(cellTypesSelection)]="cellTypesSelection"
-    [selectedCellType]="selectedNodeTargetValue()"
+    [selectedCellType]="nodeTargetSelector()"
     (downloadColorMap)="downloadColorMap()"
     (downloadNodes)="downloadNodes()"
     (downloadEdges)="downloadEdges()"
@@ -25,20 +25,16 @@
 <div class="visualizations">
   <div class="top">
     <cde-node-dist-visualization
-      [nodes]="loadedNodes()"
-      [nodeTargetKey]="nodeTypeKey()"
-      [nodeTargetValue]="selectedNodeTargetValue()"
-      [edges]="loadedEdges()"
+      [nodes]="nodesView()"
+      [edges]="edgesView()"
       [maxEdgeDistance]="maxEdgeDistance()"
       [colorMap]="cellTypesAsColorMap()"
-      [colorMapKey]="colorMapTypeKey()"
-      [colorMapValueKey]="colorMapValueKey()"
       [cellTypesSelection]="cellTypesSelection()"
       (nodeClick)="nodeClick.emit($event)"
       (nodeHover)="nodeHover.emit($event)"
-      (edgesChange)="edges.set($event)"
       #visualization
     ></cde-node-dist-visualization>
+    <!-- (edgesChange)="edges.set($event)" -->
 
     <cde-violin [colors]="filteredColors()" [data]="filteredDistances()" #violin></cde-violin>
   </div>
@@ -47,7 +43,7 @@
     [colors]="filteredColors()"
     [data]="filteredDistances()"
     [filteredCellTypes]="filteredCellTypes()"
-    [selectedCellType]="selectedNodeTargetValue()"
+    [selectedCellType]="nodeTargetSelector()"
     (updateColor)="updateColor($event.entry, $event.color)"
     #histogram
   ></cde-histogram>