Skip to content

Commit

Permalink
assets-27 #27 get studies with new endpoint, works for points only so…
Browse files Browse the repository at this point in the history 
… far
  • Loading branch information
@TIL-EBP
TIL-EBP committed Apr 11, 2024
1 parent 5ec7845 commit 3a38885
Show file tree
Hide file tree
Showing 5 changed files with 128 additions and 83 deletions.
3 changes: 2 additions & 1 deletion libs/asset-viewer/src/lib/asset-viewer.module.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
Expand Down Expand Up @@ -90,6 +90,7 @@ import { assetViewerReducer } from './state/asset-viewer.reducer';
DrawerComponent,
DrawerPanelComponent,
DatepickerToggleIconComponent,
FormsModule,
],
providers: [
{ provide: MAT_DATE_LOCALE, useValue: de },
Expand Down
115 changes: 59 additions & 56 deletions libs/asset-viewer/src/lib/components/asset-viewer-page/asset-viewer-page.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,68 @@
<asset-sg-map
[rdStudies$]="rdStudies$"
[rdCurrentAssetDetail$]="rdCurrentAssetDetail$"
[searchPolygon$]="searchPolygon$"
[highlightAssetStudies]="highlightAssetStudies$"
(polygonChanged)="polygonChanged$.next($event)"
(assetClicked)="assetClicked$.next($event)"
(mapInitialised)="handleMapInitialised()"></asset-sg-map>
[rdStudies$]="rdStudies$"
[rdCurrentAssetDetail$]="rdCurrentAssetDetail$"
[searchPolygon$]="searchPolygon$"
[highlightAssetStudies]="highlightAssetStudies$"
(studiesSelected)="doSearch($event)"
(mapInitialised)="handleMapInitialised()"></asset-sg-map>


<!-- (assetClicked)="geometryFilter = { point: $event }" -->

<asset-sg-asset-picker
[assets]="assetsForPicker$"
[currentAssetId]="currentAssetId$"
(assetMouseOver)="highlightAssetStudies$.next($event)" />
[assets]="assetsForPicker$"
[currentAssetId]="currentAssetId$"
(assetMouseOver)="highlightAssetStudies$.next($event)" />

<ng-template #templateAppBarPortalContent>
<input
#searchInput
class="search-input"
[placeholder]="'search.textSearchFieldPlaceholder' | translate"
(keydown)="_searchTextKeyDown$.next($event)" />
<input
#searchInput
class="search-input"
[(ngModel)]="searchQuery"
(keydown)="handleSearchKey($event)"
[placeholder]="'search.textSearchFieldPlaceholder' | translate" />
</ng-template>

<ng-template #templateDrawerPortalContent>
<asset-sg-drawer *rxLet="drawerState$ | push; let drawerState">
<asset-sg-drawer-panel
widthPercentageOfViewPanel="0.2"
[display]="drawerState.showRefineOrStartSearch === 'show-refine'">
<asset-sg-asset-search-refine
[style.visibility]="drawerState.showRefineOrStartSearch === 'show-refine' ? 'visible' : 'hidden'"
[rdRefineVM$]="rdRefineVM$"
[rdReferenceDataVM$]="rdReferenceDataVM$"
[searchPolygon$]="searchPolygon$"
(refinementChanged)="refinementChanged$.next($event)"
(removePolygon)="removePolygon$.next()" />
</asset-sg-drawer-panel>
<asset-sg-drawer-panel widthPercentageOfViewPanel="0.2" [display]="drawerState.showResults">
<asset-sg-asset-search-results
[style.visibility]="drawerState.showResults ? 'visible' : 'hidden'"
[rdAssets$]="rdSearchAssets$"
(closeSearchResultsClicked)="closeSearchResultsClicked$.next($event)"
(assetMouseOver)="highlightAssetStudies$.next($event)"
[currentAssetId$]="currentAssetId$" />
</asset-sg-drawer-panel>
<asset-sg-drawer-panel
widthPercentageOfViewPanel="0.2"
[display]="drawerState.showRefineOrStartSearch === 'show-start-search'">
<div class="flex flex-column pl-2">
<button
asset-sg-icon-button
class="self-end mt-4 mr-4"
[attr.aria-label]="'search.closeInstructions' | translate"
(click)="closeInstructions$.next()">
<svg-icon key="close"></svg-icon>
</button>
<h3 translate class="mt-0">search.searchInstructionsHeading</h3>
<p translate class="m-0 mr-4">search.searchInstructions</p>
</div>
</asset-sg-drawer-panel>
<asset-sg-drawer-panel widthPercentageOfViewPanel="0.3" [display]="drawerState.showDetail">
<asset-sg-asset-search-detail
[style.visibility]="drawerState.showDetail ? 'visible' : 'hidden'"
[rdAssetDetail$]="rdCurrentAssetDetail$" />
</asset-sg-drawer-panel>
</asset-sg-drawer>
<asset-sg-drawer *rxLet="drawerState$ | push; let drawerState">
<asset-sg-drawer-panel
widthPercentageOfViewPanel="0.2"
[display]="drawerState.showRefineOrStartSearch === 'show-refine'">
<asset-sg-asset-search-refine
[style.visibility]="drawerState.showRefineOrStartSearch === 'show-refine' ? 'visible' : 'hidden'"
[rdRefineVM$]="rdRefineVM$"
[rdReferenceDataVM$]="rdReferenceDataVM$"
[searchPolygon$]="searchPolygon$"
(refinementChanged)="refinementChanged$.next($event)"
(removePolygon)="removePolygon$.next()" />
</asset-sg-drawer-panel>
<asset-sg-drawer-panel widthPercentageOfViewPanel="0.2" [display]="drawerState.showResults">
<asset-sg-asset-search-results
[style.visibility]="drawerState.showResults ? 'visible' : 'hidden'"
[rdAssets$]="rdSearchAssets$"
(closeSearchResultsClicked)="closeSearchResultsClicked$.next($event)"
(assetMouseOver)="highlightAssetStudies$.next($event)"
[currentAssetId$]="currentAssetId$" />
</asset-sg-drawer-panel>
<asset-sg-drawer-panel
widthPercentageOfViewPanel="0.2"
[display]="drawerState.showRefineOrStartSearch === 'show-start-search'">
<div class="flex flex-column pl-2">
<button
asset-sg-icon-button
class="self-end mt-4 mr-4"
[attr.aria-label]="'search.closeInstructions' | translate"
(click)="closeInstructions$.next()">
<svg-icon key="close"></svg-icon>
</button>
<h3 translate class="mt-0">search.searchInstructionsHeading</h3>
<p translate class="m-0 mr-4">search.searchInstructions</p>
</div>
</asset-sg-drawer-panel>
<asset-sg-drawer-panel widthPercentageOfViewPanel="0.3" [display]="drawerState.showDetail">
<asset-sg-asset-search-detail
[style.visibility]="drawerState.showDetail ? 'visible' : 'hidden'"
[rdAssetDetail$]="rdCurrentAssetDetail$" />
</asset-sg-drawer-panel>
</asset-sg-drawer>
</ng-template>
41 changes: 17 additions & 24 deletions libs/asset-viewer/src/lib/components/asset-viewer-page/asset-viewer-page.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { ENTER } from '@angular/cdk/keycodes';
import { TemplatePortal } from '@angular/cdk/portal';
import {
ApplicationRef,
Expand All @@ -17,7 +16,6 @@ import * as RD from '@devexperts/remote-data-ts';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { Store } from '@ngrx/store';
import * as A from 'fp-ts/Array';
import { flow } from 'fp-ts/function';
import { Eq as eqNumber } from 'fp-ts/number';
import * as O from 'fp-ts/Option';
import {
Expand All @@ -44,12 +42,12 @@ import {
LifecycleHooksDirective,
} from '@asset-sg/client-shared';
import { isTruthy, ORD, rdSequenceProps } from '@asset-sg/core';

Check failure on line 44 in libs/asset-viewer/src/lib/components/asset-viewer-page/asset-viewer-page.component.ts

View workflow job for this annotation

GitHub Actions / Build and run tests 

Member 'ORD' of the import declaration should be sorted alphabetically
import { LV95 } from '@asset-sg/shared';

import { BaseClientAssetSearchRefinement } from '../../models';
import * as actions from '../../state/asset-viewer.actions';
import { AppStateWithAssetViewer } from '../../state/asset-viewer.reducer';
import * as fromAssetViewer from '../../state/asset-viewer.selectors';
import { AssetSearchService } from '../../services/asset-search.service';

Check failure on line 50 in libs/asset-viewer/src/lib/components/asset-viewer-page/asset-viewer-page.component.ts

View workflow job for this annotation

GitHub Actions / Build and run tests 

`../../services/asset-search.service` import should occur before import of `../../state/asset-viewer.actions`

@UntilDestroy()
@Component({
Expand Down Expand Up @@ -86,25 +84,18 @@ export class AssetViewerPageComponent {
public refinementChanged$ = new Subject<O.Option<BaseClientAssetSearchRefinement>>();
public removePolygon$ = new Subject<void>();

public _searchTextKeyDown$ = new Subject<KeyboardEvent>();
private _searchTextChanged$ = this._searchTextKeyDown$.pipe(
filter(ev => ev.keyCode === ENTER),
map(ev => {
const value = (ev.target as HTMLInputElement).value;
return value ? O.some(value) : O.none;
}),
);

public polygonChanged$ = new Subject<LV95[]>();
public assetClicked$ = new Subject<number[]>();
public closeSearchResultsClicked$ = new Subject<void>();
public closeInstructions$ = new Subject<void>();

public assetsForPicker$: Observable<fromAssetViewer.SearchAssetVM[]>;

public highlightAssetStudies$ = new Subject<O.Option<number>>();

constructor() {
public assetClicked$ = new Subject<number[]>();
searchQuery = '';
selectedStudyIds: string[] = [];

constructor(private readonly assetSearchService: AssetSearchService) {
const setupPortals$ = this._lc.afterViewInit$.pipe(
observeOn(asyncScheduler),
switchMap(
Expand Down Expand Up @@ -165,15 +156,6 @@ export class AssetViewerPageComponent {
this.closeSearchResultsClicked$.pipe(map(() => actions.closeRefineAndResults())),
this.closeInstructions$.pipe(map(() => appSharedStateActions.closePanel())),
this.refinementChanged$.pipe(map(refinement => actions.refine({ refinement }))),
this._searchTextChanged$.pipe(
map(
flow(
O.map(text => actions.searchByText({ text })),
O.getOrElseW(() => actions.clearSearchText()),
),
),
),
this.polygonChanged$.pipe(map(polygon => actions.searchByPolygon({ polygon }))),
this.removePolygon$.pipe(map(() => actions.removePolygon())),
)
.pipe(untilDestroyed(this))
Expand All @@ -187,4 +169,15 @@ export class AssetViewerPageComponent {
});
});
}

public handleSearchKey(event: KeyboardEvent) {
if (event.key === 'Enter') {
this.doSearch(this.selectedStudyIds);
}
}

public doSearch(filter: string[]) {
this.selectedStudyIds = filter;
this.assetSearchService.searchByStudyIds(filter).subscribe();
}
}
39 changes: 38 additions & 1 deletion libs/asset-viewer/src/lib/components/map/map.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@ const initialMapState: MapState = {
export class MapComponent {
@ViewChild('map', { static: true }) mapDiv!: ElementRef<HTMLDivElement>;
@Output('polygonChanged') public polygonChanged$ = new EventEmitter<LV95[]>();
@Output('studiesSelected') public studiesSelected$ = new EventEmitter<string[]>();

private _lc = inject(LifecycleHooks);
private _dcmnt = inject(DOCUMENT);
Expand Down Expand Up @@ -452,6 +453,39 @@ export class MapComponent {
)
.subscribe(this.assetClicked$);

// const dragBox = new DragBox({
// condition: platformModifierKeyOnly,
// });
//
// dragBox.on('boxend', event => {
// const extent = dragBox.getGeometry().getExtent();
// vectorSourceAllStudies.forEachFeature(f => {
// const geometry = f.getGeometry();
// if (geometry && geometry.intersectsExtent(extent)) {
// clickSelect.getFeatures().push(f);
// console.log(clickSelect.getFeatures().getArray());
// }
// });
// });
// olMap.addInteraction(dragBox);
//
// fromEventPattern(
// h => clickSelect.on('select', h),
// h => clickSelect.un('select', h),
// )
// .pipe(
// withLatestFrom(this.state.select('selectionMode')),
// filter(([, selectionMode]) => selectionMode),
// map(([event]) => {
// console.log('event', event);
// zoomControlsInstance.setSelectionMode(false);
// return event;
// }),
// )
// .subscribe(event => {
// console.log('event2', event);
// });

fromEventPattern<MapBrowserEvent<PointerEvent>>(
h => olMap.on('click', h),
h => olMap.un('click', h),
Expand Down Expand Up @@ -491,7 +525,10 @@ export class MapComponent {
);
}),
)
.subscribe(ss => console.log(ss));
.subscribe(ss => {
this.studiesSelected$.emit(ss);
console.log(ss);
});

this.state
.select(['highlightAssetStudies', 'rdStudies'], ({ rdStudies, highlightAssetStudies }) =>
Expand Down
13 changes: 12 additions & 1 deletion libs/asset-viewer/src/lib/services/asset-search.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import queryString from 'query-string';
import { map, startWith } from 'rxjs';

import { ApiError, httpErrorResponseError } from '@asset-sg/client-shared';
import { OE, ORD, decodeError } from '@asset-sg/core';
import { decodeError, OE, ORD } from '@asset-sg/core';
import { AssetSearchParamsOld, LV95, ReferenceData } from '@asset-sg/shared';

import { AssetDetail, SearchAssetResultClient, SearchAssetResultClientDecoder } from '../models';
Expand Down Expand Up @@ -47,6 +47,17 @@ export class AssetSearchService {
);
}

public searchByStudyIds(studyIds: string[]): ORD.ObservableRemoteData<ApiError, SearchAssetResultClient> {
return this._httpClient
.post('/api/assets', { ids: studyIds })
.pipe(
map(flow(SearchAssetResultClientDecoder.decode, E.mapLeft(decodeError))),
OE.catchErrorW(httpErrorResponseError),
map(RD.fromEither),
startWith(RD.pending),
);
}

public searchByPolygonRefineBySearchText(
polygon: LV95[],
searchText: string,
Expand Down

0 comments on commit 3a38885

Please sign in to comment.