Merge pull request #346 from hubmapconsortium/humanatlas-merge

Humanatlas.io merge

.gitignore

@@ -5,6 +5,9 @@ dist
 tmp
 /out-tsc
 
+# data-schema.js is compiled on the fly
+apps/human-atlas/src/app/utils/data-schema.js
+
 # dependencies
 node_modules
 /dist

.storybook/fixes/arg-types.ts

@@ -43,7 +43,7 @@ export function fixArgTypes(): ArgTypesEnhancer<AngularRenderer, Args> {
     const exclude = [...(context.parameters['controls']?.exclude ?? [])];
 
     for (const [key, type] of Object.entries(argTypes)) {
-      switch (type['table'].category) {
+      switch (type['table']?.category) {
         case 'inputs':
           const defaultValue = parseDefaultValue(type);
           if (defaultValue !== type.defaultValue) {

.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "pwa-chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

README.md

@@ -165,3 +165,16 @@ Commit the changes to the new feature branch and make a pull request!
 ## License
 
 [MIT](https://choosealicense.com/licenses/mit/)
+
+# HRA Portal
+
+- Production URL: https://humanatlas.io/
+- Staging URL: https://humanatlas-io.netlify.app/
+
+## Editing content on pages
+
+Steps to update content for pages on humanatlas.io is documented [here](apps/human-atlas/docs/editing-pages.md)
+
+**Video Tutorial**: Steps to update content for pages on humanatlas.io
+
+https://github.com/cns-iu/humanatlas.io/assets/53601863/7d1039f8-fd0f-4701-ae8e-df027b5ed032

apps/ccf-eui/src/themes/_default_light.scss

@@ -8,8 +8,8 @@ $default-light-palette: utility.add-colors(
     main: #444a65,
     light-disabled: #e0e0e0,
     contrast: (
-      main: mat.$private-dark-primary-text,
-      light-disabled: mat.$private-dark-primary-text,
+      main: rgba(black, 0.87),
+      light-disabled: rgba(black, 0.87),
     ),
   )
 );

apps/ccf-eui/src/themes/_gtex_light.scss

@@ -8,8 +8,8 @@ $gtex-light-palette: utility.add-colors(
     main: #46a4ad,
     light-disabled: #e0e0e0,
     contrast: (
-      main: mat.$private-dark-primary-text,
-      light-disabled: mat.$private-dark-primary-text,
+      main: rgba(black, 0.87),
+      light-disabled: rgba(black, 0.87),
     ),
   )
 );

apps/ccf-eui/src/themes/_hubmap_light.scss

@@ -9,8 +9,8 @@ $hubmap-light-palette: utility.add-colors(
     main: #444a65,
     light-disabled: #e0e0e0,
     contrast: (
-      main: mat.$private-dark-primary-text,
-      light-disabled: mat.$private-dark-primary-text,
+      main: rgba(black, 0.87),
+      light-disabled: rgba(black, 0.87),
     ),
   )
 );

apps/ccf-rui/src/themes/_gtex_light.scss

@@ -9,8 +9,8 @@ $gtex-light-palette: utility.add-colors(
     main: #46a4ad,
     light-disabled: #e0e0e0,
     contrast: (
-      main: mat.$private-dark-primary-text,
-      light-disabled: mat.$private-dark-primary-text,
+      main: rgba(black, 0.87),
+      light-disabled: rgba(black, 0.87),
     ),
   )
 );

apps/ccf-rui/src/themes/_light.scss

@@ -13,8 +13,8 @@ $primary-colors: utility.add-colors(
     contrast: (
       'white': black,
       'black': white,
-      light-header: mat.$private-dark-primary-text,
-      light-disabled: mat.$private-dark-primary-text,
+      light-header: rgba(black, 0.87),
+      light-disabled: rgba(black, 0.87),
     ),
   )
 );

apps/human-atlas/.eslintrc.json

@@ -0,0 +1,34 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*", "static/**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "rules": {
+        // TODO: Update components to use a prefix
+        // "@angular-eslint/directive-selector": [
+        //   "error",
+        //   {
+        //     "type": "attribute",
+        //     "prefix": "ccf",
+        //     "style": "camelCase"
+        //   }
+        // ],
+        // "@angular-eslint/component-selector": [
+        //   "error",
+        //   {
+        //     "type": "element",
+        //     "prefix": "ccf",
+        //     "style": "kebab-case"
+        //   }
+        // ]
+      },
+      "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"]
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

apps/human-atlas/__mocks__/swiper.ts

@@ -0,0 +1,3 @@
+export default {
+  use() {},
+};

apps/human-atlas/__mocks__/swiper_angular.ts

@@ -0,0 +1,21 @@
+import { Component, Input, NgModule } from '@angular/core';
+import { Shallow } from 'shallow-render';
+
+/** Mock component for swiper */
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'swiper',
+  template: '<ng-content></ng-content>',
+})
+export class SwiperComponent {
+  /** Configuration for Swiper */
+  @Input() config: unknown;
+}
+
+@NgModule({
+  declarations: [SwiperComponent],
+  exports: [SwiperComponent],
+})
+export class SwiperModule {}
+
+Shallow.neverMock(SwiperComponent, SwiperModule);

apps/human-atlas/docs/editing-pages.md

@@ -0,0 +1,47 @@
+# Editing the humanatlas.io content
+
+### This document provides a step-by-step guide on how to edit content on pages using YAML files for humanatlas.io. YAML files are used to define the content of pages on the website. By following these instructions, you can contribute to the Human Atlas project and help improve its content.
+
+### Video Tutorial: Steps to Add/Edit content on humanatlas.io pages.
+
+https://github.com/cns-iu/humanatlas.io/assets/53601863/7d1039f8-fd0f-4701-ae8e-df027b5ed032
+
+### Steps to Add/Edit YAML Files
+
+1. Open https://humanatlas.io/
+2. Navigate to the page that needs to be updated and copy the route.
+   ![Route](images/routeName.png)
+
+3. Open https://github.com/cns-iu/humanatlas.io
+
+4. In the URL, update '.com' with '.dev'. (https://github.com/cns-iu/humanatlas.io -> https://github.dev/cns-iu/humanatlas.io)
+
+5. If not installed, install the YAML Extenstion (search 'redhat.vscode-yaml' in Extensions Marketplace)
+   ![Extension](images/extension.png)
+
+6. Navigate to Source Control and create a new branch off the main/develop branch.
+   ![Create Branch From](images/createBranchFrom.png)
+
+7. Enter your branch name and press Enter
+
+8. Select the reference branch(main/develop) for your new branch and click 'Switch to Branch' to switch to your new branch.
+
+9. Navigate to ../src/assets/content/pages in the directory and open the YAML file with the same name as the route copied earlier.
+
+10. Type '- type:' and hit enter. You will be recommended with the list of the components which you can add.
+
+11. Select the component you want to add. Hover over the component name for the description of the component.
+    ![List of Components](images/listOfComponents.png)
+
+12. If you see any error, hover over it to see what fields are missing and add them accordingly.
+    ![Error](images/error.png)
+
+13. Once you are done with adding the new component, head back to Source Control. Add a commit message and push it to your branch.
+    ![Commit and Push](images/push.png)
+
+14. From Views and More Actions, select Pull Request and create new Pull Request.
+
+15. In MERGE CHANGES FROM section, select cns-iu/humanatlas.io in REMOTE and 'your_branch_name' in BRANCH. In INTO section, select cns-iu/humanatlas.io in REMOTE and main or develop in BRANCH (based on where you want to merge your changes). Add title and description for your Pull Request and click Create.  
+    ![New PR](images/createPR2.png)
+
+16. The maintainers of the humanatlas.io will now review your Pull Request. They may approve it or may ask you to make more changes.

apps/human-atlas/jest.config.ts

@@ -0,0 +1,22 @@
+export default {
+  displayName: 'human-atlas',
+  preset: '../../jest.preset.cjs',
+  coverageDirectory: '../../coverage/apps/human-atlas',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {},
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};