Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(ontology): separate list of ontology properties (DSP-1364) #391

Merged
merged 10 commits into from Feb 25, 2021
Merged

feat(ontology): separate list of ontology properties (DSP-1364) #391

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
9bf3bb5
feat(ontology): new view for properties
kilchenmann Feb 18, 2021
b8ff8b0
Merge branch 'main' into wip/dsp-1364-properties-list
kilchenmann Feb 22, 2021
d2a8232
chore(ontology): display warning in case of no lastModification data
kilchenmann Feb 22, 2021
84c8d4b
Merge branch 'main' into wip/dsp-1364-properties-list
kilchenmann Feb 22, 2021
db916bf
Merge branch 'main' into wip/dsp-1364-properties-list
Feb 23, 2021
ea113c7
feat(ontology): new view for ontology properties
kilchenmann Feb 23, 2021
c7342d1
refactor(ontology): delete yellow banner
kilchenmann Feb 23, 2021
d2b89b7
Merge branch 'main' into wip/dsp-1364-properties-list
kilchenmann Feb 23, 2021
ac7c3cf
refactor(ontology): clean up stylesheet
kilchenmann Feb 24, 2021
1b344b6
Merge branch 'main' into wip/dsp-1364-properties-list
kilchenmann Feb 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/app/app-routing.module.ts
View file
Open in desktop
Expand Up @@ -80,6 +80,11 @@ const routes: Routes = [
component: OntologyComponent,
canActivate: [AuthGuard]
},
{
path: 'ontologies/:id/:view',
component: OntologyComponent,
canActivate: [AuthGuard]
},
{
path: 'lists',
component: ListComponent,
Expand Down
138 changes: 85 additions & 53 deletions src/app/project/ontology/ontology.component.html
View file
Open in desktop
@@ -1,8 +1,5 @@
<div *ngIf="projectAdmin" class="desktop-only">

<p class="note warning center">
This is a first version of the data model editor. Some features may not work as intended.
</p>
<dsp-progress-indicator *ngIf="loading"></dsp-progress-indicator>

<!-- toolbar: select ontology -->
Expand Down Expand Up @@ -59,25 +56,34 @@ <h2 class="mat-title">

<mat-toolbar class="ontology-editor-header">
<mat-toolbar-row>
<h3 class="mat-title" [matTooltip]="ontology.id">{{ontology?.label}}</h3>

<span class="fill-remaining-space"></span>
<span class="ontology-info">
<p class="mat-caption space-reducer">Last modification date</p>
<p class="mat-body" [matTooltip]="'Last modification date: ' + ontology.lastModificationDate"
<h3 class="mat-title space-reducer" [matTooltip]="ontology.id">{{ontology?.label}}</h3>
<p class="mat-caption" [matTooltip]="'Last modification date: ' + ontology.lastModificationDate"
matTooltipPosition="above">
{{ontology.lastModificationDate | date:'medium'}}</p>
<span *ngIf="ontology.lastModificationDate; else noModificationDate">
Updated on: {{ontology.lastModificationDate | date:'medium'}}
</span>
<ng-template #noModificationDate>
<span class="note warning">
<!-- <mat-icon>report</mat-icon> -->
This data model can't be edited because of missing "lastModificationDate"!
</span>
</ng-template>
</p>
</span>

<span class="fill-remaining-space"></span>

<!-- toggle view -->
<span class="ontology-actions">
<p class="mat-caption space-reducer">Display as</p>
<button mat-button [class.active]="view === 'grid'" (click)="toggleView('grid')">
<button mat-button [class.active]="view === 'classes' || view === 'properties'"
(click)="openOntologyRoute(ontology.id, 'classes')">
<mat-icon>view_module</mat-icon>
Grid
</button>
<button mat-button [class.active]="view === 'graph'" (click)="toggleView('graph')">
<button mat-button [class.active]="view === 'graph'"
(click)="openOntologyRoute(ontology.id, 'graph')">
<mat-icon>scatter_plot</mat-icon>
Graph
</button>
Expand All @@ -87,47 +93,64 @@ <h3 class="mat-title" [matTooltip]="ontology.id">{{ontology?.label}}</h3>
<span class="ontology-actions">
<p class="mat-caption space-reducer">Data model configuration</p>
<!-- TODO: remove following span as soon edit mode is implemented; it's only for tooltip to use with disabled button -->
<span [matTooltip]="'Edit data model info (not yet implemented)'" matTooltipPosition="above">
<span
[matTooltip]="(ontology.lastModificationDate ? 'Edit data model info (not yet implemented)' : 'This data model can\'t be edited because of missing lastModificationDate!')">
<button mat-button [disabled]="!ontology.lastModificationDate" [disabled]="true"
(click)="$event.stopPropagation(); openOntologyForm('editOntology', ontology.id)">
<!-- <mat-icon>edit</mat-icon> -->
<mat-icon>edit</mat-icon>
Edit
</button>
</span>
<button mat-button [disabled]="!ontology.lastModificationDate"
(click)="$event.stopPropagation(); delete(ontologyIri, 'Ontology', ontology.label)">
<!-- <mat-icon>delete</mat-icon> -->
Delete
</button>
<span
[matTooltip]="(ontology.lastModificationDate ? 'Delete data model' : 'This data model can\'t be edited because of missing lastModificationDate!')">
<button mat-button [disabled]="!ontology.lastModificationDate"
(click)="$event.stopPropagation(); delete(ontologyIri, 'Ontology', ontology.label)">
<mat-icon>delete</mat-icon>
Delete
</button>
</span>
</span>

</mat-toolbar-row>
</mat-toolbar>

<div #ontologyEditor *ngIf="!loadOntology && view === 'grid'" class="ontology-editor-container">
<mat-sidenav-container #ontologyEditor *ngIf="!loadOntology && (view === 'classes' || view === 'properties')"
class="ontology-editor-container">
<mat-sidenav class="ontology-editor-sidenav" mode="side" position="end" opened>
<mat-list>
<a mat-list-item routerLinkActive="active" [routerLink]="'../classes'"
(click)="view = 'classes'">Classes</a>
<span mat-list-item *ngIf="project?.status && (sysAdmin || projectAdmin) && ontologyIri"
[matTooltip]="'This data model can\'t be edited because of missing \'lastModificationDate\'!'"
[matTooltipDisabled]="ontology.lastModificationDate">
<button mat-button [matMenuTriggerFor]="addResClassMenu"
[disabled]="!ontology.lastModificationDate">
<mat-icon>add</mat-icon>
Add class
</button>
<mat-menu #addResClassMenu="matMenu" xPosition="before">
<button mat-menu-item *ngFor="let type of resourceClass"
(click)="openResourceClassForm('addResourceClass', type)">
{{ type?.label }}
</button>
</mat-menu>
</span>
<mat-divider></mat-divider>
<a mat-list-item routerLinkActive="active" [routerLink]="'../properties'"
(click)="view = 'properties'">Properties</a>
</mat-list>
</mat-sidenav>

<div class="ontology-editor-subheader">
<!-- <div class="ontology-editor-subheader">
<p *ngIf="!ontology.lastModificationDate" class="note warning center">
This data model can't be edited because of missing "lastModificationDate"!
</p>
<!-- button to select and add new resource class to the ontology -->
<div class="add-resource-class"
*ngIf="project?.status && (sysAdmin || projectAdmin) && ontologyIri && ontology.lastModificationDate">
<button mat-raised-button color="primary" [matMenuTriggerFor]="addResClassMenu">
Add resource class&nbsp;
<mat-icon>add</mat-icon>
</button>
<mat-menu #addResClassMenu="matMenu" xPosition="before">
<button mat-menu-item *ngFor="let type of resourceClass"
(click)="openResourceClassForm('addResourceClass', type)">
{{ type?.label }}
</button>
</mat-menu>
</div>
</div>
<!-- button to select and add new resource class to the ontology --

</div> -->

<div class="ontology-editor-canvas drag-drop-stop">
<div class="ontology-editor-grid">
<mat-sidenav-content class="ontology-editor-canvas drag-drop-stop">
<div class="ontology-editor-grid" *ngIf="view === 'classes'">

<!-- list of resource classes -->
<div *ngFor="let resClass of ontoClasses; let i = index" class="resource-class" cdkDrag
Expand All @@ -137,22 +160,20 @@ <h3 class="mat-title" [matTooltip]="ontology.id">{{ontology?.label}}</h3>
<h4 mat-card-title [matTooltip]="resClass.comment" matTooltipPosition="above">
{{resClass.label | dspTruncate: 24}}</h4>
<span class="fill-remaining-space"></span>
<button mat-icon-button [matMenuTriggerFor]="resClassMenu"
[matTooltip]="(ontology.lastModificationDate ? null : 'This data model can\'t be edited because of missing lastModificationDate!')"
matTooltipPosition="above">
<mat-icon>more_horiz</mat-icon>
</button>
<span
[matTooltip]="(ontology.lastModificationDate ? 'more' : 'This data model can\'t be edited because of missing lastModificationDate!')">
<button mat-icon-button [matMenuTriggerFor]="resClassMenu" [disabled]="!ontology.lastModificationDate">
<mat-icon>more_horiz</mat-icon>
</button>
</span>
<mat-menu #resClassMenu="matMenu" xPosition="before">
<button mat-menu-item [disabled]="!ontology.lastModificationDate"
(click)="openResourceClassForm('editResourceClass', {iri: resClass.id, name: '', label: resClass.label})">
<button mat-menu-item (click)="openResourceClassForm('editResourceClass', {iri: resClass.id, name: '', label: resClass.label})">
Edit resource class info
</button>
<button mat-menu-item [disabled]="!ontology.lastModificationDate"
(click)="updateCard(resClass)">
<button mat-menu-item (click)="updateCard(resClass)">
Update corresponding properties
</button>
<button mat-menu-item [disabled]="!ontology.lastModificationDate"
(click)="delete(resClass.id, 'ResourceClass', resClass.label)">
<button mat-menu-item (click)="delete(resClass.id, 'ResourceClass', resClass.label)">
Delete resource class
</button>
</mat-menu>
Expand All @@ -162,9 +183,9 @@ <h4 mat-card-title [matTooltip]="resClass.comment" matTooltipPosition="above">
<span *ngFor="let prop of resClass.propertiesList">
<!-- display only properties with guiOrder and if they exist in list of properties;
objectType is not a linkValue (otherwise we have the property twice) -->
<app-property-info
*ngIf="ontology?.properties[prop.propertyIndex]
&& ontology?.properties[prop.propertyIndex].objectType !== 'http://api.knora.org/ontology/knora-api/v2#LinkValue'"
<app-property-info *ngIf="ontology?.properties[prop.propertyIndex]
&& ontology?.properties[prop.propertyIndex].objectType !== 'http://api.knora.org/ontology/knora-api/v2#LinkValue'
&& !ontology?.properties[prop.propertyIndex].subjectType?.includes('Standoff')"
[propDef]="ontology?.properties[prop.propertyIndex]" [propCard]="prop"
[projectcode]="projectcode">
</app-property-info>
Expand All @@ -174,8 +195,19 @@ <h4 mat-card-title [matTooltip]="resClass.comment" matTooltipPosition="above">
</div>

</div>
</div>
</div>
<div class="ontology-editor-list" *ngIf="view === 'properties'">
<mat-list>
<span *ngFor="let prop of ontoProperties">
<!-- display only properties with guiOrder and if they exist in list of properties;
objectType is not a linkValue (otherwise we have the property twice) -->
<app-property-info [propDef]="ontology?.properties[prop.id]" [projectcode]="projectcode">
</app-property-info>
</span>
<!-- <mat-list-item *ngFor="let prop of ontoProperties">{{prop.label}}</mat-list-item> -->
</mat-list>
</div>
</mat-sidenav-content>
</mat-sidenav-container>

<div *ngIf="view === 'graph'" class="ontology-viewer">
<app-ontology-visualizer [ontology]="ontology" [ontoClasses]="ontoClasses"></app-ontology-visualizer>
Expand Down
27 changes: 22 additions & 5 deletions src/app/project/ontology/ontology.component.scss
View file
Open in desktop
Expand Up @@ -27,7 +27,6 @@ $width: 340px;
max-width: 1280px;
min-height: calc(100vh - #{$header-height} - #{$tab-bar-margin} - 100px);
border: 1px dotted $primary_200;
background: $primary_200;
position: relative;
margin: 0 auto 60px auto;
}
Expand All @@ -45,15 +44,29 @@ $width: 340px;
height: $sub-header-height;
}

.ontology-editor-sidenav {
width: 160px;

button {
width: 100%;
text-align: left;
}
}

.ontology-editor-canvas {
min-height: calc(100vh - #{$sub-header-height} - #{$header-height} - #{$tab-bar-margin} - 100px);
// background: $primary_200;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

when there are unused css classes, we should clean them up or add a comment (remark valid for all the scss files)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some of the css classes are not defined in the scss file, that's true. But they are needed for the tests.

Or are you talking about the commented css property here? I can clean them up...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done in ac7c3cf

border-right: 1px solid rgba(0, 0, 0, 0.12);

.ontology-editor-grid {
display: grid;
grid-template-rows: auto; // value would be "masonry" as soon it's implemented in all browsers
grid-template-columns: repeat(auto-fill, minmax($width, 1fr));
grid-gap: 6px;
}
.ontology-editor-list {
margin: 16px;
}
}
}

Expand All @@ -68,7 +81,7 @@ $width: 340px;
background-color: #fff;

.resource-class-header {
margin: -12px -12px 12px -12px;
margin: -12px -12px 0 -12px;
width: calc(100% + 24px);
min-height: 48px !important;
height: 48px;
Expand Down Expand Up @@ -98,10 +111,14 @@ $width: 340px;
.switch-view-label {
margin-right: 16px;
}
}

button.active {
background-color: $black-12-opacity;
}
.active {
background-color: $black-12-opacity;
}

.note {
padding: 2px;
}
/*
.ontology-container {
Expand Down