update makefile

added storybook for medical sources card.
added shortDomain pipe + tests

.github/workflows/ci.yaml

@@ -21,7 +21,7 @@ jobs:
           node-version: 18.x
       - name: Test Frontend
         run: |
-          make frontend-test-coverage
+          make test-frontend-coverage
       - name: Upload coverage
         uses: actions/upload-artifact@v3
         with:
@@ -41,7 +41,7 @@ jobs:
         run: |
           go install github.com/golang/mock/mockgen@v1.6.0
           go generate ./...
-          make backend-test-coverage
+          make test-backend-coverage
           CGO_ENABLED=0 go build -buildvcs=false ./backend/cmd/fasten/
       - name: Upload coverage
         uses: actions/upload-artifact@v3

.github/workflows/cloud-deploy.yaml

@@ -24,7 +24,7 @@ jobs:
           go-version: '1.18.3'
       - run: go version
       - run: |
-          make frontend-dep
+          make dep-frontend
           cd frontend
           yarn run build -- --configuration cloud_sandbox --output-path=../dist
 

CONTRIBUTING.md

@@ -39,10 +39,10 @@ Before making changes to Fasten, you'll want to run the test suites to ensure th
 make test
 
 # if you only want to run the frontend tests (Angular), you can run:
-make frontend-test
+make test-frontend
 
 # alternatively, if you only care about backend (Go) tests, you can run:
-make backend-test
+make test-backend
 ```
 
 # Start Development Environment

Makefile

@@ -5,7 +5,7 @@
 # General
 ########################################################################################################################
 .PHONY: test
-test: backend-test frontend-test
+test: test-backend test-frontend
 
 .PHONY: serve-frontend
 serve-frontend:
@@ -24,52 +24,52 @@ serve-backend:
 # Backend
 ########################################################################################################################
 
-.PHONY: backend-clean
-backend-clean:
+.PHONY: clean-backend
+clean-backend:
 	go clean
 
-.PHONY: backend-dep
-backend-dep:
+.PHONY: dep-backend
+dep-backend:
 	go mod vendor
 
-.PHONY: backend-test
-backend-test: backend-dep
+.PHONY: test-backend
+test-backend: dep-backend
 	go vet ./...
 	go test -v ./...
 
-.PHONY: backend-test-coverage
-backend-test-coverage: backend-dep
+.PHONY: test-backend-coverage
+test-backend-coverage: dep-backend
 	go test -coverprofile=backend-coverage.txt -covermode=atomic -v ./...
 
 ########################################################################################################################
 # Frontend
 ########################################################################################################################
-.PHONY: frontend-dep
-frontend-dep:
+.PHONY: dep-frontend
+dep-frontend:
 	cd frontend
 	yarn install --frozen-lockfile
 
-.PHONY: frontend-build-sandbox
-frontend-build-sandbox: frontend-dep
+.PHONY: build-frontend-sandbox
+build-frontend-sandbox: dep-frontend
 	cd frontend
 	yarn run build -- --configuration sandbox --output-path=../dist
 
-.PHONY: frontend-build-prod
-frontend-build-prod: frontend-dep
+.PHONY: build-frontend-prod
+build-frontend-prod: dep-frontend
 	cd frontend
 	yarn run build -- --configuration prod --output-path=../dist
 
-.PHONY: frontend-test
+.PHONY: test-frontend
 # reduce logging, disable angular-cli analytics for ci environment
-frontend-test: frontend-dep
+test-frontend: dep-frontend
 	cd frontend && npx ng test --watch=false
 
-.PHONY: frontend-test-coverage
+.PHONY: test-frontend-coverage
 # reduce logging, disable angular-cli analytics for ci environment
-frontend-test-coverage: frontend-dep
+test-frontend-coverage: dep-frontend
 	cd frontend && npx ng test --watch=false --code-coverage
 
-.PHONY: frontend-test-coverage-ci
+.PHONY: test-frontend-coverage-ci
 # reduce logging, disable angular-cli analytics for ci environment
-frontend-test-coverage-ci: frontend-dep
+test-frontend-coverage-ci: dep-frontend
 	cd frontend && npx ng test --watch=false --code-coverage --browsers=ChromeHeadlessCI

frontend/angular.json

@@ -208,6 +208,7 @@
               "."
             ],
             "assets": [
+              "src/assets/sources",
               {
                 "glob": "**/*",
                 "input": "./node_modules/dwv/decoders/",

frontend/src/app/components/glossary-lookup/glossary-lookup.stories.ts

@@ -81,23 +81,6 @@ const meta: Meta<GlossaryLookupComponent> = {
 export default meta;
 type Story = StoryObj<GlossaryLookupComponent>;
 
-// More on writing stories with args: https://storybook.js.org/docs/angular/writing-stories/args
-export const Empty: Story = {
-};
-
-export const PlainText: Story = {
-  args: {
-    code: "36955009",
-    codeSystem: "2.16.840.1.113883.6.96"
-  },
-  parameters: {
-    httpClientResp: {
-      url: "https://www.nidcr.nih.gov/health-info/taste-disorders/more-info?utm_source=medlineplus-connect&utm_medium=website&utm_campaign=mlp-connect",
-      publisher: "U.S. National Library of Medicine",
-      description: "Problems with the sense of taste can have a big impact on life. Taste stimulates the desire to eat and therefore plays a key role in nutrition. The sense of taste also helps keep us healthy by helping us detect spoiled food or drinks.",
-    }
-  }
-};
 
 export const Html: Story = {
   args: {
@@ -159,3 +142,21 @@ export const Html: Story = {
     }
   }
 };
+
+// More on writing stories with args: https://storybook.js.org/docs/angular/writing-stories/args
+export const Empty: Story = {
+};
+
+export const PlainText: Story = {
+  args: {
+    code: "36955009",
+    codeSystem: "2.16.840.1.113883.6.96"
+  },
+  parameters: {
+    httpClientResp: {
+      url: "https://www.nidcr.nih.gov/health-info/taste-disorders/more-info?utm_source=medlineplus-connect&utm_medium=website&utm_campaign=mlp-connect",
+      publisher: "U.S. National Library of Medicine",
+      description: "Problems with the sense of taste can have a big impact on life. Taste stimulates the desire to eat and therefore plays a key role in nutrition. The sense of taste also helps keep us healthy by helping us detect spoiled food or drinks.",
+    }
+  }
+};

frontend/src/app/components/medical-sources-card/medical-sources-card.component.html

@@ -1,4 +1,4 @@
-<div class="card h-100 d-flex align-items-center justify-content-center mt-3 mt-3 rounded-0 cursor-pointer">
+<div class="card h-100 d-flex align-items-center justify-content-center mt-3 mt-3 rounded-0 cursor-pointer" [ngClass]="{'card-disable': sourceInfo?.metadata?.hidden}">
   <div (click)="onCardClick()" class="card-body">
 
     <div class="h-100 d-flex align-items-center">

frontend/src/app/components/medical-sources-card/medical-sources-card.stories.ts

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import {MedicalSourcesCardComponent} from './medical-sources-card.component'
+
+// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
+const meta: Meta<MedicalSourcesCardComponent> = {
+  title: 'Components/MedicalSourcesCard',
+  component: MedicalSourcesCardComponent,
+  decorators: [
+    // moduleMetadata({
+    //   imports: [AppModule]
+    // })
+    // applicationConfig({
+    //   providers: [importProvidersFrom(AppModule)],
+    // }),
+  ],
+  tags: ['autodocs'],
+  render: (args: MedicalSourcesCardComponent) => ({
+    props: {
+      backgroundColor: null,
+      ...args,
+    },
+  }),
+  argTypes: {
+    sourceInfo: {
+      control: 'object',
+    },
+    status: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<MedicalSourcesCardComponent>;
+
+// More on writing stories with args: https://storybook.js.org/docs/angular/writing-stories/args
+export const Entry: Story = {
+  args: {
+    sourceInfo: {
+      metadata: {
+        // aliases?: string[]
+        // brand_logo?: string
+        category: [],
+        display: "Aetna",
+        hidden: false,
+        // identifiers?: {[name:string]: string}
+        // patient_access_description?: string
+        // patient_access_url?: string
+        platform_type: "aetna",
+        source_type: "aetna"
+      }
+    }
+  }
+};
+
+export const LoadingAuthorize: Story = {
+  args: {
+    sourceInfo: {
+      metadata: {
+        // aliases?: string[]
+        // brand_logo?: string
+        category: [],
+        display: "Aetna",
+        hidden: false,
+        // identifiers?: {[name:string]: string}
+        // patient_access_description?: string
+        // patient_access_url?: string
+        platform_type: "aetna",
+        source_type: "aetna"
+      }
+    },
+    status: 'authorize'
+  },
+};
+
+export const LoadingToken: Story = {
+  args: {
+    sourceInfo: {
+      metadata: {
+        // aliases?: string[]
+        // brand_logo?: string
+        category: [],
+        display: "Aetna",
+        hidden: false,
+        // identifiers?: {[name:string]: string}
+        // patient_access_description?: string
+        // patient_access_url?: string
+        platform_type: "aetna",
+        source_type: "aetna"
+      }
+    },
+    status: 'token'
+  },
+};
+
+
+export const Hidden: Story = {
+  args: {
+    sourceInfo: {
+      metadata: {
+        // aliases?: string[]
+        // brand_logo?: string
+        category: [],
+        display: "Aetna",
+        hidden: true,
+        // identifiers?: {[name:string]: string}
+        // patient_access_description?: string
+        // patient_access_url?: string
+        platform_type: "aetna",
+        source_type: "aetna"
+      }
+    }
+  },
+};

frontend/src/app/pages/medical-sources/medical-sources.component.html

@@ -98,7 +98,7 @@
         <a *ngIf="modalSelectedSourceListItem?.metadata.patient_access_url"
            [href]="modalSelectedSourceListItem.metadata?.patient_access_url"
             target="_blank"
-           class="mg-b-0">{{modalSelectedSourceListItem?.metadata.patient_access_url}}</a>
+           class="mg-b-0">{{modalSelectedSourceListItem?.metadata.patient_access_url | shortDomain}}</a>
       </div><!-- media-body -->
     </div><!-- media -->
     <button type="button" class="btn btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')">

frontend/src/app/pipes/pipes.module.ts

@@ -4,19 +4,22 @@ import { NgModule } from '@angular/core';
 // Pipes
 import {FhirPathPipe} from './fhir-path.pipe';
 import {FilterPipe} from './filter.pipe';
+import { ShortDomainPipe } from './short-domain.pipe';
 
 @NgModule({
   declarations: [
 
     FhirPathPipe,
     FilterPipe,
+    ShortDomainPipe,
   ],
   imports: [
 
   ],
   exports: [
     FhirPathPipe,
-    FilterPipe
+    FilterPipe,
+    ShortDomainPipe
   ]
 })
 export class PipesModule {}

frontend/src/app/pipes/short-domain.pipe.spec.ts

@@ -0,0 +1,34 @@
+import { ShortDomainPipe } from './short-domain.pipe';
+
+describe('ShortDomainPipe', () => {
+  it('create an instance', () => {
+    const pipe = new ShortDomainPipe();
+    expect(pipe).toBeTruthy();
+  });
+
+  it('should successfully extract domains', () => {
+    //setup
+    const pipe = new ShortDomainPipe();
+    const urls = [
+      {test: "http://www.blog.classroom.me.uk/index.php", result: "www.blog.classroom.me.uk"},
+      {test: "http://www.youtube.com/watch?v=ClkQA2Lb_iE", result: "www.youtube.com"},
+      {test: "https://www.youtube.com/watch?v=ClkQA2Lb_iE", result: "www.youtube.com"},
+      {test: "www.youtube.com/watch?v=ClkQA2Lb_iE", result: "www.youtube.com"},
+      {test: "websitename.com:1234/dir/file.txt", result: "websitename.com:1234"},
+      {test: "example.com?param=value", result: "example.com"},
+      {test: "https://facebook.github.io/jest/", result: "facebook.github.io"},
+      {test: "youtube.com/watch?v=ClkQA2Lb_iE", result: "youtube.com"},
+      {test: "www.食狮.公司.cn", result: "www.食狮.公司.cn"},
+      {test: "b.c.kobe.jp", result: "b.c.kobe.jp"},
+      {test: "a.d.kyoto.or.jp", result: "a.d.kyoto.or.jp"},
+      {test: "http://localhost:4200/watch?v=ClkQA2Lb_iE", result: "localhost"},
+    ];
+
+    //test
+    for(let urltest of urls) {
+      expect(pipe.transform(urltest.test)).toBe(urltest.result, `testing "${urltest.test}". Expecting ${pipe.transform(urltest.test)} to be ${urltest.result}`);
+    }
+
+    //assert
+  });
+});

frontend/src/app/pipes/short-domain.pipe.ts

@@ -0,0 +1,26 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'shortDomain'
+})
+export class ShortDomainPipe implements PipeTransform {
+
+  transform(url: string, args?: any): any {
+    if(!url){
+      return url
+    }
+
+    //check if protocol is included
+    if (!(url.indexOf('://') > -1)) {
+      return url.split('/')[0].split('?')[0];
+    } else {
+      try {
+        return (new URL(url).hostname) || url;
+      } catch (e) {
+        console.log("error parsing url", url, e)
+        return url
+      }
+    }
+
+  }
+}