From 0d2b3a794342097ec3be30b03c0e007bd6bc2324 Mon Sep 17 00:00:00 2001
From: xgui3783 <xgui3783@gmail.com>
Date: Tue, 1 Sep 2020 16:56:11 +0200
Subject: [PATCH] chore: minor ui issues (#649)
* feat: use region related components inherit randomized colour
bugfix: Explore btn text colour
chore: reworked threshold for triggering darkmode
* feat: reworked contributor name display
* chore: use short name for version selector
* chore: update help page info
---
common/util.js | 21 ++++++++++++++++++
deploy/datasets/query.js | 2 +-
src/atlasViewer/atlasViewer.component.ts | 12 +++++++---
.../atlasViewer.constantService.service.ts | 15 ++++++-------
src/atlasViewer/atlasViewer.template.html | 11 ++++++++--
src/index.html | 2 +-
src/theme.scss | 14 ++++++++++++
src/ui/databrowserModule/contributor/index.ts | 2 ++
.../contributor/kgLink.pipe.ts | 13 +++++++++++
.../databrowserModule/contributor/module.ts | 13 +++++++++++
src/ui/databrowserModule/contributor/util.ts | 10 +++++++++
.../databrowserModule/databrowser.module.ts | 2 ++
.../detailedView/singleDataset.template.html | 9 +++++---
.../singleDataset/singleDataset.base.ts | 3 ++-
src/ui/help/help.component.ts | 22 +++++++------------
src/ui/help/help.template.html | 11 +++++++++-
.../nehubaContainer.template.html | 2 +-
.../nehubaViewer/nehubaViewer.component.ts | 22 +------------------
src/ui/parcellationRegion/region.base.ts | 10 +++++----
19 files changed, 136 insertions(+), 60 deletions(-)
create mode 100644 src/ui/databrowserModule/contributor/index.ts
create mode 100644 src/ui/databrowserModule/contributor/kgLink.pipe.ts
create mode 100644 src/ui/databrowserModule/contributor/module.ts
create mode 100644 src/ui/databrowserModule/contributor/util.ts
diff --git a/common/util.js b/common/util.js
index dc2d8eb44..cb1004eef 100644
--- a/common/util.js
+++ b/common/util.js
@@ -13,6 +13,27 @@
}
}
+ /**
+ *
+ * https://stackoverflow.com/a/16348977/6059235
+ */
+ exports.intToRgb = int => {
+ if (int >= 65500) {
+ return [255, 255, 255]
+ }
+ const str = String(int * 65535)
+ let hash = 0
+ for (let i = 0; i < str.length; i++) {
+ hash = str.charCodeAt(i) + ((hash << 5) - hash);
+ }
+ const returnV = []
+ for (let i = 0; i < 3; i++) {
+ const value = (hash >> (i * 8)) & 0xFF;
+ returnV.push(value)
+ }
+ return returnV
+ }
+
exports.getIdObj = getIdObj
exports.getIdFromFullId = fullId => {
diff --git a/deploy/datasets/query.js b/deploy/datasets/query.js
index 11c800173..c1a11c28d 100644
--- a/deploy/datasets/query.js
+++ b/deploy/datasets/query.js
@@ -32,7 +32,7 @@ fs.readFile(CACHE_DATASET_FILENAME, 'utf-8', (err, data) => {
const { KG_ROOT, KG_SEARCH_VOCAB } = constants
-const KG_DATASET_SEARCH_QUERY_NAME = process.env.KG_DATASET_SEARCH_QUERY_NAME || 'interactiveViewerKgQuery-v0_3'
+const KG_DATASET_SEARCH_QUERY_NAME = process.env.KG_DATASET_SEARCH_QUERY_NAME || 'interactiveViewerKgQuery-v1_0'
const KG_DATASET_SEARCH_PATH = process.env.KG_DATASET_SEARCH_PATH || '/minds/core/dataset/v1.0.0'
const kgDatasetSearchFullString = `${KG_DATASET_SEARCH_PATH}/${KG_DATASET_SEARCH_QUERY_NAME}`
diff --git a/src/atlasViewer/atlasViewer.component.ts b/src/atlasViewer/atlasViewer.component.ts
index 1b2a8c600..e77718d7a 100644
--- a/src/atlasViewer/atlasViewer.component.ts
+++ b/src/atlasViewer/atlasViewer.component.ts
@@ -40,7 +40,7 @@ export const NEHUBA_CLICK_OVERRIDE: InjectionToken<(next: () => void) => void> =
import { MIN_REQ_EXPLAINER } from 'src/util/constants'
import { SlServiceService } from "src/spotlight/sl-service.service";
import { PureContantService } from "src/util";
-import { viewerStateSetSelectedRegions, viewerStateRemoveAdditionalLayer, viewerStateSelectParcellation } from "src/services/state/viewerState.store.helper";
+import { viewerStateSetSelectedRegions, viewerStateRemoveAdditionalLayer, viewerStateHelperSelectParcellationWithId } from "src/services/state/viewerState.store.helper";
import { viewerStateGetOverlayingAdditionalParcellations, viewerStateParcVersionSelector } from "src/services/state/viewerState/selectors";
import { ngViewerSelectorClearViewEntries } from "src/services/state/ngViewerState/selectors";
import { ngViewerActionClearView } from "src/services/state/ngViewerState/actions";
@@ -114,6 +114,12 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
public selectedLayerVersions$ = this.store.pipe(
select(viewerStateParcVersionSelector),
+ map(arr => arr.map(item => {
+ const overwrittenName = item['@version'] && item['@version']['name']
+ return overwrittenName
+ ? { ...item, name: overwrittenName }
+ : item
+ }))
)
private selectedParcellation$: Observable<any>
@@ -389,8 +395,8 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
public selectParcellation(parc: any) {
this.store.dispatch(
- viewerStateSelectParcellation({
- selectParcellation: parc
+ viewerStateHelperSelectParcellationWithId({
+ payload: parc
})
)
}
diff --git a/src/atlasViewer/atlasViewer.constantService.service.ts b/src/atlasViewer/atlasViewer.constantService.service.ts
index c49765262..454a2c933 100644
--- a/src/atlasViewer/atlasViewer.constantService.service.ts
+++ b/src/atlasViewer/atlasViewer.constantService.service.ts
@@ -237,14 +237,15 @@ Interactive atlas viewer requires **webgl2.0**, and the \`EXT_color_buffer_float
]
public showHelpPerspectiveViewMap = this.showHelpPerspectiveDesktop
- /**
- * raise/track issues at github repo: <a target = "_blank" href = "${this.repoUrl}">${this.repoUrl}</a>
- */
-
- public supportEmailAddress = `inm1-bda@fz-juelich.de`
+ public repoUrl = `https://github.com/HumanBrainProject/interactive-viewer`
+ public supportEmailAddress = `support@ebrains.eu`
+ public docUrl = `https://interactive-viewer.readthedocs.io/en/latest/`
public showHelpSupportText: string = `Did you encounter an issue?
-Send us an email: <a target = "_blank" href = "mailto:${this.supportEmailAddress}">${this.supportEmailAddress}</a>`
+Send us an email: <a target = "_blank" href = "mailto:${this.supportEmailAddress}">${this.supportEmailAddress}</a>
+
+Raise/track issues at github repo: <a target = "_blank" href = "${this.repoUrl}">${this.repoUrl}</a>
+`
public incorrectParcellationNameSearchParam(title) {
return `The selected parcellation - ${title} - is not available. The the first parcellation of the template is selected instead.`
@@ -254,8 +255,6 @@ Send us an email: <a target = "_blank" href = "mailto:${this.supportEmailAddress
return `The selected template - ${title} - is not available.`
}
- private repoUrl = `https://github.com/HumanBrainProject/interactive-viewer`
-
constructor(
private store$: Store<IavRootStoreInterface>,
private http: HttpClient,
diff --git a/src/atlasViewer/atlasViewer.template.html b/src/atlasViewer/atlasViewer.template.html
index 5a000c2f4..9bf675aeb 100644
--- a/src/atlasViewer/atlasViewer.template.html
+++ b/src/atlasViewer/atlasViewer.template.html
@@ -143,10 +143,16 @@
let-parcel="parcel"
let-selected="selected"
let-dismissable="dismissable"
+ let-chipClass="class"
let-onclick="onclick">
- <mat-chip class="pe-all position-relative z-index-2" (click)="onclick && onclick()" [selected]="selected">
+ <mat-chip class="pe-all position-relative z-index-2 d-inline-flex justify-content-between"
+ [ngClass]="chipClass"
+ (click)="onclick && onclick()"
+ [selected]="selected">
- {{ parcel?.groupName ? (parcel?.groupName + ' - ') : '' }}{{ parcel?.name }}
+ <span>
+ {{ parcel?.groupName ? (parcel?.groupName + ' - ') : '' }}{{ parcel?.name }}
+ </span>
<!-- info icon -->
<ng-template [ngIf]="parcel?.originDatasets?.length > 0" [ngIfElse]="infoIconBasic">
@@ -198,6 +204,7 @@
parcel: parcVer,
selected: selectedParcellation && selectedParcellation['@id'] === parcVer['@id'],
dismissable: false,
+ class: 'w-100',
onclick: bindFns([
[ selectParcellation.bind(this), parcVer ],
[ layerVersionMenuTrigger.closeMenu.bind(layerVersionMenuTrigger) ]
diff --git a/src/index.html b/src/index.html
index 590bc0faf..96c74ac49 100644
--- a/src/index.html
+++ b/src/index.html
@@ -12,7 +12,7 @@
<link rel="stylesheet" href="theme.css">
<link rel="stylesheet" href="version.css">
- <script src="https://unpkg.com/kg-dataset-previewer@0.0.19/dist/kg-dataset-previewer/kg-dataset-previewer.js" defer>
+ <script src="https://unpkg.com/kg-dataset-previewer@1.0.6/dist/kg-dataset-previewer/kg-dataset-previewer.js" defer>
</script>
<title>Interactive Atlas Viewer</title>
diff --git a/src/theme.scss b/src/theme.scss
index 6b2576e1f..b2b1c43ca 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -15,6 +15,20 @@
[iv-custom-comp],
.iv-custom-comp
{
+
+ &[target="_blank"]
+ {
+ // TODO it seems unicode does not have an external link character.
+ // will have to use SVG as background image or something
+
+ // &::after
+ // {
+ // content: "";
+ // display: inline-block;
+
+ // }
+ }
+
&[card],
&.card
{
diff --git a/src/ui/databrowserModule/contributor/index.ts b/src/ui/databrowserModule/contributor/index.ts
new file mode 100644
index 000000000..7506f5e59
--- /dev/null
+++ b/src/ui/databrowserModule/contributor/index.ts
@@ -0,0 +1,2 @@
+export { IContributor } from './util'
+export { ContributorModule } from './module'
\ No newline at end of file
diff --git a/src/ui/databrowserModule/contributor/kgLink.pipe.ts b/src/ui/databrowserModule/contributor/kgLink.pipe.ts
new file mode 100644
index 000000000..ff0f2ebfb
--- /dev/null
+++ b/src/ui/databrowserModule/contributor/kgLink.pipe.ts
@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from "@angular/core";
+import { IContributor } from "./util";
+
+@Pipe({
+ name: 'getContributorKgLink'
+})
+
+export class GetContributorKgLink implements PipeTransform{
+ public transform(contributor: IContributor): string{
+ const id = contributor['identifier']
+ return `https://kg.ebrains.eu/search/instances/Contributor/${id}`
+ }
+}
diff --git a/src/ui/databrowserModule/contributor/module.ts b/src/ui/databrowserModule/contributor/module.ts
new file mode 100644
index 000000000..822f4583e
--- /dev/null
+++ b/src/ui/databrowserModule/contributor/module.ts
@@ -0,0 +1,13 @@
+import { NgModule } from "@angular/core";
+import { GetContributorKgLink } from "./kgLink.pipe";
+
+@NgModule({
+ declarations: [
+ GetContributorKgLink
+ ],
+ exports: [
+ GetContributorKgLink
+ ]
+})
+
+export class ContributorModule{}
\ No newline at end of file
diff --git a/src/ui/databrowserModule/contributor/util.ts b/src/ui/databrowserModule/contributor/util.ts
new file mode 100644
index 000000000..81bb67bfb
--- /dev/null
+++ b/src/ui/databrowserModule/contributor/util.ts
@@ -0,0 +1,10 @@
+/**
+ * as defined by interactiveViewerKgQuery-v1_0
+ */
+export interface IContributor{
+ ['@id']: string
+ ['shortName']: string
+ ['name']: string
+ ['schema.org/shortName']: string
+ ['identifier']: string
+}
\ No newline at end of file
diff --git a/src/ui/databrowserModule/databrowser.module.ts b/src/ui/databrowserModule/databrowser.module.ts
index 059ea3107..b941f8ce5 100644
--- a/src/ui/databrowserModule/databrowser.module.ts
+++ b/src/ui/databrowserModule/databrowser.module.ts
@@ -43,6 +43,7 @@ import { FilterPreviewByType } from "./preview/filterPreview.pipe";
import { PreviewCardComponent } from "./preview/previewCard/previewCard.component";
import { LayerBrowserModule } from "../layerbrowser";
import { DatabrowserDirective } from "./databrowser/databrowser.directive";
+import { ContributorModule } from "./contributor";
const previewEmitFactory = ( overrideFn: (file: any, dataset: any) => void) => {
@@ -59,6 +60,7 @@ const previewEmitFactory = ( overrideFn: (file: any, dataset: any) => void) => {
UtilModule,
AngularMaterialModule,
LayerBrowserModule,
+ ContributorModule,
],
declarations: [
DataBrowser,
diff --git a/src/ui/databrowserModule/singleDataset/detailedView/singleDataset.template.html b/src/ui/databrowserModule/singleDataset/detailedView/singleDataset.template.html
index cf98554f9..617182ba4 100644
--- a/src/ui/databrowserModule/singleDataset/detailedView/singleDataset.template.html
+++ b/src/ui/databrowserModule/singleDataset/detailedView/singleDataset.template.html
@@ -44,9 +44,12 @@
<!-- contributors, if publications not available -->
<ng-container *ngIf="publications && publications.length == 0 && contributors && contributors.length > 0">
- <i class="small" *ngFor="let contributor of contributors; let lastFlag = last;">
- {{ contributor }}{{ lastFlag ? '' : ',' }}
- </i>
+ <ng-container *ngFor="let contributor of contributors; let lastFlag = last;">
+ <a [href]="contributor | getContributorKgLink" class="iv-custom-comp" target="_blank">
+ {{ contributor['schema.org/shortName'] || contributor['shortName'] || contributor['name'] }}
+ </a>
+ <span *ngIf="!lastFlag">,</span>
+ </ng-container>
</ng-container>
</mat-card-content>
diff --git a/src/ui/databrowserModule/singleDataset/singleDataset.base.ts b/src/ui/databrowserModule/singleDataset/singleDataset.base.ts
index 2847d1428..4ff7e76f0 100644
--- a/src/ui/databrowserModule/singleDataset/singleDataset.base.ts
+++ b/src/ui/databrowserModule/singleDataset/singleDataset.base.ts
@@ -11,6 +11,7 @@ import { MatSnackBar } from "@angular/material/snack-bar";
import { ARIA_LABELS } from 'common/constants'
import { switchMap, catchError, distinctUntilChanged, filter } from "rxjs/operators";
+import { IContributor } from "../contributor";
export {
DatabrowserService,
@@ -34,7 +35,7 @@ export class SingleDatasetBase implements OnChanges, OnDestroy {
@Input() public description?: string
@Input() public publications?: IPublication[]
- @Input() public contributors: any[] = []
+ @Input() public contributors: IContributor[] = []
public fetchFlag = false
private _fullId: string
diff --git a/src/ui/help/help.component.ts b/src/ui/help/help.component.ts
index d731cba18..af6c46dff 100644
--- a/src/ui/help/help.component.ts
+++ b/src/ui/help/help.component.ts
@@ -12,26 +12,20 @@ import { AtlasViewerConstantsServices } from 'src/atlasViewer/atlasViewer.consta
export class HelpComponent {
- public generalHelp
- public sliceviewHelp
- public perspectiveviewHelp
- public supportText
+ public generalHelp = this.constantService.showHelpGeneralMap
+ public sliceviewHelp = this.constantService.showHelpSliceViewMap
+ public perspectiveviewHelp = this.constantService.showHelpPerspectiveViewMap
+ public supportText = this.sanitizer.bypassSecurityTrustHtml(this.constantService.showHelpSupportText)
- public contactEmailHref: string
- public contactEmail: string
+ public contactEmailHref: string = `mailto:${this.constantService.supportEmailAddress}?Subject=[InteractiveAtlasViewer]%20Queries`
+ public supportEmailAddress: string = this.constantService.supportEmailAddress
- public userDoc: string = `docs/`
+ public userDoc: string = this.constantService.docUrl
+ public repoUrl = this.constantService.repoUrl
constructor(
private constantService: AtlasViewerConstantsServices,
private sanitizer: DomSanitizer,
) {
- this.generalHelp = this.constantService.showHelpGeneralMap
- this.sliceviewHelp = this.constantService.showHelpSliceViewMap
- this.perspectiveviewHelp = this.constantService.showHelpPerspectiveViewMap
- this.supportText = this.sanitizer.bypassSecurityTrustHtml(this.constantService.showHelpSupportText)
-
- this.contactEmailHref = `mailto:${this.constantService.supportEmailAddress}?Subject=[InteractiveAtlasViewer]%20Queries`
- this.contactEmail = this.constantService.supportEmailAddress
}
}
diff --git a/src/ui/help/help.template.html b/src/ui/help/help.template.html
index bc5f804ec..9a9169afd 100644
--- a/src/ui/help/help.template.html
+++ b/src/ui/help/help.template.html
@@ -10,11 +10,20 @@
</button>
</a>
+ <a [href]="repoUrl" target="_blank">
+ <button mat-flat-button>
+ <i class="fab fa-github"></i>
+ <span>
+ Github
+ </span>
+ </button>
+ </a>
+
<a [href]="contactEmailHref">
<button mat-flat-button>
<i class="fas fa-at"></i>
<span>
- {{ contactEmail }}
+ {{ supportEmailAddress }}
</span>
</button>
</a>
diff --git a/src/ui/nehubaContainer/nehubaContainer.template.html b/src/ui/nehubaContainer/nehubaContainer.template.html
index 25bd2d65b..a9296fa60 100644
--- a/src/ui/nehubaContainer/nehubaContainer.template.html
+++ b/src/ui/nehubaContainer/nehubaContainer.template.html
@@ -71,7 +71,7 @@
'lighttheme': iavRegion.rgbDarkmode === false
}"
[style.backgroundColor]="iavRegion?.rgbString || 'accent'">
- <span>
+ <span class="text iv-custom-comp">
Explore
</span>
diff --git a/src/ui/nehubaContainer/nehubaViewer/nehubaViewer.component.ts b/src/ui/nehubaContainer/nehubaViewer/nehubaViewer.component.ts
index 846ac4adc..aa70b00af 100644
--- a/src/ui/nehubaContainer/nehubaViewer/nehubaViewer.component.ts
+++ b/src/ui/nehubaContainer/nehubaViewer/nehubaViewer.component.ts
@@ -11,6 +11,7 @@ import { getExportNehuba, getViewer, setNehubaViewer } from "src/util/fn";
import '!!file-loader?context=third_party&name=main.bundle.js!export-nehuba/dist/min/main.bundle.js'
import '!!file-loader?context=third_party&name=chunk_worker.bundle.js!export-nehuba/dist/min/chunk_worker.bundle.js'
import { scanSliceViewRenderFn } from "../util";
+import { intToRgb as intToColour } from 'common/util'
const NG_LANDMARK_LAYER_NAME = 'spatial landmark layer'
const NG_USER_LANDMARK_LAYER_NAME = 'user landmark layer'
@@ -957,27 +958,6 @@ const patchSliceViewPanel = (sliceViewPanel: any) => {
}
}
-/**
- *
- * https://stackoverflow.com/a/16348977/6059235
- */
-const intToColour = function(int) {
- if (int >= 65500) {
- return [255, 255, 255]
- }
- const str = String(int * 65535)
- let hash = 0
- for (let i = 0; i < str.length; i++) {
- hash = str.charCodeAt(i) + ((hash << 5) - hash);
- }
- const returnV = []
- for (let i = 0; i < 3; i++) {
- const value = (hash >> (i * 8)) & 0xFF;
- returnV.push(value)
- }
- return returnV
-}
-
export interface ViewerState {
orientation: [number, number, number, number]
perspectiveOrientation: [number, number, number, number]
diff --git a/src/ui/parcellationRegion/region.base.ts b/src/ui/parcellationRegion/region.base.ts
index 88fe881e3..ade02dd17 100644
--- a/src/ui/parcellationRegion/region.base.ts
+++ b/src/ui/parcellationRegion/region.base.ts
@@ -7,6 +7,7 @@ import { ARIA_LABELS } from 'common/constants'
import { flattenRegions, getIdFromFullId, rgbToHsl } from 'common/util'
import { viewerStateSetConnectivityRegion, viewerStateNavigateToRegion, viewerStateToggleRegionSelect } from "src/services/state/viewerState.store.helper";
import { viewerStateGetSelectedAtlas } from "src/services/state/viewerState/selectors";
+import { intToRgb } from 'common/util'
export class RegionBase {
@@ -20,10 +21,11 @@ export class RegionBase {
this._region = val
this.region$.next(this._region)
if (!this._region) return
- if (!this._region.rgb) return
- this.rgbString = `rgb(${this._region.rgb.join(',')})`
- const [h, s, l] = rgbToHsl(...this._region.rgb)
- this.rgbDarkmode = l < 0.4
+
+ const rgb = this._region.rgb || (this._region.labelIndex && intToRgb(Number(this._region.labelIndex))) || [255, 200, 200]
+ this.rgbString = `rgb(${rgb.join(',')})`
+ const [_h, _s, l] = rgbToHsl(...rgb)
+ this.rgbDarkmode = l < 0.65
}
get region(){
--
GitLab