[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
nuclia · Jan 23, 2023 · afffb23 · afffb23
1 parent fe347ab
commit afffb23
Show file tree

Hide file tree

Showing 15 changed files with 195 additions and 22 deletions.
diff --git a/app.babel b/app.babel
@@ -14039,6 +14039,46 @@
 							</translation>
 						</translations>
 					</concept_node>
+					<concept_node>
+						<name>stash.widgets.relations</name>
+						<description/>
+						<comment/>
+						<default_text/>
+						<translations>
+							<translation>
+								<language>ca-ES</language>
+								<approved>false</approved>
+							</translation>
+							<translation>
+								<language>en-US</language>
+								<approved>false</approved>
+							</translation>
+							<translation>
+								<language>es-ES</language>
+								<approved>false</approved>
+							</translation>
+						</translations>
+					</concept_node>
+					<concept_node>
+						<name>stash.widgets.relations.help</name>
+						<description/>
+						<comment/>
+						<default_text/>
+						<translations>
+							<translation>
+								<language>ca-ES</language>
+								<approved>false</approved>
+							</translation>
+							<translation>
+								<language>en-US</language>
+								<approved>false</approved>
+							</translation>
+							<translation>
+								<language>es-ES</language>
+								<approved>false</approved>
+							</translation>
+						</translations>
+					</concept_node>
 					<concept_node>
 						<name>stash.widgets.snippet</name>
 						<description/>

diff --git 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
@@ -80,6 +80,14 @@ <h3>{{ 'stash.widgets.configuration' | translate }}</h3>
             formControlName="filter">
             {{ 'stash.widgets.filter' | translate }}
           </pa-toggle>
+          <ng-container *ngIf="widgetMode === 'video'">
+            <pa-toggle
+              labelOnRight
+              help="stash.widgets.relations.help"
+              formControlName="relations">
+              {{ 'stash.widgets.relations' | translate }}
+            </pa-toggle>
+          </ng-container>
           <pa-toggle
             labelOnRight
             help="stash.widgets.navigateToLink.help"

diff --git a/apps/dashboard/src/app/widgets/widget-generator.component.ts b/apps/dashboard/src/app/widgets/widget-generator.component.ts
@@ -108,6 +108,7 @@ export class WidgetGeneratorComponent implements OnInit, OnDestroy {
               filter: [config.features.includes('filter')],
               navigateToLink: [config.features.includes('navigateToLink')],
               permalink: [config.features.includes('permalink')],
+              relations: [config.features.includes('relations')],
               suggestLabels: [config.features.includes('suggestLabels')],
               suggestions: [config.features.includes('suggestions')],
             }),

diff --git a/libs/common/src/assets/i18n/ca.json b/libs/common/src/assets/i18n/ca.json
@@ -628,6 +628,8 @@
 	"stash.widgets.publish_kb": "Podeu publicar·lo des de",
 	"stash.widgets.publish_kb_link": "Panell",
 	"stash.widgets.recommendations": "Recomanacions",
+	"stash.widgets.relations": "Relacions",
+	"stash.widgets.relations.help": "Mostra informació de les entitats relacionades en els resultats de cerca",
 	"stash.widgets.snippet": "Fragment de codi",
 	"stash.widgets.suggestLabels": "Suggereix etiquetes",
 	"stash.widgets.suggestLabels.help": "Quan s'ha realitzat l'entrenament de la intenció de cerca d'etiquetes, es mostren les etiquetes suggerides en funció de la consulta",

diff --git a/libs/common/src/assets/i18n/en.json b/libs/common/src/assets/i18n/en.json
@@ -700,6 +700,8 @@
 	"stash.widgets.publish_kb": "You can publish it from the",
 	"stash.widgets.publish_kb_link": "Dashboard",
 	"stash.widgets.recommendations": "Recommendations",
+	"stash.widgets.relations": "Relations",
+	"stash.widgets.relations.help": "Displays information about related entities in the search results",
 	"stash.widgets.snippet": "Code snippet",
 	"stash.widgets.suggestLabels": "Suggest labels",
 	"stash.widgets.suggestLabels.help": "When label search intent training has been done, displays labels suggested based on the query",

diff --git a/libs/common/src/assets/i18n/es.json b/libs/common/src/assets/i18n/es.json
@@ -628,6 +628,8 @@
 	"stash.widgets.publish_kb": "Puedes publicarlo desde el",
 	"stash.widgets.publish_kb_link": "Tablero",
 	"stash.widgets.recommendations": "Recomendaciones",
+	"stash.widgets.relations": "Relaciones",
+	"stash.widgets.relations.help": "Muestra información de las entidades relacionadas en los resultados de búsqueda.",
 	"stash.widgets.snippet": "Fragmento de código",
 	"stash.widgets.suggestLabels": "Sugerir etiquetas",
 	"stash.widgets.suggestLabels.help": "Cuando se ha realizado el entrenamiento de la intención de búsqueda de etiquetas, muestra las etiquetas sugeridas en función de la consulta",

diff --git a/libs/sdk-core/CHANGELOG.md b/libs/sdk-core/CHANGELOG.md
@@ -1,3 +1,10 @@
+# 1.1.3 (unreleased)
+
+### Improvements
+
+- Update `Relation` interface
+- Add `Search.Relations`and `Search.Relation` interfaces
+
 # 1.1.2 (2023-01-20)
 
 ### Bugfix

diff --git a/libs/sdk-core/src/lib/db/kb/kb.models.ts b/libs/sdk-core/src/lib/db/kb/kb.models.ts
@@ -178,6 +178,7 @@ export interface WidgetFeatures {
   navigateToLink?: boolean;
   notPublic?: boolean;
   permalink?: boolean;
+  relations?: boolean;
   suggestions?: boolean;
   suggestLabels?: boolean;
 }

diff --git a/libs/sdk-core/src/lib/db/resource/resource.models.ts b/libs/sdk-core/src/lib/db/resource/resource.models.ts
@@ -73,17 +73,20 @@ export interface UserMetadata {
   relations?: Relation[];
 }
 
+export type RelationType = 'ABOUT' | 'CHILD' | 'COLAB' | 'ENTITY' | 'OTHER' | 'SYNONYM';
+export type RelationEntityType = 'entity' | 'label' | 'resource' | 'user';
+
 export interface Relation {
-  relation?: 'CHILD' | 'ABOUT' | 'ENTITY' | 'COLAB' | 'OTHER';
-  properties?: { [key: string]: string };
-  resource?: string;
+  relation: RelationType;
   label?: string;
-  user?: string;
-  other?: string;
-  entity?: {
-    entity: string;
-    entity_type: string;
-  };
+  from?: RelationEntity;
+  to: RelationEntity;
+}
+
+export interface RelationEntity {
+  value: string;
+  type: RelationEntityType;
+  group?: string;
 }
 
 export interface Origin {

diff --git a/libs/sdk-core/src/lib/db/search/search.models.ts b/libs/sdk-core/src/lib/db/search/search.models.ts
@@ -1,5 +1,5 @@
 import type { ExtractedDataTypes, ResourceProperties } from '../kb';
-import type { FIELD_TYPE, IResource } from '../resource';
+import type { FIELD_TYPE, IResource, RelationType, RelationEntityType } from '../resource';
 
 export type ResourceStatus = 'PENDING' | 'PROCESSED' | 'ERROR';
 
@@ -55,6 +55,7 @@ export namespace Search {
     sentences?: Sentences;
     paragraphs?: Paragraphs;
     fulltext?: Fulltext;
+    relations?: Relations;
     shards?: string[];
   }
 
@@ -93,6 +94,22 @@ export namespace Search {
     facets: FacetsResult;
   }
 
+  export interface Relations {
+    entities: {
+      [key: string]: {
+        related_to: Relation[];
+      };
+    };
+  }
+
+  export interface Relation {
+    entity: string;
+    entity_type: RelationEntityType;
+    relation: RelationType;
+    relation_label: string;
+    direction: 'in' | 'out';
+  }
+
   export interface FacetsResult {
     [key: string]: any;
   }

diff --git a/libs/search-widget/src/core/api.ts b/libs/search-widget/src/core/api.ts
@@ -39,6 +39,9 @@ export const initNuclia = (options: NucliaOptions, state: KBStates, widgetOption
       nucliaPrediction.loadModels(kbPath, authHeaders);
     }
   }
+  if (widgetOptions.features?.relations) {
+    SEARCH_MODE.push(Search.Features.RELATIONS);
+  }
   STATE = state;
 };
 

diff --git a/libs/search-widget/src/core/stores/search.store.ts b/libs/search-widget/src/core/stores/search.store.ts
@@ -146,6 +146,24 @@ export const smartResults = searchState.reader<Search.SmartResult[]>((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<void>();
 
 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
@@ -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
@@ -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}
       <strong>{$_('results.empty')}</strong>
     {:else}
-      <div class="results">
-        {#each $smartResults as result}
-          {#if result.icon === 'application/pdf'}
-            <PdfTile {result} />
-          {:else if result.icon.includes('video')}
-            <VideoTile {result} />
-          {:else if result.icon.includes('audio')}
-            <AudioTile {result} />
-          {:else}
-            <TextTile {result} />
-          {/if}
-        {/each}
+      <div class="results-container">
+        <div
+          class="results"
+          class:with-relations={$entityRelations.length > 0}>
+          {#each $smartResults as result}
+            {#if result.icon === 'application/pdf'}
+              <PdfTile {result} />
+            {:else if result.icon.includes('video')}
+              <VideoTile {result} />
+            {:else if result.icon.includes('audio')}
+              <AudioTile {result} />
+            {:else}
+              <TextTile {result} />
+            {/if}
+          {/each}
+        </div>
+        {#if $entityRelations.length > 0}
+          <div class="relations">
+            {#each $entityRelations as entity}
+              <div class="entity">
+                <div class="entity-name">{entity.entity}</div>
+                {#each Object.entries(entity.relations) as [name, related]}
+                  <div class="relation">
+                    <span class="relation-name">{name}:</span>
+                    <span>{related.join(',')}</span>
+                  </div>
+                {/each}
+              </div>
+            {/each}
+          </div>
+        {/if}
       </div>
     {/if}
   {/if}