feat: display metadata on project landing page (DSP-1065) #348

waychal · 2020-12-17T20:13:11Z

resolves DSP-1065

This is the first draft of the project landing page.

In this PR, most of the metadata is hard-coded to finish the functionality. As the test data is very limited, it is difficult to handle different cases. In next iterations, hard-coded values will be removed.

This is my first significant PR in DSP-APP and also using Angular 9. So looking forward for reviews and improvements. :)

… to disply project and dataset metadata

mpro7 · 2020-12-18T10:08:35Z

src/app/project/board/project-tab-view/project-tab-view.component.html

+                        <p style="margin-top: 4px;">
+                            URL: <a href="{{ metadata['dataManagementPlan']['url']['value'] }}" target="_blank"> {{ metadata['dataManagementPlan']['url']['value'] }} </a>
+                        </p>
+                        <p>isAvailable: {{ metadata['dataManagementPlan']['isAvailable'] }}</p>


Instead of displaying the boolean value, basing on it I would display:
metadata.dataManagementPlan.isAvailable ? 'Available' : 'Unavailable'
But then the url shouldn't be also displayed or exist. These are just the dummy data, it needs to be clarified.

Done. To make changes, I have updated the hard-coded metadata for metadata.dataManagementPlan.isAvailable = true.

mpro7 · 2020-12-18T10:12:47Z

src/app/project/board/project-tab-view/project-tab-view.component.html

+                    <!-- #################### template for dataManagementPlan ################# -->
+                    <div *ngSwitchCase="'spatialCoverage'">
+                        <div *ngFor="let coverage of metadata['spatialCoverage'] | keyvalue;">
+                            <a href="{{ coverage.value['place']['url'] }}" target="_blank"> {{ coverage.value['place']['name'] }} </a>


As a link title for now I would display the link itself {{ coverage.value['place'] }}. But later on we need to think about better solution (like parsing for the location name).

Instead of displaying object, for now I am displaying it as:
coverage.value['place']['name'] ( coverage.value['place']['url'] )

For example:
Geonames ( https://www.geonames.org/2017370/russian-federation.html )

mpro7 · 2020-12-18T10:16:31Z

src/app/project/board/dataset-tab-view/dataset-tab-view.component.html

@@ -0,0 +1,28 @@
+<h1>Selected dataset: {{ metadata['title'] }} </h1>
+
+<p class="note">Click on the radio button in side panel to change the dataset.</p>


This information I would display only if there is more than one Dataset available. Also I would change this message to: "Default dataset is displayed, to change it... "

mpro7 · 2020-12-18T10:18:05Z

src/app/project/board/attribution-tab-view/attribution-tab-view.component.html

@@ -0,0 +1,15 @@
+<h1>Attribution</h1>
+
+<p>The following people are involved in making of dataset.</p>


I would change it to The following people are involved in creation of the dataset:.

to correct: "in THE creation of the dataset"

mpro7 · 2020-12-18T10:19:03Z

src/app/project/board/contacts-tab-view/contacts-tab-view.component.html

+<h1>Contact</h1>
+
+<div class="tab-contents">
+    <p style="margin-bottom: 40px;">If you have any questions, please contact us on </p>


I would remove it.

mpro7 · 2020-12-18T10:57:09Z

src/app/project/board/board.component.html

+    <div class="content large middle">
+        <!--  mobile version: status and edit icon displayed before the title -->
+        <div class="app-toolbar-mobile">
        <span class="app-toolbar-action-status">
            <span class="badge status" [class.active]="project.status">
                <span *ngIf="project.status">Active</span>
                <span *ngIf="!project.status">Deactivated</span>
            </span>
        </span>
-        <span class="fill-remaining-space-action"></span>
-        <span class="app-toolbar-action-edit">
+            <span class="fill-remaining-space-action"></span>
+            <span class="app-toolbar-action-edit">
            <button mat-icon-button class="right"
-                (click)="openDialog('editProject', project.shortname, project.shortcode)"
-                *ngIf="projectAdmin && project.status">
+                    (click)="openDialog('editProject', project.shortname, project.shortcode)"
+                    *ngIf="projectAdmin && project.status">
                <mat-icon>edit</mat-icon>
            </button>
        </span>
-    </div>
+        </div>

-    <!-- desktop and tablet version -->
-    <div class="app-toolbar transparent more-space-bottom">
-        <div class="app-toolbar-row">
-            <h3 class="mat-body subtitle">
-                Project {{project.shortcode}} | {{project.shortname | uppercase}}
-            </h3>
-            <span class="fill-remaining-space"></span>
-            <span class="app-toolbar-action">
+        <!-- desktop and tablet version -->
+        <div class="app-toolbar transparent more-space-bottom">
+            <div class="app-toolbar-row">
+                <h3 class="mat-body subtitle">
+                    Project {{ project.shortcode }} | {{ project.shortname | uppercase }}
+                </h3>
+                <span class="fill-remaining-space"></span>
+                <span class="app-toolbar-action">
                <span class="badge status" [class.active]="project.status">
                    <span *ngIf="project.status">Active</span>
                    <span *ngIf="!project.status">Deactivated</span>
                </span>
            </span>
-        </div>
-        <div class="app-toolbar-row">
-            <h2 class="mat-title">
-                {{project.longname}}
-            </h2>
-            <span class="fill-remaining-space"></span>
-            <span class="app-toolbar-action">
-                <button mat-icon-button class="right"
-                    (click)="openDialog('editProject', project.shortname, project.shortcode)"
-                    *ngIf="projectAdmin && project.status">
+            </div>
+            <div class="app-toolbar-row">
+                <h2 class="mat-title">
+                    {{ project.longname }}
+                </h2>
+                <span class="fill-remaining-space"></span>
+                <span class="app-toolbar-action">
+                <button mat-icon-button
+                        *ngIf="projectAdmin && project.status"
+                        (click)="openDialog('editProject', project.shortname, project.shortcode)"
+                        class="right">
                    <mat-icon>edit</mat-icon>
                </button>
            </span>
+            </div>
        </div>
    </div>


It is something wrong with formatting here. Inner elements are wrongly indented.

Thanks for noticing it. I normally use Webstorm auto-indentation but sometimes it doesn't work properly for <span> element. I have corrected it now.

mpro7 · 2020-12-18T10:59:14Z

src/app/project/board/board.component.scss

-
+
+  .more-space-bottom {
+    margin-bottom: 15px !important;


If possible avoid using !important.

It is old code and I am not sure how it will affect if I remove !important.
@kilchenmann can you tell me if it is safe to remove. It is for desktop and tablet version. If I remove it, I don't see any difference.

mpro7 · 2020-12-18T11:07:20Z

src/app/project/board/board.component.scss

+  }
+
+  // grid
+  ::ng-deep .properties-container {


::ng-deep is deprecated, however there is still no replacement for this. So we need to keep it in mind to not use it if not necessary.

properties-container class is used in many children components. So instead of repeating style I have defined the style in parent component with ::ng-deep. If there is better solution, I am happy to change it.

As above, I don't mind to use it, but once they deprecate it for good (it is still marked "to deprecate" in Angular 9), someone needs to fix it.

mpro7 · 2020-12-18T11:08:57Z

src/app/project/board/board.component.ts

+    metadata: object;
+    datasetMetadata: object;
+    projectMetadata: object;
+    attribution: object;


Primitive object types could be replaced by interfaces, but it can be also done in another iteration since the data model is kind of liquid ;)

mpro7 · 2020-12-18T11:11:48Z

src/app/project/board/board.component.ts

@@ -100,13 +112,174 @@ export class BoardComponent implements OnInit {
        this.loading = false;
    }

+    getProjectMetadata() {


This could be already replaced by DSP-JS method call with http, but the payload need to be uploaded first, since there is no default data in the database. Maybe you should request backend to add it.
But because this is still WIP, it is fine to have all hardcoded.

I will add Ajax call to get metadata in next iteration.

HttpClient from Angular common module.

mpro7

I will leave it open for now. Someone else from APP developers should also have a look and finally approve it. Either @flavens or @kilchenmann

Please write down all things which are addressed for next iteration and add them to its task description, to don't lose it.

mpro7 · 2020-12-18T14:29:32Z

package.json

@@ -47,6 +47,7 @@
        "json2typescript": "^1.0.6",
        "jsonld": "^1.1.0",
        "moment": "^2.27.0",
+        "ngx-clipboard": "^14.0.1",


Ok, check this out in next iteration.

mpro7 · 2020-12-18T14:38:08Z

src/app/project/board/address-template/address-template.component.ts

+      <div class="sub-details">
+          <h4>Address:</h4>
+          <address class="contents">
+              <p *ngIf="address['streetAddress']">{{ address['streetAddress'] }}</p>


Is this happening everywhere? This is strange, because you use hardcoded data. However you can also use ? operator to check if key is undefined, then it shouldn't return error if it is:

address.streetAddress?.anotherProp?

But if you use primitive object type and get this error: Identifier 'test' is not defined. 'object' does not contain such a member then it is clear as error says. So you can leave it now, but in second iteration when you add interfaces, bracket notation should be easily replaced with dot notation.

mpro7 · 2020-12-18T14:40:33Z

src/app/project/board/attribution-tab-view/attribution-tab-view.component.ts

+
+    ngOnInit(): void {
+        // reformat data
+        for (let idx = 0; idx < this.people.length; idx++) {


But why do you think this could be reused anywhere?

mpro7 · 2020-12-18T14:44:43Z

src/app/project/board/board.component.scss

+  }
+
+  // grid
+  ::ng-deep .properties-container {


As above, I don't mind to use it, but once they deprecate it for good (it is still marked "to deprecate" in Angular 9), someone needs to fix it.

mpro7 · 2020-12-18T14:46:53Z

src/app/project/board/board.component.ts

@@ -100,13 +112,174 @@ export class BoardComponent implements OnInit {
        this.loading = false;
    }

+    getProjectMetadata() {


HttpClient from Angular common module.

waychal · 2020-12-22T10:43:55Z

@mpro7 I have updated task in Youtrack for the todos in next iteration.

flavens

looks good! but there are changes to make!
question: is it possible to use the value components to display the information? (Text as string, url, date)

src/app/project/board/board.component.html

flavens · 2021-01-04T13:01:33Z

src/app/project/board/project-tab-view/project-tab-view.component.html

+            <div *ngIf="excludeKeys.indexOf(prop.key) < 0" class="property">
+                <div class="property-label">
+                    <h3 class="label mat-subheading-1">
+                        {{ prop.key }}


is there a way to get the label instead of the key? because the keys are not well written (e.g. startDate, dataManagementPlan)
same question for the panel "Dataset"

I agree but it requires changes in the backend. Currently I am using the format received from Js-lib. If we want to use label, we need to update this response format.
I would suggest to update the response format (in backend) in next iteration. So that I can directly receive it in frontend using metadata endpoint and use it instead of hardcoding it now.

ok,I think it is important to have it soon

I'm not API designer specialist, but I think common practice is to use lowerCamelCase for properties to avoid spaces and other strange characters. I've never also worked with in this way designed API, however it's possible to find this kind of ideas in the web, I'm not sure if this is best practice. @tobiasschweizer what do you think about it?

Sorry, I think I am missing some context here. Could you give me some examples?

I think I talked about it with you already. Snehal would like to have Space Separated properties instead of lowerCamelCase, as we have now, just to iterate through and display it directly on the view. But I've just understood it is rather not doable.

You can surely have display strings (labels) that contain spaces, but property names cannot have spaces. So I think you are right about the camel case convention.

Let's discuss this in next metadata discussion meeting. I am adding @BalduinLandolt for reference here as he is coordinating the metadata group.

src/app/project/board/project-tab-view/project-tab-view.component.html

flavens · 2021-01-04T13:08:37Z

src/app/project/board/project-tab-view/project-tab-view.component.spec.ts

+            'givenName': 'Stewart',
+            'jobTitle': 'Dr.',
+            'memberOf': 'http://ns.dasch.swiss/test-dasch',
+            'sameAs': {'type': 'https://schema.org/URL', 'value': 'https://orcid.org/0000-0002-1825-0097'},


what does sameAs mean? Is it possible to have a more explicit label for this field?

From my understanding, sameAs contains the profile url. It is the key I received in REST API response. I will add this point in metadata discussion if we want to change it. I am adding @BalduinLandolt and @mpro7 for reference.

I guess you can find a better label. I really doubt that a lambda user will understand what sameAs means. You can also discuss it with Marion or Rita.

src/app/project/board/board.component.html

src/app/project/board/address-template/address-template.component.ts

waychal · 2021-01-07T09:51:40Z

question: is it possible to use the value components to display the information? (Text as string, url, date)

What do you mean by value component here? Can you give more details?

waychal · 2021-01-07T11:46:23Z

@flavens I have also merged main branch into this branch. There was big conflict in package-lock.json file. Can you please verify it? Thanks.

flavens · 2021-01-08T08:27:15Z

question: is it possible to use the value components to display the information? (Text as string, url, date)

What do you mean by value component here? Can you give more details?

in dsp-ui > viewer module, we defined several component to handle the creation/edition/deletion of property values. We use them in the resource viewer. Your case seems similar even though the project properties here are different.

Read the design doc for more info about it.

flavens · 2021-01-08T08:42:37Z

@flavens I have also merged main branch into this branch. There was big conflict in package-lock.json file. Can you please verify it? Thanks.

It is still relevant? I cannot see any conflicts.

mpro7 · 2021-01-08T15:15:35Z

@flavens I have also merged main branch into this branch. There was big conflict in package-lock.json file. Can you please verify it? Thanks.

After merging main to the branch you should run also npm install to avoid this situation. This file actually contains some important logs, but importance actually depends how and if those information are used. Here you can read how to deal with this situation.

mpro7

Please create a list with non-addressed questions/issues and add those to next step task. It would be better however to split the big task to small ones, then PR will be not that complex and easier to handle.

waychal · 2021-01-11T13:01:35Z

question: is it possible to use the value components to display the information? (Text as string, url, date)

What do you mean by value component here? Can you give more details?

in dsp-ui > viewer module, we defined several component to handle the creation/edition/deletion of property values. We use them in the resource viewer. Your case seems similar even though the project properties here are different.

Read the design doc for more info about it.

I was planning to use this value component at first but as I have only read only properties, Andre asked me to not use it and create the list separately.

Snehal Kumbhar added 5 commits December 16, 2020 17:04

Feat (Project landing/metadata page): implementation of functionality…

f6fb17e

… to disply project and dataset metadata

cleanup

30f9e34

added test cases for board component and it's children components

21b5e87

Merge branch 'main' into DSP-1065-add-metadata-on-project-landing-page

1f31541

create new components for person, address and organisation

de3b18a

waychal added the enhancement New feature or request label Dec 17, 2020

waychal requested review from kilchenmann and mpro7 December 17, 2020 20:13

waychal self-assigned this Dec 17, 2020

mpro7 requested changes Dec 18, 2020

View reviewed changes

changes requested in PR

0060982

waychal requested a review from mpro7 December 18, 2020 14:16

mpro7 reviewed Dec 18, 2020

View reviewed changes

mpro7 requested a review from flavens December 18, 2020 15:02

flavens requested changes Jan 4, 2021

View reviewed changes

Snehal Kumbhar added 2 commits January 7, 2021 11:16

changes requested in PR

9ea26b1

Merge branch 'main' into DSP-1065-add-metadata-on-project-landing-page

9bf1a6f

waychal requested a review from flavens January 7, 2021 11:46

mpro7 changed the title ~~DSP-1065 Display metadata on project landing page~~ feat: display metadata on project landing page (DSP-1065) Jan 8, 2021

Merge branch 'main' into DSP-1065-add-metadata-on-project-landing-page

8c7b8b2

mpro7 self-requested a review January 11, 2021 10:42

mpro7 approved these changes Jan 11, 2021

View reviewed changes

flavens approved these changes Jan 11, 2021

View reviewed changes

waychal merged commit 3012ef5 into main Jan 11, 2021

waychal deleted the DSP-1065-add-metadata-on-project-landing-page branch January 11, 2021 12:55

		@@ -0,0 +1,28 @@
		<h1>Selected dataset: {{ metadata['title'] }} </h1>

		<p class="note">Click on the radio button in side panel to change the dataset.</p>

		@@ -0,0 +1,15 @@
		<h1>Attribution</h1>

		<p>The following people are involved in making of dataset.</p>

feat: display metadata on project landing page (DSP-1065) #348

feat: display metadata on project landing page (DSP-1065) #348

Conversation

waychal commented Dec 17, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mpro7 Dec 18, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mpro7 Dec 18, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mpro7 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

waychal commented Dec 22, 2020

flavens left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mpro7 Jan 5, 2021 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

waychal commented Jan 7, 2021

waychal commented Jan 7, 2021

flavens commented Jan 8, 2021 • edited

flavens commented Jan 8, 2021

mpro7 commented Jan 8, 2021

mpro7 left a comment

Choose a reason for hiding this comment

waychal commented Jan 11, 2021

mpro7 Dec 18, 2020 •

edited

mpro7 Dec 18, 2020 •

edited

mpro7 Jan 5, 2021 •

edited

flavens commented Jan 8, 2021 •

edited