Cell distance explorer application (#339)

* update social icon focus css * update base href in icon service * update img sources * Add rel="noopener noreferrer" * Move rel="noopener noreferrer" to correct tag * create file upload component * Add home link in header * Add testing-library * update form and its css * create theme and modify cards * add states to form field * update background size * create vis app header * update img url * create metadata component * create cell types component * Create cde-visualization * move components to cde vis lib * fix missing libs * fix selection bug * Add vega lite visualization * add input for visualization wc * fix dependencies * Add expansion panel and legend * add color picker * Add colorpicker * Improvements * update color picker styles * Add histogram to visualization page * Add download buttons * Add PNG / SVG downloads * Tweaks * Add anchor icon * Use export from vega/vega-lite * add tooltip for info icon * create cde-visualization wc * Histogram improvements * Improve visualization styling * Update sample names * add tests for csv loader * Use actual data for histogram * Add all cells line * Increase step * Allow synthetic default imports * Remove anchor cells in histogram data and use log scale * Add step interpolation to histogram * resolve cell types and metadata * Remove unneeded sample csvs * add tests for create vis page * add tests for form control directive * fix: 🚑 Readd accidentally removed @hra-ui/webcomponents path is tsconfig during merge * chore(cde-visualization): 🚨 Fix dependency check lint error * chore: Run `npx nx format:write` * build(cde): 🔧 Increase style files max size * create card & landing layout (#341) * create card & landing layout * add button states * resolved comments * Revert changes to package-lock.json * add routes to cards * update img urls * add alternate text to card images * update vccf section * fix vccf section bg * update bg image path for vccf * add route to cde logo on header * update landing page tests * add tests for card and landing page * test: ✅ update header and footer tests * chore(cde): 📦 Regenerate package-lock.json * improve documentation coverage --------- Co-authored-by: Daniel Bolin <axbolin@iu.edu> * refactor(cde): 📦 Install material symbols as a package * feat(cdk): ✨ Add @hra-ui/cdk/icons entrypoint (WIP) * update route * fix routes and icons * regenerate package-lock.json * chore(cde-visualization): 📦 Regenerate package-lock.json * fix peer dependencies * feat(cdk): ✨ Implement icon providers using mat-registry resolver * refactor(cde): ♻️ Update logic to use @hra-ui/cdk/icons instead of custom icon registry * build(cde-visualization): 📦 Add hra-node-dist-vis dependency * build(cde-visualization): 📦 Add @deck.gl/carto * add node dist vis wc * refactor(cde): 💄 Update the header along with the entire theming structure * docs(cdk): 📝 Add code documentation for icon providers * refactor(cde): 🔥 Remove old icon registry code and update tests * test(cde): ✅ Fix header tests * create data vis service * add inputs * update vis app page css * refactor(cde-visualization): ♻️ Improve histogram (WIP) * refactor(cde): Post merge fixes * refactor(cde): ♻️ Post merge fixes * add edges input * docs(cde): 📝 Increase code doc coverage * refactor(cde): Fix import * create color picker & label component * add anchor input * add tooltip to color picker * update node dist vis tooltip * refactor(cde-visualization): 💄 Fix some styling issues after merge * feat(cde): 💄 Update favicon * modify table cell overlay * refactor(cde-visualization): ♻️ Large refactor Improve types and move them into their own files. Also split logic into smaller single responsibility pieces * modify landing page css * update create page styles * update grid layout: create-page * refactor(cde-visualization): ♻️ Some more refactoring * Add legend to exported histogram images * update landing page css * Add legend and use correct colors for histogram * Tooltip changes * refactor(cde-visualization): ♻️ Improve visualization data bindings * Add color update logic * refactor(cde-visualization): 🚚 Add .service prefix to angular service files * build(cde-visualization): 📦 Update hra-node-dist-vis dependency * feat(cde-visualization): ✨ Implement nodes, edges, color-map, and vis download * chore(cde-visualization): 🩹 Add missed file for last commit * Add breakpoints to landing page * More landing page styling changes * refactor(cde-visualization): ⚡ Improve color picker label Add output to indicate when the clor picker is open. Updated some styles. Also updated the color model to only emit when the color is truly changed * refactor(cde-visualization): 🎨 Improve cell types updates in the histogram * refactor(cde-visualization): ♻️ Replace ng* directives with new @if, @for, etc. syntax * Add breakpoints for create visualization page * Mobile styling for create page * Finish breakpoints for create page * Adjust visualization button * Make header and footer not overflow page (temporary) * Make header and footer not overflow page (temporary) * refactor(webcomponents): Export and improve `InputProps` type * fix(cde-visualization): 🐛 Use absolute urls in the data loader * refactor(cde): ♻️ Implement data resolvers for the different app routes * Finish constructing breakpoints for landing page * Footer breakpoints * Header breakpoints * Disable help button temporarily * Add tooltips for creation page; convert px to rem * refactor(webcomponents): Improve InputProps type InputProps now truly removes non-input keys instead of setting them to never in the resulting type * refactor(cde-visualization): Export file loading services * refactor(cde): Refactor file-upload to use file loading code from cde-visualization * refactor(cde): Refactor and connect data from create visualization page to the visualization * Change tooltip layout for anchor info * Documentation * Remove commented out css * Improve styling for visualization page * refactor(cde): Add organs * Add web component example * Adjust links in headers * Histogram info tooltip * Add screen size notice * refactor(cde): Update create visualization page styling * build(cde-visualization): 🙈 Ignore non-published hra-node-dist-vis dependency during lint checks * Fix visualization resizing behavior * Tweaks * Modify web component example * Tweaks * Updates to create visualization page * Add example data * Update cde logo * refactor(cde-visualization): Tweak tooltip position * build(cde-visualization): 📦 Update hra-node-dist-vis version * refactor(cde-visualization): Add reset outputs to header * refactor(cde-visualization): ♻️ Update the selection logic in the cell types table * refactor(cde-visualization): Reset visualization view, cell type colors and selection when reset buttons are clicked * Adjust header font size * refactor(cde): ♻️ Refactor screen size notice logic Moved most logic into the screen size notice component. Also it will stop watching window resize events once it has been shown once * Add upload error notifications * Use smaller example dataset * Change homeLink url in visualization component * Change homeLink url in visualization component * Set up web component attempt * Remove border radius on cta buttons * Hide cta button until valid datasest uploaded * Add upload error messages for colormap * refactor(cde-visualization): Update histogram to take the current selection into account * refactor(cde-visualization): Reset cell type table sort when resetting all settings * Update color map * Refactor file upload errors * build(cde-visualization): 📦 Update hra-node-dist-vis version * refactor(cde-visualization): Connect cell type selection to node-dist-vis * Add download snackbar * Change to rem * Documentation for cde-ui * Fix tests * Disable tests * Testing * Testing for histogram component * Testing for histogram and node-dist-visualization * More test coverage * fix button states (#423) * fix color selection change detection (#426) * fix(cde-visualization): 🐛 Fix histogram celltype color sorting Changed sorting to use builtin `<` operator rather that `localeCompare` as they treat uppercase/lowercase order differently * More testing updates * Home url changes (#428) * Move example wc to wc folder * Fix home links * Change blank urls to / * Add link to VCCF poster on landing page * Rename colorMapValue to colorMapValueKey * Add more test cases for cde visualization * Testing for create visualization page * Add testid * Add missing documentation * fix(cde): 🐛 Fix file upload accept type check to handle wierdness * fix(cde-visualization): 🐛 Fix colorMapValue binding to node-dist-vis * Put a note on the embedding instructions * Additional testing coverage * test(cde-visualization): Fix renamed property in tests * test(cde-visualization): Add tests for file-saver and url-normalization * test(cde-visualization): Tweak cell-types tests * test(cde-visualization): ✅ Add json-file-loader tests * More tests for create visualization page * Fix SonarCloud issues * test(cde-visualization): ✅ Add tests for csv-file-loader & tweaked other tests * fix(cde-visualization): Fix sonar security hotspots * Update header links in visualization page * build(cde): 💚 Increase cde bundle budget * build(cde): ⬆️ Upgrade node-dist-vis dependency --------- Co-authored-by: bhushankhope <bhushankhope@gmail.com> Co-authored-by: edlu77 <eddd.lu@gmail.com> Co-authored-by: Bhushan Khope <53601863+bhushankhope@users.noreply.github.com> Co-authored-by: Edward Lu <36934022+edlu77@users.noreply.github.com> Co-authored-by: Bruce W. Herr II <bherr@indiana.edu>
hubmapconsortium · Jun 14, 2024 · 204ea8a · 204ea8a
1 parent 18afeba
commit 204ea8a
Show file tree

Hide file tree

Showing 194 changed files with 17,063 additions and 9,398 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -56,6 +56,10 @@
                 "sourceTag": "ccf",
                 "onlyDependOnLibsWithTags": ["*"]
               },
+              {
+                "sourceTag": "project:cde",
+                "onlyDependOnLibsWithTags": ["*"]
+              },
               {
                 "sourceTag": "project:design-system",
                 "onlyDependOnLibsWithTags": ["*"]

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -4,6 +4,9 @@
     "medical-illustration",
     "webcomponents",
     "state",
+    "cde-visualization",
+    "cde",
+    "cdk",
     "dashboard",
     "ftu-ui",
     "services"

diff --git a/apps/cde-ui-e2e/.eslintrc.json b/apps/cde-ui-e2e/.eslintrc.json
@@ -0,0 +1,10 @@
+{
+  "extends": ["plugin:cypress/recommended", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/apps/cde-ui-e2e/cypress.config.ts b/apps/cde-ui-e2e/cypress.config.ts
@@ -0,0 +1,7 @@
+import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
+
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: { ...nxE2EPreset(__filename, { cypressDir: 'src' }), baseUrl: 'http://localhost:4200' },
+});
diff --git a/apps/cde-ui-e2e/project.json b/apps/cde-ui-e2e/project.json
@@ -0,0 +1,30 @@
+{
+  "name": "cde-ui-e2e",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "apps/cde-ui-e2e/src",
+  "targets": {
+    "e2e": {
+      "executor": "@nx/cypress:cypress",
+      "options": {
+        "cypressConfig": "apps/cde-ui-e2e/cypress.config.ts",
+        "testingType": "e2e",
+        "devServerTarget": "cde-ui:serve:development"
+      },
+      "configurations": {
+        "production": {
+          "devServerTarget": "cde-ui:serve:production"
+        },
+        "ci": {
+          "devServerTarget": "cde-ui:serve-static"
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"]
+    }
+  },
+  "tags": [],
+  "implicitDependencies": ["cde-ui"]
+}
diff --git a/apps/cde-ui-e2e/src/e2e/app.cy.ts b/apps/cde-ui-e2e/src/e2e/app.cy.ts
@@ -0,0 +1,13 @@
+import { getGreeting } from '../support/app.po';
+
+describe('cde-ui-e2e', () => {
+  beforeEach(() => cy.visit('/'));
+
+  it('should display welcome message', () => {
+    // Custom command example, see `../support/commands.ts` file
+    cy.login('my-email@something.com', 'myPassword');
+
+    // Function helper example, see `../support/app.po.ts` file
+    getGreeting().contains(/Welcome/);
+  });
+});
diff --git a/apps/cde-ui-e2e/src/fixtures/example.json b/apps/cde-ui-e2e/src/fixtures/example.json
@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
diff --git a/apps/cde-ui-e2e/src/support/app.po.ts b/apps/cde-ui-e2e/src/support/app.po.ts
@@ -0,0 +1 @@
+export const getGreeting = () => cy.get('h1');
diff --git a/apps/cde-ui-e2e/src/support/commands.ts b/apps/cde-ui-e2e/src/support/commands.ts
@@ -0,0 +1,35 @@
+/// <reference types="cypress" />
+
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare namespace Cypress {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface Chainable<Subject> {
+    login(email: string, password: string): void;
+  }
+}
+
+// -- This is a parent command --
+Cypress.Commands.add('login', (email, password) => {
+  console.log('Custom command example: Login', email, password);
+});
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
diff --git a/apps/cde-ui-e2e/src/support/e2e.ts b/apps/cde-ui-e2e/src/support/e2e.ts
@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.ts using ES2015 syntax:
+import './commands';
diff --git a/apps/cde-ui-e2e/tsconfig.json b/apps/cde-ui-e2e/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["cypress", "node"],
+    "sourceMap": false,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["**/*.ts", "**/*.js", "cypress.config.ts", "**/*.cy.ts", "**/*.cy.js", "**/*.d.ts"]
+}
diff --git a/apps/cde-ui/.eslintrc.json b/apps/cde-ui/.eslintrc.json
@@ -0,0 +1,33 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "cde",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "cde",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/apps/cde-ui/example-data/color_map.csv b/apps/cde-ui/example-data/color_map.csv
@@ -0,0 +1,10 @@
+cell_id,cell_type,cell_color
+1,T-Killer,"[255, 0, 255]"
+2,T-Helper,"[0, 0, 255]"
+3,T-Reg,"[0, 255, 0]"
+4,CD68,"[255, 215, 0]"
+5,Endothelial,"[255, 0, 0]"
+6,DDB2,"[0, 153, 76]"
+7,P53,"[153, 76, 0]"
+8,KI67,"[0, 255, 255]"
+9,skin,"[192, 192, 192]"