@lblod/ember-rdfa-editor-lblod-plugins 37.0.3 → 37.1.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 37.1.0
+
+### Minor Changes
+
+- [#658](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/658) [`e45764c`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/e45764c5f10e590963307a00b93501ec99b5b8ac) Thanks [@kobemertens](https://github.com/kobemertens)! - Integrate location suggestions in context menu
+
+### Patch Changes
+
+- [#660](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/660) [`062a3f9`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/062a3f92528e0db450aaa51853197759650d85ed) Thanks [@lagartoverde](https://github.com/lagartoverde)! - Fetch document content before passing it up on the document template component in order to solve race condition on GN
+
 ## 37.0.3
 
 ### Patch Changes

package/addon/components/common/documents/preview.gts

@@ -14,6 +14,7 @@ import t from 'ember-intl/helpers/t';
 import { SayController } from '@lblod/ember-rdfa-editor';
 import { PreviewableDocument } from './types';
 import { VoteStarUnfilledIcon } from '../vote-star-unfilled-icon';
+import perform from 'ember-concurrency/helpers/perform';
 
 interface Signature<Doc extends PreviewableDocument> {
   Args: {
@@ -31,10 +32,10 @@ export default class DocumentPreview<
   @tracked controller?: SayController;
   @tracked isExpanded = false;
 
-  @action
-  onInsert() {
+  onInsert = task(async () => {
+    await this.contentTask.perform();
     this.args.onInsert(this.args.doc);
-  }
+  });
 
   @action
   togglePreview() {
@@ -101,7 +102,7 @@ export default class DocumentPreview<
         <div
           role='button'
           title={{t 'common.preview-list.select-button.title'}}
-          {{on 'click' this.onInsert}}
+          {{on 'click' (perform this.onInsert)}}
           {{! template-lint-disable require-presentational-children}}
         >
           <AuButton class='snippet-preview__insert-button' @skin='naked'>

package/addon/components/location-plugin/insert.gts

@@ -31,18 +31,14 @@ import LocationMap, {
   SUPPORTED_LOCATION_TYPES,
   type LocationType,
 } from './map';
-import { transactionCombinator } from '@lblod/ember-rdfa-editor/utils/transaction-utils';
-import { updateSubject } from '@lblod/ember-rdfa-editor/plugins/rdfa-info/utils';
 import { replaceSelectionWithLocation } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/location-plugin/_private/utils/node-utils';
 import type { Option } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
-import type { FullTriple } from '@lblod/ember-rdfa-editor/core/rdfa-processor';
-import { PROV } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
-import { SayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
 import {
   closeLocationModal,
   getLocationModalsPluginState,
   openLocationModal,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/location-plugin';
+import { replaceLocationCommand } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/location-plugin/utils/replace-location';
 
 export type CurrentLocation = Address | GlobalCoordinates | undefined;
 
@@ -282,51 +278,23 @@ export default class LocationPluginInsertComponent extends Component<Signature>
         }),
       });
     }
-    if (toInsert) {
-      closeLocationModal(this.controller.activeEditorView);
-      if (this.selectedLocationNode) {
-        const df = new SayDataFactory();
-        const { pos, value: locNode } = this.selectedLocationNode;
-        // The location's subject has likely changed, so we should update the external links too
-        // if they exist
-        // NOTE: It's VERY important that this is done without mutating the triple objects
-        // otherwise the attributes will not update as expected when undo-ing
-        const newExternalTriples: FullTriple[] = (
-          locNode.attrs.externalTriples as FullTriple[]
-        ).map((tr) => {
-          if (PROV('atLocation').matches(tr.predicate)) {
-            return { ...tr, object: df.namedNode(toInsert.uri) };
-          } else {
-            return tr;
-          }
-        }); // update the location value and the external triples
-        this.controller.withTransaction((tr) => {
-          return transactionCombinator(
-            this.controller.activeEditorState,
-            tr
-              .setNodeAttribute(pos, 'value', toInsert)
-              .setNodeAttribute(pos, 'externalTriples', newExternalTriples),
-          )([
-            // Update the subject uri, while keeping backlinks intact
-            updateSubject({
-              pos,
-              targetSubject: toInsert.uri,
-              keepBacklinks: true,
-              keepProperties: false,
-              keepExternalTriples: true,
-            }),
-          ]).transaction;
-        });
-      } else {
-        // Insert
-        replaceSelectionWithLocation({
-          controller: this.controller,
-          subject: toInsert.uri,
-          toInsert,
-          subjectTypes: this.args.config.subjectTypesToLinkTo,
-          explicitSubjectToLinkTo: this.args.config.explicitSubjectToLinkTo,
-        });
-      }
+    if (!toInsert) return;
+
+    closeLocationModal(this.controller.activeEditorView);
+    if (this.selectedLocationNode) {
+      replaceLocationCommand(this.selectedLocationNode, toInsert)(
+        this.controller.activeEditorState,
+        this.controller.activeEditorView.dispatch,
+      );
+    } else {
+      // Insert
+      replaceSelectionWithLocation({
+        controller: this.controller,
+        subject: toInsert.uri,
+        toInsert,
+        subjectTypes: this.args.config.subjectTypesToLinkTo,
+        explicitSubjectToLinkTo: this.args.config.explicitSubjectToLinkTo,
+      });
     }
   }
 

package/addon/plugins/location-plugin/_private/utils/location-helpers.ts

@@ -0,0 +1,7 @@
+import { Address } from './address-helpers';
+import { Area, Place } from './geo-helpers';
+
+// For 2 addresses that are the same, the belgianAddressUri will be the same, regardless of how they were created
+export function getLocationUri(location: Address | Place | Area) {
+  return (location as Address)?.belgianAddressUri ?? location.uri;
+}

package/addon/plugins/location-plugin/contextual-actions/index.ts

@@ -3,25 +3,57 @@ import { v4 as uuidv4 } from 'uuid';
 import { getTranslationFunction } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/translation';
 import { openLocationModalCommand } from '..';
 import { LocationType } from '@lblod/ember-rdfa-editor-lblod-plugins/components/location-plugin/map';
+import getDocumentLocations from '../utils/get-document-locations';
+import { replaceLocationCommand } from '../utils/replace-location';
+import { Area, Place } from '../utils/geo-helpers';
+import { Address } from '../utils/address-helpers';
+import { getLocationUri } from '../_private/utils/location-helpers';
 
 const otherElementsGroupId =
   'other-elements-e01f46a0-b323-4add-8035-d81dc2e8578d';
+const recentLocationsGroupId =
+  'other-elements-de3e5a9a-40de-4fb5-832e-c22199ec584f';
+
+const SUGGESTION_AMOUNT = 15;
 
 export function getContextualActions() {
   return function (state: EditorState, searchQuery?: string) {
     const t = getTranslationFunction(state);
+    const { selection } = state;
+    if (!(selection instanceof NodeSelection)) return [];
+    const selectedNode = selection.node;
+    if (selectedNode.type.name !== 'oslo_location') return [];
+
+    const selectedLocation = selectedNode.attrs.value as
+      | Address
+      | Place
+      | Area
+      | undefined;
+
+    const locationSuggestionOptions = getDocumentLocations(state)
+      .filter(
+        (location) =>
+          !selectedLocation ||
+          getLocationUri(selectedLocation) !== getLocationUri(location),
+      )
+      .slice(0, SUGGESTION_AMOUNT)
+      .map((location) => ({
+        label: location.formatted,
+        id: uuidv4(),
+        group: recentLocationsGroupId,
+        command: replaceLocationCommand(
+          { value: selection.node, pos: selection.from },
+          location,
+        ),
+      }));
 
-    const options: {
-      label: string;
-      locationType: LocationType;
-      icon: string;
-    }[] = [
+    const otherElementsOptions = [
       {
         label: t(
           'location-plugin.context-actions.insert-address',
           'Adres invoegen',
         ),
-        locationType: 'address',
+        locationType: 'address' as LocationType,
         icon: 'location',
       },
       {
@@ -29,7 +61,7 @@ export function getContextualActions() {
           'location-plugin.context-actions.insert-point-on-map',
           'Punt op de kaart invoegen',
         ),
-        locationType: 'place',
+        locationType: 'place' as LocationType,
         icon: 'location-gps',
       },
       {
@@ -37,25 +69,25 @@ export function getContextualActions() {
           'location-plugin.context-actions.insert-area',
           'Gebied invoegen',
         ),
-        locationType: 'area',
+        locationType: 'area' as LocationType,
         icon: 'area',
       },
-    ];
+    ].map((option) => {
+      return {
+        ...option,
+        id: uuidv4(),
+        group: otherElementsGroupId,
+        command: openLocationModalCommand(option.locationType),
+      };
+    });
 
-    return options
+    return locationSuggestionOptions
+      .concat(otherElementsOptions)
       .filter(
         (option) =>
           !searchQuery ||
           option.label.toLocaleLowerCase().includes(searchQuery.toLowerCase()),
-      )
-      .map((option) => {
-        return {
-          ...option,
-          id: uuidv4(),
-          group: otherElementsGroupId,
-          command: openLocationModalCommand(option.locationType),
-        };
-      });
+      );
   };
 }
 
@@ -69,16 +101,23 @@ function contextualGroupIsVisible(state: EditorState) {
 
 export function getContextualActionGroups() {
   return function (state: EditorState) {
-    return contextualGroupIsVisible(state)
-      ? [
-          {
-            id: otherElementsGroupId,
-            label: getTranslationFunction(state)(
-              'location-plugin.context-actions.other-elements',
-              'Andere elementen',
-            ),
-          },
-        ]
-      : [];
+    if (!contextualGroupIsVisible(state)) return [];
+    return [
+      {
+        id: recentLocationsGroupId,
+        label: getTranslationFunction(state)(
+          'location-plugin.context-actions.location-suggestions',
+          'Locatiesuggesties',
+        ),
+      },
+      {
+        id: otherElementsGroupId,
+        label: getTranslationFunction(state)(
+          'location-plugin.context-actions.other-elements',
+          'Andere elementen',
+        ),
+        sticky: 'bottom',
+      },
+    ];
   };
 }

package/addon/plugins/location-plugin/index.ts

@@ -3,7 +3,6 @@ import {
   PluginKey,
   EditorState,
   EditorView,
-  Transaction,
   Command,
 } from '@lblod/ember-rdfa-editor';
 import { LocationType } from '@lblod/ember-rdfa-editor-lblod-plugins/components/location-plugin/map';

package/addon/plugins/location-plugin/utils/get-document-locations.ts

@@ -1,6 +1,7 @@
 import { EditorState } from '@lblod/ember-rdfa-editor';
 import { Area, Place } from './geo-helpers';
 import { Address } from './address-helpers';
+import { getLocationUri } from '../_private/utils/location-helpers';
 
 type LocationsWithDistanceType = {
   location: Place | Address | Area;
@@ -8,9 +9,47 @@ type LocationsWithDistanceType = {
 };
 
 type LocationMetadataType = {
-  [locationUri: string]: { ocurrences: number; distance: number };
+  [locationUri: string]: {
+    occurrences: number;
+    distance: number;
+    location: Address | Place | Area;
+  };
 };
 
+const PROXIMITY_WEIGHT = 0.8;
+const FREQUENCY_WEIGHT = 1 - PROXIMITY_WEIGHT;
+const PROXIMITY_DECAY = 50;
+
+/**
+ * Returns a frequency score that normalizes logarithmically to avoid domination by a few very large occurences.
+ * @param occurences amount of occurences of the location
+ * @param maxOccurences max amount of occurences for any location
+ */
+function getFrequencyScore(occurences: number, maxOccurences: number) {
+  return Math.log(occurences + 1) / Math.log(maxOccurences + 1);
+}
+
+/**
+ * Uses exponential decay to calculate a proximity score
+ * @param distance Distance from the selection
+ * @returns proximity score
+ */
+function getProximityScore(distance: number) {
+  return Math.exp(-distance / PROXIMITY_DECAY);
+}
+
+function getSuggestionScore(
+  occurrences: number,
+  maxOccurences: number,
+  distance: number,
+) {
+  const score =
+    PROXIMITY_WEIGHT * getProximityScore(distance) +
+    FREQUENCY_WEIGHT * getFrequencyScore(occurrences, maxOccurences);
+
+  return score;
+}
+
 export default function getDocumentLocations(state: EditorState) {
   const doc = state.doc;
   const locationsWithDistance: LocationsWithDistanceType[] = [];
@@ -27,37 +66,44 @@ export default function getDocumentLocations(state: EditorState) {
     return true;
   });
   const locationMetadata: LocationMetadataType = {};
-  const locationsDedup: (Place | Address | Area)[] = [];
   for (const locationWithDistance of locationsWithDistance) {
-    const uri =
-      (locationWithDistance.location as Address).belgianAddressUri ||
-      locationWithDistance.location.uri;
+    const { location, distance } = locationWithDistance;
+    if (!location) {
+      continue;
+    }
+    const uri = getLocationUri(location);
     if (!locationMetadata[uri]) {
       locationMetadata[uri] = {
-        ocurrences: 1,
-        distance: locationWithDistance.distance,
+        location,
+        occurrences: 1,
+        distance,
       };
-      locationsDedup.push(locationWithDistance.location);
     } else {
-      locationMetadata[uri].ocurrences++;
-      if (locationWithDistance.distance < locationMetadata[uri].distance) {
-        locationMetadata[uri].distance = locationWithDistance.distance;
+      locationMetadata[uri].occurrences++;
+      if (distance < locationMetadata[uri].distance) {
+        locationMetadata[uri].distance = distance;
       }
     }
   }
 
-  const locations = locationsDedup.sort((a, b) => {
-    const uriA = (a as Address).belgianAddressUri || a.uri;
-    const uriB = (b as Address).belgianAddressUri || b.uri;
-    if (
-      locationMetadata[uriA].ocurrences === locationMetadata[uriB].ocurrences
-    ) {
-      return locationMetadata[uriA].distance - locationMetadata[uriB].distance;
-    } else {
-      return (
-        locationMetadata[uriB].ocurrences - locationMetadata[uriA].ocurrences
-      );
-    }
+  const maxOccurence = Object.values(locationMetadata).reduce(
+    (acc, { occurrences: ocurrences }) =>
+      acc >= ocurrences ? acc : ocurrences,
+    1,
+  );
+
+  const scoredLocations = Object.values(locationMetadata).map(
+    ({ location, occurrences, distance }) => ({
+      location,
+      score: getSuggestionScore(occurrences, maxOccurence, distance),
+      occurrences,
+      distance,
+    }),
+  );
+
+  scoredLocations.sort(({ score: scoreA }, { score: scoreB }) => {
+    return scoreB - scoreA;
   });
-  return locations;
+
+  return scoredLocations.map(({ location }) => location);
 }

package/addon/plugins/location-plugin/utils/replace-location.ts

@@ -0,0 +1,83 @@
+import { ResolvedPNode } from '@lblod/ember-rdfa-editor/utils/_private/types';
+import { Address } from './address-helpers';
+import { Area, Place } from './geo-helpers';
+import {
+  EditorState,
+  Transaction,
+  NodeSelection,
+  TextSelection,
+  PNode,
+  Selection,
+} from '@lblod/ember-rdfa-editor';
+import type { FullTriple } from '@lblod/ember-rdfa-editor/core/rdfa-processor';
+import { PROV } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { SayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
+import { transactionCombinator } from '@lblod/ember-rdfa-editor/utils/transaction-utils';
+import { updateSubject } from '@lblod/ember-rdfa-editor/plugins/rdfa-info/utils';
+
+function moveNodeSelectionForward(selection: Selection, doc: PNode) {
+  if (!(selection instanceof NodeSelection)) {
+    return selection;
+  }
+
+  const $from = selection.$from;
+
+  const index = $from.index();
+  const parent = $from.parent;
+
+  if (index + 1 < parent.childCount) {
+    const nextPos = selection.from + selection.node.nodeSize;
+
+    return NodeSelection.create(doc, nextPos);
+  } else {
+    const posAfter = selection.to;
+
+    return TextSelection.create(doc, posAfter);
+  }
+}
+
+export function replaceLocationCommand(
+  node: ResolvedPNode,
+  location: Address | Place | Area,
+) {
+  return function (state: EditorState, dispatch: (tr: Transaction) => void) {
+    const df = new SayDataFactory();
+    const { pos, value: locNode } = node;
+    // The location's subject has likely changed, so we should update the external links too
+    // if they exist
+    // NOTE: It's VERY important that this is done without mutating the triple objects
+    // otherwise the attributes will not update as expected when undo-ing
+    const newExternalTriples: FullTriple[] = (
+      locNode.attrs.externalTriples as FullTriple[]
+    ).map((tr) => {
+      if (PROV('atLocation').matches(tr.predicate)) {
+        return { ...tr, object: df.namedNode(location.uri) };
+      } else {
+        return tr;
+      }
+    }); // update the location value and the external triples
+    const tr = state.tr;
+    const setLocationTr = transactionCombinator(
+      state,
+      tr
+        .setNodeAttribute(pos, 'value', location)
+        .setNodeAttribute(pos, 'externalTriples', newExternalTriples),
+    )([
+      // Update the subject uri, while keeping backlinks intact
+      updateSubject({
+        pos,
+        targetSubject: location.uri,
+        keepBacklinks: true,
+        keepProperties: false,
+        keepExternalTriples: true,
+      }),
+    ]).transaction;
+
+    const newSelection = moveNodeSelectionForward(
+      state.selection.map(setLocationTr.doc, setLocationTr.mapping),
+      setLocationTr.doc,
+    );
+    setLocationTr.setSelection(newSelection);
+    dispatch(setLocationTr);
+  };
+}

package/declarations/addon/components/common/documents/preview.d.ts

@@ -13,7 +13,7 @@ interface Signature<Doc extends PreviewableDocument> {
 export default class DocumentPreview<Doc extends PreviewableDocument> extends Component<Signature<Doc>> {
     controller?: SayController;
     isExpanded: boolean;
-    onInsert(): void;
+    onInsert: import("ember-concurrency").TaskForAsyncTaskFunction<unknown, () => Promise<void>>;
     togglePreview(): void;
     get isFavourite(): boolean | undefined;
     toggleFavourite: (event: MouseEvent) => void;

package/declarations/addon/plugins/location-plugin/_private/utils/location-helpers.d.ts

@@ -0,0 +1,3 @@
+import { Address } from './address-helpers';
+import { Area, Place } from './geo-helpers';
+export declare function getLocationUri(location: Address | Place | Area): string;

package/declarations/addon/plugins/location-plugin/contextual-actions/index.d.ts

@@ -1,14 +1,16 @@
 import { EditorState } from '@lblod/ember-rdfa-editor';
-import { LocationType } from '@lblod/ember-rdfa-editor-lblod-plugins/components/location-plugin/map';
 export declare function getContextualActions(): (state: EditorState, searchQuery?: string) => {
+    label: string;
     id: string;
     group: string;
-    command: import("@lblod/ember-rdfa-editor").Command;
-    label: string;
-    locationType: LocationType;
-    icon: string;
+    command: (state: EditorState, dispatch: (tr: import("@lblod/ember-rdfa-editor").Transaction) => void) => void;
 }[];
-export declare function getContextualActionGroups(): (state: EditorState) => {
+export declare function getContextualActionGroups(): (state: EditorState) => ({
     id: string;
     label: string;
-}[];
+    sticky?: undefined;
+} | {
+    id: string;
+    label: string;
+    sticky: string;
+})[];

package/declarations/addon/plugins/location-plugin/utils/replace-location.d.ts

@@ -0,0 +1,5 @@
+import { ResolvedPNode } from '@lblod/ember-rdfa-editor/utils/_private/types';
+import { Address } from './address-helpers';
+import { Area, Place } from './geo-helpers';
+import { EditorState, Transaction } from '@lblod/ember-rdfa-editor';
+export declare function replaceLocationCommand(node: ResolvedPNode, location: Address | Place | Area): (state: EditorState, dispatch: (tr: Transaction) => void) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lblod/ember-rdfa-editor-lblod-plugins",
-  "version": "37.0.3",
+  "version": "37.1.0",
   "description": "Ember addon providing lblod specific plugins for the ember-rdfa-editor",
   "keywords": [
     "ember-addon",
@@ -111,7 +111,7 @@
     "@glint/ember-tsc": "^1.5.0",
     "@glint/environment-ember-loose": "^1.5.0",
     "@glint/environment-ember-template-imports": "^1.5.0",
-    "@lblod/ember-rdfa-editor": "13.8.0",
+    "@lblod/ember-rdfa-editor": "13.10.0",
     "@glint/template": "^1.7.7",
     "@rdfjs/to-ntriples": "^3.0.1",
     "@rdfjs/types": "^1.1.0",
@@ -184,7 +184,7 @@
     "@appuniversum/ember-appuniversum": "^3.12.0",
     "@ember/string": "3.x",
     "@glint/template": "^1.4.0",
-    "@lblod/ember-rdfa-editor": "^13.8.0",
+    "@lblod/ember-rdfa-editor": "^13.10.0",
     "ember-concurrency": "^4.0.2",
     "ember-element-helper": "^0.8.6",
     "ember-intl": "^7.0.0",

package/translations/en-US.yaml

@@ -452,6 +452,7 @@ location-plugin:
     insert-point-on-map: Insert a point on the map
     insert-area: Insert area
     other-elements: Other elements
+    location-suggestions: Location suggestions
   types:
     address: Address
     place: Place

package/translations/nl-BE.yaml

@@ -449,6 +449,7 @@ location-plugin:
     insert-point-on-map: Punt op de kaart invoegen
     insert-area: Gebied invoegen
     other-elements: Andere elementen
+    location-suggestions: Locatiesuggesties
   types:
     address: Adres
     place: Plaats