From afffb230232488bf2487fb80c1512743a22abfdd Mon Sep 17 00:00:00 2001 From: operramon <52449656+operramon@users.noreply.github.com> Date: Mon, 23 Jan 2023 11:10:47 +0100 Subject: [PATCH] [sc-3498] Implement simple entity card (#516) * Add relations option to the dashboard * Extend sdk interfaces * Show simple entity card * Update sdk interfaces * Refactor interfaces --- app.babel | 40 ++++++++++++++++ .../src/app/widgets/widget-features.ts | 1 + .../widgets/widget-generator.component.html | 8 ++++ .../app/widgets/widget-generator.component.ts | 1 + libs/common/src/assets/i18n/ca.json | 2 + libs/common/src/assets/i18n/en.json | 2 + libs/common/src/assets/i18n/es.json | 2 + libs/sdk-core/CHANGELOG.md | 7 +++ libs/sdk-core/src/lib/db/kb/kb.models.ts | 1 + .../src/lib/db/resource/resource.models.ts | 21 ++++---- .../src/lib/db/search/search.models.ts | 19 +++++++- libs/search-widget/src/core/api.ts | 3 ++ .../src/core/stores/search.store.ts | 18 +++++++ .../search-video-widget/SearchResults.scss | 48 +++++++++++++++++++ .../search-video-widget/SearchResults.svelte | 44 ++++++++++++----- 15 files changed, 195 insertions(+), 22 deletions(-) diff --git a/app.babel b/app.babel index 20a87f1a7..04bff5303 100644 --- a/app.babel +++ b/app.babel @@ -14039,6 +14039,46 @@ + + stash.widgets.relations + + + + + + ca-ES + false + + + en-US + false + + + es-ES + false + + + + + stash.widgets.relations.help + + + + + + ca-ES + false + + + en-US + false + + + es-ES + false + + + stash.widgets.snippet diff --git a/apps/dashboard/src/app/widgets/widget-features.ts b/apps/dashboard/src/app/widgets/widget-features.ts index a42889307..f7e445d64 100644 --- a/apps/dashboard/src/app/widgets/widget-features.ts +++ b/apps/dashboard/src/app/widgets/widget-features.ts @@ -5,6 +5,7 @@ export const DEFAULT_FEATURES: WidgetFeatures = { entityAnnotation: true, filter: true, permalink: true, + relations: true, suggestions: true, notPublic: true, }; diff --git a/apps/dashboard/src/app/widgets/widget-generator.component.html b/apps/dashboard/src/app/widgets/widget-generator.component.html index b9b280056..3dbd211b6 100644 --- a/apps/dashboard/src/app/widgets/widget-generator.component.html +++ b/apps/dashboard/src/app/widgets/widget-generator.component.html @@ -80,6 +80,14 @@

{{ 'stash.widgets.configuration' | translate }}

formControlName="filter"> {{ 'stash.widgets.filter' | translate }} + + + {{ 'stash.widgets.relations' | translate }} + + ((state) => return smartResults; }); +export const entityRelations = searchState.reader((state) => + Object.entries(state.results.relations?.entities || {}) + .map(([entity, relations]) => ({ + entity, + relations: relations.related_to + .filter((relation) => relation.entity_type === 'entity' && relation.relation_label.length > 0) + .reduce((acc, current) => { + if (!acc[current.relation_label]) { + acc[current.relation_label] = [current.entity]; + } else { + acc[current.relation_label].push(current.entity); + } + return acc; + }, {} as { [relation: string]: string[] }), + })) + .filter((entity) => Object.keys(entity.relations).length > 0), +); + export const triggerSearch = new Subject(); export const addLabelFilter = (label: Classification) => { diff --git a/libs/search-widget/src/widgets/search-video-widget/SearchResults.scss b/libs/search-widget/src/widgets/search-video-widget/SearchResults.scss index 939cfd4da..11addc7c1 100644 --- a/libs/search-widget/src/widgets/search-video-widget/SearchResults.scss +++ b/libs/search-widget/src/widgets/search-video-widget/SearchResults.scss @@ -8,8 +8,56 @@ width: var(--search-bar-max-width); } +.results-container { + display: flex; + flex-direction: column-reverse; + gap: var(--rhythm-2); +} + .results { display: flex; flex-direction: column; gap: var(--rhythm-2); + width: 100%; +} + +.relations { + display: flex; + flex-direction: column; + gap: var(--rhythm-5); + + .entity { + display: flex; + flex-direction: column; + gap: var(--rhythm-1_5); + } + + .entity-name { + font-size: var(--font-size-base); + font-weight: var(--font-weight-bold); + } + + .relation { + font-size: var(--font-size-medium); + } + + .relation-name { + font-weight: var(--font-weight-semi-bold); + } } + +@media (min-width: 1200px) { + .results-container { + flex-direction: row; + } + .results.with-relations { + width: calc(100% - var(--rhythm-40) - var(--rhythm-2)); + } + .relations { + width: var(--rhythm-40); + padding-left: var(--rhythm-2); + border-left: 1px solid var(--color-neutral-light); + } +} + + diff --git a/libs/search-widget/src/widgets/search-video-widget/SearchResults.svelte b/libs/search-widget/src/widgets/search-video-widget/SearchResults.svelte index 841f9f63d..63a703499 100644 --- a/libs/search-widget/src/widgets/search-video-widget/SearchResults.svelte +++ b/libs/search-widget/src/widgets/search-video-widget/SearchResults.svelte @@ -11,6 +11,7 @@ import PdfTile from '../../tiles/pdf-tile/PdfTile.svelte'; import TextTile from '../../tiles/text-tile/TextTile.svelte'; import { + entityRelations, hasSearchError, isEmptySearchQuery, pendingResults, @@ -50,18 +51,37 @@ {:else if $smartResults.length === 0} {$_('results.empty')} {:else} -
- {#each $smartResults as result} - {#if result.icon === 'application/pdf'} - - {:else if result.icon.includes('video')} - - {:else if result.icon.includes('audio')} - - {:else} - - {/if} - {/each} +
+
0}> + {#each $smartResults as result} + {#if result.icon === 'application/pdf'} + + {:else if result.icon.includes('video')} + + {:else if result.icon.includes('audio')} + + {:else} + + {/if} + {/each} +
+ {#if $entityRelations.length > 0} +
+ {#each $entityRelations as entity} +
+
{entity.entity}
+ {#each Object.entries(entity.relations) as [name, related]} +
+ {name}: + {related.join(',')} +
+ {/each} +
+ {/each} +
+ {/if}
{/if} {/if}