From 99635bfd35c5ca255ac19260526b4d8e1a1ca493 Mon Sep 17 00:00:00 2001
From: Xiao Gui <xgui3783@gmail.com>
Date: Wed, 11 Nov 2020 12:53:39 +0100
Subject: [PATCH] feat: reworked recording explorer
---
deploy/regionalFeatures/index.js | 3 +-
src/res/css/extra_styles.css | 30 +++++++++++++
.../sideNavView/sDsSideNavView.template.html | 43 +++++++++++--------
.../nehubaContainer/nehubaContainer.style.css | 9 ----
.../nehubaContainer.template.html | 14 +++---
.../featureExplorer.template.html | 36 ++++++++++++----
.../viewerState.useEffect.ts | 5 +--
7 files changed, 94 insertions(+), 46 deletions(-)
diff --git a/deploy/regionalFeatures/index.js b/deploy/regionalFeatures/index.js
index 7c72704f6..009125ea4 100644
--- a/deploy/regionalFeatures/index.js
+++ b/deploy/regionalFeatures/index.js
@@ -64,11 +64,12 @@ Promise.all(
const dataIdToDataMap = new Map()
datasetIdToDataMap.set(datasetId, dataIdToDataMap)
- for (const { ['@id']: dataId, contact_points: contactPoints, referenceSpaces } of data) {
+ for (const { ['@id']: dataId, contact_points: contactPoints, referenceSpaces, ...rest } of data) {
dataIdToDataMap.set(dataId, {
['@id']: dataId,
contactPoints,
referenceSpaces,
+ ...rest
})
}
rs()
diff --git a/src/res/css/extra_styles.css b/src/res/css/extra_styles.css
index 0d07ed8da..e6e394ac8 100644
--- a/src/res/css/extra_styles.css
+++ b/src/res/css/extra_styles.css
@@ -403,6 +403,11 @@ markdown-dom pre code
height:20em!important;
}
+.overflow-x-auto
+{
+ overflow-x: auto;
+}
+
.overflow-x-scroll
{
overflow-x: scroll;
@@ -439,6 +444,11 @@ markdown-dom pre code
width: 1em;
}
+.bs-border-box
+{
+ box-sizing: border-box;
+}
+
.bs-content-box
{
box-sizing: content-box;
@@ -719,6 +729,26 @@ kg-dataset-previewer > img
opacity: 1.0;
}
+.ml-15px-n
+{
+ margin-left: -15px!important;
+}
+
+.mr-15px-n
+{
+ margin-right: -15px!important;
+}
+
+.ml-24px-n
+{
+ margin-left: -24px!important;
+}
+
+.mr-24px-n
+{
+ margin-right: -24px!important;
+}
+
.ml-4-n
{
margin-left: -1rem!important;
diff --git a/src/ui/databrowserModule/singleDataset/sideNavView/sDsSideNavView.template.html b/src/ui/databrowserModule/singleDataset/sideNavView/sDsSideNavView.template.html
index 5e0179a2f..c9fceb2e7 100644
--- a/src/ui/databrowserModule/singleDataset/sideNavView/sDsSideNavView.template.html
+++ b/src/ui/databrowserModule/singleDataset/sideNavView/sDsSideNavView.template.html
@@ -52,21 +52,27 @@
</mat-card-subtitle>
</div>
- <mat-card-content class="mt-2">
- <mat-tab-group>
- <!-- details -->
- <mat-tab>
- <ng-template mat-tab-label>
- Details
- </ng-template>
- <ng-template matTabContent>
+ <mat-card-content class="mt-2 ml-15px-n mr-15px-n">
+ <mat-accordion>
+
+ <!-- Details -->
+ <mat-expansion-panel hideToggle
+ [expanded]="true">
+ <mat-expansion-panel-header>
+ <mat-panel-title>
+ Details
+ </mat-panel-title>
+ </mat-expansion-panel-header>
+
+
+ <ng-template matExpansionPanelContent>
<small class="m-1">
<markdown-dom [markdown]="description">
</markdown-dom>
</small>
</ng-template>
- </mat-tab>
+ </mat-expansion-panel>
<!-- features -->
<div class="hidden"
@@ -77,20 +83,23 @@
</div>
<ng-container *ngFor="let feature of (rfGetAllFeatures.features | filterRegionFeaturesById : fullId)">
- <mat-tab>
- <ng-template mat-tab-label>
- {{ feature.type }}
- </ng-template>
- <ng-template matTabContent>
+ <mat-expansion-panel hideToggle>
+ <mat-expansion-panel-header>
+ <mat-panel-title>
+ {{ feature.type }}
+ </mat-panel-title>
+ </mat-expansion-panel-header>
+
+ <ng-template matExpansionPanelContent>
<feature-explorer [feature]="feature"
[region]="region$ | async">
-
+
</feature-explorer>
</ng-template>
- </mat-tab>
+ </mat-expansion-panel>
</ng-container>
+ </mat-accordion>
- </mat-tab-group>
</mat-card-content>
</mat-card>
diff --git a/src/ui/nehubaContainer/nehubaContainer.style.css b/src/ui/nehubaContainer/nehubaContainer.style.css
index f5100b683..769f2ab23 100644
--- a/src/ui/nehubaContainer/nehubaContainer.style.css
+++ b/src/ui/nehubaContainer/nehubaContainer.style.css
@@ -102,15 +102,6 @@ div#scratch-pad
background-color: rgba(0, 0, 0, 0.7);
}
-.side-nav-cover
-{
-
- margin-left: -15px;
- margin-right: -15px;
-
- box-sizing: border-box;
-}
-
.feature-card
{
diff --git a/src/ui/nehubaContainer/nehubaContainer.template.html b/src/ui/nehubaContainer/nehubaContainer.template.html
index 1c9c490c1..7cb435de9 100644
--- a/src/ui/nehubaContainer/nehubaContainer.template.html
+++ b/src/ui/nehubaContainer/nehubaContainer.template.html
@@ -153,7 +153,7 @@
<single-dataset-sidenav-view *ngFor="let id of shownDatasetId"
(clear)="clearPreviewingDataset(id)"
[fullId]="id"
- class="side-nav-cover">
+ class="bs-border-box ml-15px-n mr-15px-n">
<mat-chip *ngIf="regionOfInterest$ && regionOfInterest$ | async as region"
region-of-interest
iav-region
@@ -272,7 +272,7 @@
<ng-template #sidenavDsPreviewTmpl let-file="file" let-filename="filename" let-datasetId="datasetId">
<div class="w-100 flex-grow-1 d-flex flex-column">
- <preview-card class="d-block side-nav-cover flex-grow-1"
+ <preview-card class="d-block bs-border-box ml-15px-n mr-15px-n flex-grow-1"
[attr.aria-label]="ARIA_LABEL_ADDITIONAL_VOLUME_CONTROL"
[datasetId]="datasetId"
[filename]="filename">
@@ -329,7 +329,7 @@
<!-- region tmpl placeholder -->
<ng-template #regionPlaceholderTmpl>
- <div class="placeholder-region-detail side-nav-cover mat-elevation-z4">
+ <div class="placeholder-region-detail bs-border-box ml-15px-n mr-15px-n mat-elevation-z4">
<span class="text-muted">
Select a region by clicking on the viewer or search from above
</span>
@@ -384,11 +384,11 @@
[region]="{
name: CONST.MULTI_REGION_SELECTION
}"
- class="side-nav-cover mat-elevation-z4">
+ class="bs-border-box ml-15px-n mr-15px-n mat-elevation-z4">
</region-menu>
<!-- other regions detail accordion -->
- <mat-accordion class="side-nav-cover mt-2">
+ <mat-accordion class="bs-border-box ml-15px-n mr-15px-n mt-2">
<!-- regional features-->
<ng-template #regionalFeaturesTmpl>
@@ -455,13 +455,13 @@
<region-menu
[showRegionInOtherTmpl]="false"
[region]="region"
- class="side-nav-cover mat-elevation-z4">
+ class="bs-border-box ml-15px-n mr-15px-n mat-elevation-z4">
</region-menu>
</ng-container>
<!-- other region detail accordion -->
<mat-accordion *ngIf="region"
- class="side-nav-cover mt-2"
+ class="bs-border-box ml-15px-n mr-15px-n mt-2"
iav-region
[region]="region"
#iavRegion="iavRegion">
diff --git a/src/ui/regionalFeatures/featureExplorer/featureExplorer.template.html b/src/ui/regionalFeatures/featureExplorer/featureExplorer.template.html
index 06f519eb2..59d2d5805 100644
--- a/src/ui/regionalFeatures/featureExplorer/featureExplorer.template.html
+++ b/src/ui/regionalFeatures/featureExplorer/featureExplorer.template.html
@@ -1,6 +1,7 @@
<ng-container *ngIf="!dataIsLoading; else loadingTmpl">
<mat-accordion
+ class="ml-24px-n mr-24px-n d-block"
regional-feature-interactiviity
(rf-interact-onclick-3d-landmark)="handleLandmarkClick($event)"
#interactDir="regionalFeatureInteractivity">
@@ -8,7 +9,7 @@
[expanded]="(exploreElectrode$ | async | getProperty : '_' | getProperty : 'electrodeId') === datum['@id']"
(opened)="handleDatumExpansion(datum['@id'], true)"
(closed)="handleDatumExpansion(datum['@id'], false)"
- hideToggle>
+ togglePosition="before">
<mat-expansion-panel-header>
<mat-panel-title>
Electrode
@@ -18,14 +19,31 @@
</mat-panel-description>
</mat-expansion-panel-header>
- <span>
- contact points
- </span>
- <mat-list>
- <mat-list-item *ngFor="let contactPt of datum['contactPoints']">
- {{ contactPt.position | addUnitAndJoin : '' }}
- </mat-list-item>
- </mat-list>
+ <label for="task-list" class="d-block mat-h4 mt-4 text-muted">
+ Tasks
+ </label>
+ <section class="d-flex align-items-center mt-1">
+ <section id="task-list" class="flex-grow-1 flex-shrink-1 overflow-x-auto">
+ <div role="list" class="ws-no-wrap">
+ <mat-chip *ngFor="let task of datum['tasks']" class="ml-1">
+ {{ task }}
+ </mat-chip>
+ </div>
+ </section>
+ </section>
+
+ <label for="contact-points-list" class="d-block mat-h4 mt-4 text-muted">
+ Contact Points
+ </label>
+ <section class="d-flex align-items-center mt-1">
+ <section id="contact-points-list" class="flex-grow-1 flex-shrink-1 overflow-x-auto">
+ <div role="list" class="ws-no-wrap">
+ <mat-chip *ngFor="let contactPt of datum['contactPoints']" class="ml-1">
+ {{ contactPt.position | addUnitAndJoin : '' }}
+ </mat-chip>
+ </div>
+ </section>
+ </section>
</mat-expansion-panel>
</mat-accordion>
diff --git a/src/ui/viewerStateController/viewerState.useEffect.ts b/src/ui/viewerStateController/viewerState.useEffect.ts
index b8bad8cb0..f5ed55c04 100644
--- a/src/ui/viewerStateController/viewerState.useEffect.ts
+++ b/src/ui/viewerStateController/viewerState.useEffect.ts
@@ -3,7 +3,7 @@ import { Actions, Effect, ofType } from "@ngrx/effects";
import { Action, select, Store } from "@ngrx/store";
import { Observable, Subscription, of, merge } from "rxjs";
import { distinctUntilChanged, filter, map, shareReplay, withLatestFrom, switchMap, mapTo, startWith } from "rxjs/operators";
-import { CHANGE_NAVIGATION, FETCHED_TEMPLATE, IavRootStoreInterface, NEWVIEWER, SELECT_PARCELLATION, SELECT_REGIONS, generalActionError } from "src/services/stateStore.service";
+import { CHANGE_NAVIGATION, FETCHED_TEMPLATE, IavRootStoreInterface, SELECT_PARCELLATION, SELECT_REGIONS, generalActionError } from "src/services/stateStore.service";
import { VIEWERSTATE_CONTROLLER_ACTION_TYPES } from "./viewerState.base";
import { TemplateCoordinatesTransformation } from "src/services/templateCoordinatesTransformation.service";
import { CLEAR_STANDALONE_VOLUMES } from "src/services/state/viewerState.store";
@@ -116,12 +116,11 @@ export class ViewerStateControllerUseEffect implements OnDestroy {
)
/**
- * on clear of region selected, also clear selected dataset ids
+ * on region selected change (clear, select, or change selection), clear selected dataset ids
*/
@Effect()
public clearShownDatasetIdOnRegionClear: Observable<any> = this.store$.pipe(
select(viewerStateSelectedRegionsSelector),
- filter(r => r.length === 0),
mapTo(
uiActionHideAllDatasets()
)
--
GitLab