From 7aab9877824a36e720fe3273b877d3e75738da63 Mon Sep 17 00:00:00 2001 From: Ara Winters Date: Mon, 17 Jun 2024 17:50:32 -0700 Subject: [PATCH] #627 integration fixes --- .../data-table/src/app/app.component.html | 10 +-- examples/data-table/src/app/app.component.ts | 56 ++++++++---- examples/data-table/src/styles.scss | 49 ++++++++++- .../sz-cross-source-statistics.component.ts | 85 +++++++------------ src/public-api.ts | 9 ++ 5 files changed, 131 insertions(+), 78 deletions(-) diff --git a/examples/data-table/src/app/app.component.html b/examples/data-table/src/app/app.component.html index 2871b22b..91e7893b 100644 --- a/examples/data-table/src/app/app.component.html +++ b/examples/data-table/src/app/app.component.html @@ -4,14 +4,14 @@ -
Loading!!!
- + showTableLoadingSpinner="true" + (cellClick)="onCellClick($event)" + (entityIdClick)="onEntityIdClick($event)"> + +
diff --git a/examples/data-table/src/app/app.component.ts b/examples/data-table/src/app/app.component.ts index da716650..c1cc68e9 100644 --- a/examples/data-table/src/app/app.component.ts +++ b/examples/data-table/src/app/app.component.ts @@ -1,4 +1,4 @@ -import { Component, AfterViewInit, ViewChild, ElementRef, ViewContainerRef, TemplateRef, Input, OnDestroy } from '@angular/core'; +import { Component, AfterViewInit, ViewChild, ElementRef, ViewContainerRef, TemplateRef, Input, OnDestroy, Inject } from '@angular/core'; import { SzAlertMessageDialog, SzDataMartService, @@ -11,11 +11,13 @@ import { SzEntitiesPage } from '@senzing/sdk-components-ng'; -import { tap, filter, take } from 'rxjs/operators'; +import { tap, filter, take, takeUntil } from 'rxjs/operators'; import { Overlay, OverlayRef } from '@angular/cdk/overlay'; import { TemplatePortal } from '@angular/cdk/portal'; import { Subject, Subscription, fromEvent } from 'rxjs'; import { MatDialog } from '@angular/material/dialog'; +import { LOCAL_STORAGE, StorageService } from 'ngx-webstorage-service'; +import { SzSdkPrefsModel } from 'src/lib/services/sz-prefs.service'; @Component({ selector: 'app-root', @@ -31,6 +33,12 @@ export class AppComponent implements AfterViewInit, OnDestroy { public showEntityDetail = false; public sampleStatType; private _isLoading = false; + /** localstorage key to store pref data in */ + public STORAGE_KEY = 'senzing-web-app-example-data-table'; + /** original json value when app was loaded */ + private _localStorageOriginalValue: SzSdkPrefsModel = this.storage.get(this.STORAGE_KEY); + /** local cached json model of prefs */ + private _prefsJSON: SzSdkPrefsModel; public get isLoading(): boolean { return this._isLoading; @@ -45,6 +53,7 @@ export class AppComponent implements AfterViewInit, OnDestroy { public searchService: SzSearchService, public overlay: Overlay, public prefs: SzPrefsService, + @Inject(LOCAL_STORAGE) private storage: StorageService, public dataMart: SzDataMartService, public dialog: MatDialog, public viewContainerRef: ViewContainerRef){} @@ -61,6 +70,12 @@ export class AppComponent implements AfterViewInit, OnDestroy { console.log(`new sample set data ready... `); this.showSampleTable = true; })*/ + this.prefs.prefsChanged.pipe( + takeUntil(this.unsubscribe$) + ).subscribe( (srprefs) => { + this._prefsJSON = srprefs; + this.savePrefsToLocalStorage(); + }); } /** @@ -75,23 +90,32 @@ export class AppComponent implements AfterViewInit, OnDestroy { onCellClick(data: any) { console.log(`onCellClick`, data); if(!data.value){ return; } - if(data.key === 'entityId' || data.key === 'relatedEntityId') { - this.dialog.open(SzAlertMessageDialog, { - panelClass: 'alert-dialog-panel', - width: '350px', - height: '200px', - data: { - title: `Opening Entity #${data.value} Detail`, - text: 'This would normally be a redirect to the entity detail page.', - showOkButton: false, - buttonText: 'Close' - } - }); + } + + onEntityIdClick(entityId: SzEntityIdentifier) { + console.log(`APP onEntityIdClick(${entityId})`); + if(entityId) { + this.openEntity(entityId); } } - onLoading(value: boolean) { - this._isLoading = value; + openEntity(entityId: SzEntityIdentifier) { + this.dialog.open(SzAlertMessageDialog, { + panelClass: 'alert-dialog-panel', + width: '350px', + height: '200px', + data: { + title: `Opening Entity #${entityId} Detail`, + text: 'This would normally be a redirect to the entity detail page.', + showOkButton: false, + buttonText: 'Close' + } + }); + } + + /** save value of _prefsJSON to local storage */ + savePrefsToLocalStorage() { + this.storage.set(this.STORAGE_KEY, this._prefsJSON); } } diff --git a/examples/data-table/src/styles.scss b/examples/data-table/src/styles.scss index 07854a57..8f164bda 100644 --- a/examples/data-table/src/styles.scss +++ b/examples/data-table/src/styles.scss @@ -2,7 +2,9 @@ /* You can add global styles to this file, and also import other style files */ body { - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + /*font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/ + font-family: "Open-Sans", "Helvetica Neue", Arial, sans-serif; + --sz-font-family: "Open-Sans", "Helvetica Neue", Arial, sans-serif; } .detail-wrapper { @@ -68,4 +70,47 @@ sz-data-table tbody td.sz-dt-cell { max-height: 30px; overflow: hidden; text-overflow: ellipsis; -} \ No newline at end of file +} + +/* spinner */ + +.lds-ring, +.lds-ring div { + box-sizing: border-box; +} +.lds-ring { + display: inline-block; + position: relative; + width: 80px; + height: 80px; +} +.lds-ring div { + box-sizing: border-box; + display: block; + position: absolute; + width: 64px; + height: 64px; + margin: 8px; + border: 8px solid currentColor; + border-radius: 50%; + animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; + border-color: currentColor transparent transparent transparent; +} +.lds-ring div:nth-child(1) { + animation-delay: -0.45s; +} +.lds-ring div:nth-child(2) { + animation-delay: -0.3s; +} +.lds-ring div:nth-child(3) { + animation-delay: -0.15s; +} +@keyframes lds-ring { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + diff --git a/src/lib/statistics/cross-source/sz-cross-source-statistics.component.ts b/src/lib/statistics/cross-source/sz-cross-source-statistics.component.ts index c8aa4f9c..0091a6af 100644 --- a/src/lib/statistics/cross-source/sz-cross-source-statistics.component.ts +++ b/src/lib/statistics/cross-source/sz-cross-source-statistics.component.ts @@ -4,7 +4,7 @@ import { take, takeUntil, tap } from 'rxjs/operators'; import { Observable, Subject } from 'rxjs'; import { camelToKebabCase, underscoresToDashes, getMapKeyByValue, parseBool } from '../../common/utils'; import { SzDataMartService } from '../../services/sz-datamart.service'; -import { SzCrossSourceSummaryCategoryType, SzCrossSourceSummarySelectionEvent, SzCrossSourceSummarySelectionClickEvent, SzStatsSampleTableLoadingEvent } from '../../models/stats'; +import { SzCrossSourceSummaryCategoryType, SzCrossSourceSummarySelectionEvent, SzCrossSourceSummarySelectionClickEvent, SzStatsSampleTableLoadingEvent, SzCrossSourceSummaryCategoryTypeToMatchLevel } from '../../models/stats'; import { SzEntitiesPage, SzEntityData, SzEntityIdentifier, SzSourceSummary } from '@senzing/rest-api-client-ng'; import { SzDataTableCellEvent } from '../../models/stats'; @@ -34,14 +34,11 @@ export class SzCrossSourceStatistics implements OnInit, AfterViewInit, OnDestroy /** subscription to notify subscribers to unbind */ public unsubscribe$ = new Subject(); - private _showTable = false; - public get showTable() { - return this._showTable; - } - + private _disableClickingOnZeroResults = true; private _isLoading = false; + private _showTable = false; private _showTableLoadingSpinner = true; - private _disableClickingOnZeroResults = true; + private _title: string; @HostBinding("class.loading") get isLoading() { return this._isLoading; @@ -84,10 +81,12 @@ export class SzCrossSourceStatistics implements OnInit, AfterViewInit, OnDestroy private _loading: Subject = new Subject(); @Output() loading: Observable = this._loading.asObservable(); - public toggleExpanded() { - this.prefs.dataMart.showDiagramHeader = !this.prefs.dataMart.showDiagramHeader; + public get defaultFromDataSource() { + return this.prefs.dataMart.defaultDataSource2; + } + public get defaultToDataSource() { + return this.prefs.dataMart.defaultDataSource1; } - public get showAllColumns() { return this.prefs.dataMart.showAllColumns; } @@ -95,12 +94,8 @@ export class SzCrossSourceStatistics implements OnInit, AfterViewInit, OnDestroy public set showAllColumns(value: boolean) { this.prefs.dataMart.showAllColumns = value; } - - public get defaultToDataSource() { - return this.prefs.dataMart.defaultDataSource1; - } - public get defaultFromDataSource() { - return this.prefs.dataMart.defaultDataSource2; + public get showTable() { + return this._showTable; } public get resolutionMode() { @@ -117,46 +112,13 @@ export class SzCrossSourceStatistics implements OnInit, AfterViewInit, OnDestroy } } - private _title: string; - - get title() { + /** the title of the collapseable header */ + public get title() { return this._title; - let retVal = ''; - let isSingle = true; - if(this.dataMartService.sampleDataSource1 && this.dataMartService.sampleDataSource2 && this.dataMartService.sampleDataSource1 !== this.dataMartService.sampleDataSource2) { - isSingle = false; - } else if(this.dataMartService.sampleDataSource1 || this.dataMartService.sampleDataSource2) { - isSingle = true; - } - if(this.dataMartService.sampleStatType) { - switch(this.dataMartService.sampleStatType) { - case 'MATCHES': - retVal = isSingle ? 'Duplicates' : 'Matches'; - break; - case 'AMBIGUOUS_MATCHES': - retVal = 'Ambiguous Matches'; - break; - case 'POSSIBLE_MATCHES': - retVal = isSingle ? 'Possible Duplicates' : 'Possible Matches'; - break; - case 'POSSIBLE_RELATIONS': - retVal = isSingle ? 'Possible Relationships' : 'Possibly Related'; - break; - case 'DISCLOSED_RELATIONS': - retVal = 'Disclosed Relationships'; - break; - }; - - if(this.dataMartService.sampleDataSource1 && this.dataMartService.sampleDataSource2 && this.dataMartService.sampleDataSource1 !== this.dataMartService.sampleDataSource2) { - retVal += `: ${this.dataMartService.sampleDataSource1} to ${this.dataMartService.sampleDataSource2}`; - } else if(this.dataMartService.sampleDataSource1) { - retVal += `: ${this.dataMartService.sampleDataSource1}`; - } else if(this.dataMartService.sampleDataSource2) { - retVal += `: ${this.dataMartService.sampleDataSource2}`; - } - } - - return retVal; + } + /** set the title of the collapseable widget */ + public set title(value: string) { + this._title = value; } private _getTitleFromEvent(event: SzCrossSourceSummarySelectionEvent) { @@ -394,6 +356,10 @@ export class SzCrossSourceStatistics implements OnInit, AfterViewInit, OnDestroy this.entityIdClick.emit(entityId); } + public toggleExpanded() { + this.prefs.dataMart.showDiagramHeader = !this.prefs.dataMart.showDiagramHeader; + } + private getNewSampleSet(parameters: SzCrossSourceSummarySelectionEvent) { // set loading emitter(s) this._onNewSampleSetRequested.next(true); @@ -414,4 +380,13 @@ export class SzCrossSourceStatistics implements OnInit, AfterViewInit, OnDestroy }) ) } + public updateTitle(datasource1, datasource2, statType) { + let _evt: SzCrossSourceSummarySelectionEvent = { + dataSource1: datasource1, + dataSource2: datasource2, + statType: statType, + matchLevel: SzCrossSourceSummaryCategoryTypeToMatchLevel[statType] + } + this._title = this._getTitleFromEvent(_evt); + } } \ No newline at end of file diff --git a/src/public-api.ts b/src/public-api.ts index fcbe47dd..82cf1b08 100644 --- a/src/public-api.ts +++ b/src/public-api.ts @@ -88,6 +88,15 @@ export { AdminStreamConnProperties, AdminStreamAnalysisConfig, AdminStreamLoadCo export { SzDataSourceRecordAnalysis, SzDataSourceComposite } from './lib/models/data-sources'; export { SzGraphTooltipEntityModel, SzGraphTooltipLinkModel, SzGraphNodeFilterPair, SzMatchKeyComposite, SzMatchKeyTokenComposite, SzEntityNetworkMatchKeyTokens, SzNetworkGraphInputs, SzMatchKeyTokenFilterScope } from './lib/models/graph'; export { SzDataSourceRecordsSelection, SzDataSourceRecordSelection, SzWhySelectionModeBehavior, SzWhySelectionMode } from './lib/models/data-source-record-selection'; +export { + SzCrossSourceSummaryCategoryType, + SzCrossSourceSummaryCategoryTypeToMatchLevel, + SzCrossSourceSummarySelectionEvent, + SzCrossSourceSummarySelectionClickEvent, + sampleDataSourceChangeEvent, + SzStatSampleSetParameters, + SzStatSampleSetPageChangeEvent +} from './lib/models/stats'; export * from './lib/models/data-how'; /** pipes */ export { SzShortNumberPipe } from './lib/pipes/shortnumber.pipe'