@lblod/ember-rdfa-editor-lblod-plugins 32.3.0 → 32.4.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 32.4.0
+
+### Minor Changes
+
+- [#582](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/582) [`96baaf4`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/96baaf43e1a976b167eea65f4d0255b6e74cd85f) Thanks [@lagartoverde](https://github.com/lagartoverde)! - Add new plugin for document validation with SHACL
+
+- [#584](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/584) [`b8f445a`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/b8f445ae720134f2dd579cb7c831812210c7c8f7) Thanks [@elpoelma](https://github.com/elpoelma)! - Add simple placeholder-mode to location variable
+  To correctly identify location placeholder nodes, the `data-say-variable` and `data-say-variable-type: oslo_location` attributes have been added to the serialization of oslo location nodes. This is similar to the approach used by other variable nodes.
+
+### Patch Changes
+
+- [#586](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/586) [`810f867`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/810f86766ac5fbc11e20a68545ab950ec07f61a7) Thanks [@lagartoverde](https://github.com/lagartoverde)! - Fix bug in roadsign regulation plugin where you couldn't search a sign if you had selected a category
+
+- [#587](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/587) [`d5914c0`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/d5914c0ce63dba5aca15fbb00d634e811ece41b9) Thanks [@elpoelma](https://github.com/elpoelma)! - roadsign-regulation plugin: fix issue where measure could not be inserted as being variable/dynamic
+
+- [#582](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/582) [`b21bd08`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/b21bd08744fd58b7e7e7286d9f31da7de692defe) Thanks [@lagartoverde](https://github.com/lagartoverde)! - Fix missing translations in citation-plugin
+
 ## 32.3.0
 
 ### Minor Changes

package/addon/components/document-validation-plugin/card.gts

@@ -0,0 +1,137 @@
+import Component from '@glimmer/component';
+import { SayController } from '@lblod/ember-rdfa-editor';
+import AuCard from '@appuniversum/ember-appuniversum/components/au-card';
+import { documentValidationPluginKey } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/document-validation-plugin';
+import AuIcon from '@appuniversum/ember-appuniversum/components/au-icon';
+import { CloseFilledIcon } from '@appuniversum/ember-appuniversum/components/icons/close-filled';
+import { CheckFilledIcon } from '@appuniversum/ember-appuniversum/components/icons/check-filled';
+import { selectNodeBySubject } from '@lblod/ember-rdfa-editor/commands/_private/rdfa-commands/select-node-by-subject';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import AuButton from '@appuniversum/ember-appuniversum/components/au-button';
+import { ExternalLinkIcon } from '@appuniversum/ember-appuniversum/components/icons/external-link';
+import t from 'ember-intl/helpers/t';
+import { eq } from 'ember-truth-helpers';
+
+interface Sig {
+  Args: {
+    controller: SayController;
+  };
+}
+
+export default class DocumentValidationPluginCard extends Component<Sig> {
+  get controller() {
+    return this.args.controller;
+  }
+  get validationState() {
+    const state = documentValidationPluginKey.getState(
+      this.controller.mainEditorState,
+    );
+    if (!state) {
+      console.warn(
+        'DocumentValidationPluginCard needs the documentValidation plugin to function. Is it configured?',
+      );
+      return undefined;
+    }
+    return state;
+  }
+  get documentValidationErrors() {
+    if (!this.validationState) return [];
+    const { propertiesWithErrors } = this.validationState;
+    if (!propertiesWithErrors) return undefined;
+
+    return propertiesWithErrors;
+  }
+  get propertiesWithoutErrors() {
+    if (!this.validationState) return [];
+    const { propertiesWithoutErrors } = this.validationState;
+    return propertiesWithoutErrors;
+  }
+  goToSubject = (subject: string) => {
+    this.controller.doCommand(selectNodeBySubject({ subject }), {
+      view: this.controller.mainEditorView,
+    });
+    this.controller.focus();
+  };
+  get status() {
+    if (!this.validationState?.report) return 'not-run';
+    if (this.documentValidationErrors?.length === 0) {
+      if (this.propertiesWithoutErrors?.length === 0) return 'no-matches';
+      return 'valid';
+    }
+    return 'invalid';
+  }
+  get isSuccesslike() {
+    return ['valid', 'no-matches'].includes(this.status);
+  }
+
+  <template>
+    <AuCard
+      @flex={{true}}
+      @divided={{true}}
+      @isOpenInitially={{true}}
+      @expandable={{true}}
+      @shadow={{true}}
+      @size='small'
+      class={{if
+        this.isSuccesslike
+        'say-document-validation__card-valid'
+        'say-document-validation__card-invalid'
+      }}
+      as |c|
+    >
+      <c.header>
+        <p class='au-u-medium au-u-h6'>
+          {{#if (eq this.status 'valid')}}
+            {{t 'document-validation-plugin.valid-document-title'}}
+          {{else if (eq this.status 'invalid')}}
+            {{t 'document-validation-plugin.invalid-document-title'}}
+          {{else if (eq this.status 'not-run')}}
+            {{t 'document-validation-plugin.document-not-validated-title'}}
+          {{else if (eq this.status 'no-matches')}}
+            {{t 'document-validation-plugin.no-matching-rules'}}
+          {{/if}}
+        </p>
+      </c.header>
+      <c.content>
+        <p class='au-u-medium au-u-para-small'>{{t
+            'document-validation-plugin.description'
+          }}</p>
+        {{#each this.documentValidationErrors as |error|}}
+          <div class='say-document-validation__error-container'>
+            <AuIcon
+              @icon={{CloseFilledIcon}}
+              @size='large'
+              @ariaHidden={{true}}
+              class='say-document-validation__icon-error au-u-margin-right-small'
+            />
+            <div>
+              {{error.message}}
+              <AuButton
+                class='au-u-padding-left-none au-u-padding-right-none'
+                @icon={{ExternalLinkIcon}}
+                @skin='link'
+                title={{error.subject}}
+                {{on 'click' (fn this.goToSubject error.subject)}}
+              >{{t 'document-validation-plugin.see-related-node'}}</AuButton>
+            </div>
+          </div>
+        {{/each}}
+        {{#each this.propertiesWithoutErrors as |property|}}
+          <div class='say-document-validation__error-container'>
+            <div class='au-u-margin-right-small'>
+              <AuIcon
+                @icon={{CheckFilledIcon}}
+                @size='large'
+                @ariaHidden={{true}}
+                class='say-document-validation__icon-success'
+              />
+            </div>
+            {{property.message}}
+          </div>
+        {{/each}}
+      </c.content>
+
+    </AuCard>
+  </template>
+}

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

@@ -0,0 +1,76 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import { on } from '@ember/modifier';
+import not from 'ember-truth-helpers/helpers/not';
+import IntlService from 'ember-intl/services/intl';
+import AuButton from '@appuniversum/ember-appuniversum/components/au-button';
+import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
+import { NodeSelection, SayController } from '@lblod/ember-rdfa-editor';
+import { type LocationPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/location-plugin/node';
+import { action } from '@ember/object';
+import t from 'ember-intl/helpers/t';
+import { v4 as uuidv4 } from 'uuid';
+import { replaceSelectionWithLocation } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/location-plugin/_private/utils/node-utils';
+
+interface Signature {
+  Args: {
+    controller: SayController;
+    config: LocationPluginConfig;
+    templateMode?: boolean;
+  };
+  Element: HTMLLIElement;
+}
+
+export default class LocationPluginInsertComponent extends Component<Signature> {
+  @service declare intl: IntlService;
+
+  get selectedLocationNode() {
+    const { selection, schema } = this.controller.activeEditorState;
+    if (
+      selection instanceof NodeSelection &&
+      selection.node.type === schema.nodes.oslo_location
+    ) {
+      return selection.node;
+    } else {
+      return;
+    }
+  }
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  get canInsert() {
+    return (
+      !!this.controller.activeEditorView.props.nodeViews?.oslo_location &&
+      !this.selectedLocationNode
+    );
+  }
+
+  @action
+  insertLocationPlaceholder() {
+    const uri = `http://data.lblod.info/variables/${
+      this.args.templateMode ? '--ref-uuid4-' : ''
+    }${uuidv4()}`;
+    replaceSelectionWithLocation(
+      this.controller,
+      uri,
+      undefined,
+      this.args.config.subjectTypesToLinkTo,
+    );
+  }
+
+  <template>
+    <li class='au-c-list__item' ...attributes>
+      <AuButton
+        @icon={{AddIcon}}
+        @iconAlignment='left'
+        @skin='link'
+        {{on 'click' this.insertLocationPlaceholder}}
+        @disabled={{not this.canInsert}}
+      >
+        {{t 'location-plugin.insert-placeholder'}}
+      </AuButton>
+    </li>
+  </template>
+}

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

@@ -24,7 +24,6 @@ import {
   Point,
   Polygon,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/location-plugin/utils/geo-helpers';
-import { replaceSelectionWithLocation } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/location-plugin/utils/node-utils';
 import { type LocationPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/location-plugin/node';
 import { NodeContentsUtils } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/location-plugin/node-contents';
 import Edit from './edit';
@@ -34,6 +33,7 @@ import LocationMap, {
 } 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';
 
 export type CurrentLocation = Address | GlobalCoordinates | undefined;
 
@@ -293,6 +293,7 @@ export default class LocationPluginInsertComponent extends Component<Signature>
         // Insert
         replaceSelectionWithLocation(
           this.controller,
+          toInsert.uri,
           toInsert,
           this.args.config.subjectTypesToLinkTo,
         );

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

@@ -42,7 +42,7 @@ export default class AddressNodeviewComponent extends Component<Signature> {
     if (this.filled) {
       return this.address?.formatted;
     } else {
-      return this.label;
+      return this.label ?? this.intl.t('location-plugin.nodeview.placeholder');
     }
   }
   get class() {

package/addon/components/roadsign-regulation-plugin/expanded-measure.gts

@@ -12,6 +12,7 @@ import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import { ZONALITY_OPTIONS } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/roadsign-regulation-plugin/constants';
 import { Task } from 'ember-concurrency';
+import { isSome } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 
 export type InsertMobilityMeasureTask = Task<
   void,
@@ -41,7 +42,10 @@ export default class ExpandedMeasure extends Component<Signature> {
   }
 
   get insertButtonDisabled() {
-    return this.isPotentiallyZonal && !this.zonalityValue;
+    return (
+      (this.isPotentiallyZonal && !this.zonalityValue) ||
+      (this.args.concept.variableSignage && !isSome(this.temporalValue))
+    );
   }
 
   @action

package/addon/components/roadsign-regulation-plugin/roadsigns-modal.gts

@@ -151,7 +151,7 @@ export default class RoadsignsModal extends Component<Signature> {
   }
 
   searchCodes = restartableTask(async (term: string) => {
-    const category = this.selectedCategory?.label;
+    const category = this.selectedCategory?.uri;
     const type = this.selectedType?.label;
     const types = type ? [type] : undefined;
     await timeout(DEBOUNCE_MS);

package/addon/plugins/document-validation-plugin/index.ts

@@ -0,0 +1,196 @@
+import factory from '@rdfjs/dataset';
+import SHACLValidator from 'rdf-validate-shacl';
+import { Parser as ParserN3 } from 'n3';
+import { RdfaParser } from 'rdfa-streaming-parser';
+import { ProsePlugin, PluginKey, EditorView } from '@lblod/ember-rdfa-editor';
+import removeQuotes from '@lblod/ember-rdfa-editor-lblod-plugins/utils/remove-quotes';
+import {
+  BlankNode,
+  DataFactory,
+  DatasetCore,
+  DatasetCoreFactory,
+  NamedNode,
+  Quad,
+} from '@rdfjs/types';
+import ValidationReport from 'rdf-validate-shacl/src/validation-report';
+import { SayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
+
+export const documentValidationPluginKey =
+  new PluginKey<DocumentValidationPluginState>('DOCUMENT_VALIDATION');
+
+interface DocumentValidationPluginArgs {
+  documentShape: string;
+}
+
+export type ShaclValidationReport = ValidationReport.ValidationReport<
+  DataFactory<Quad, Quad> &
+    DatasetCoreFactory<Quad, Quad, DatasetCore<Quad, Quad>>
+>;
+
+interface DocumentValidationResult {
+  report?: ValidationReport;
+  propertiesWithoutErrors: { message: string }[];
+  propertiesWithErrors: (
+    | {
+        message: string;
+        subject: string | undefined;
+      }
+    // TODO get rid of this?
+    | undefined
+  )[];
+}
+export interface DocumentValidationTransactionMeta
+  extends DocumentValidationResult {
+  type: string;
+}
+export interface DocumentValidationPluginState
+  extends DocumentValidationResult {
+  documentShape: string;
+  validationCallback: typeof validationCallback;
+}
+
+export const documentValidationPlugin = (
+  options: DocumentValidationPluginArgs,
+) =>
+  new ProsePlugin<DocumentValidationPluginState>({
+    key: documentValidationPluginKey,
+    state: {
+      init() {
+        return {
+          validationCallback: validationCallback,
+          documentShape: options.documentShape,
+          propertiesWithoutErrors: [],
+          propertiesWithErrors: [],
+        };
+      },
+      apply(tr, state) {
+        const pluginTransaction = tr.getMeta(documentValidationPluginKey) as
+          | DocumentValidationTransactionMeta
+          | undefined;
+        if (pluginTransaction && pluginTransaction.type === 'setNewReport') {
+          return {
+            ...state,
+            report: pluginTransaction.report,
+            propertiesWithoutErrors: pluginTransaction.propertiesWithoutErrors,
+            propertiesWithErrors: pluginTransaction.propertiesWithErrors,
+          };
+        }
+
+        return state;
+      },
+    },
+  });
+
+async function validationCallback(view: EditorView, documentHtml: string) {
+  const documentValidationState = documentValidationPluginKey.getState(
+    view.state,
+  );
+  if (!documentValidationState) {
+    console.warn('No shape found in the document validation plugin');
+    return;
+  }
+  const { documentShape } = documentValidationState;
+  const rdf = await htmlToRdf(documentHtml);
+
+  const shacl = await parse(documentShape);
+
+  const validator = new SHACLValidator(shacl, {
+    // @ts-expect-error ts doesn't recognize the configuration parameter not sure why
+    allowNamedNodeInList: true,
+  });
+  const report = validator.validate(rdf);
+  const sayFactory = new SayDataFactory();
+  const propertyPred = sayFactory.namedNode(
+    'http://www.w3.org/ns/shacl#property',
+  );
+  const propertyNodes = [
+    ...shacl.match(undefined, propertyPred, undefined),
+  ].map((quad: Quad) => quad.object);
+
+  const propertiesWithErrors: {
+    sourceShape: BlankNode | NamedNode<string>;
+    focusNode: BlankNode | NamedNode<string> | null;
+  }[] = [];
+  for (const r of report.results) {
+    const sourceShape = r.sourceShape;
+    if (sourceShape)
+      propertiesWithErrors.push({ sourceShape, focusNode: r.focusNode });
+  }
+  const errorMessagePred = sayFactory.namedNode(
+    'http://www.w3.org/ns/shacl#resultMessage',
+  );
+  const propertiesWithErrorsMessages = propertiesWithErrors
+    .map(({ sourceShape, focusNode }) => {
+      const match = shacl.match(sourceShape, errorMessagePred, undefined);
+      const message = [...match][0]?.object.value;
+      return message
+        ? { message: removeQuotes(message), subject: focusNode?.value }
+        : undefined;
+    })
+    .filter((message) => message);
+  const propertiesWithoutErrorsArray = propertyNodes.filter((propertyNode) =>
+    propertiesWithErrors.some((propertyWithError) => {
+      return propertyWithError.sourceShape.value !== propertyNode.value;
+    }),
+  );
+
+  const successMessagePred = sayFactory.namedNode(
+    'http://mu.semte.ch/vocabularies/ext/successMessage',
+  );
+  const propertiesWithoutErrors = propertiesWithoutErrorsArray
+    .map((propertyNode) => {
+      const match = shacl.match(propertyNode, successMessagePred, undefined);
+      const message = [...match][0]?.object.value;
+      return message ? { message: removeQuotes(message) } : undefined;
+    })
+    .filter((message) => message);
+  const transaction = view.state.tr;
+  transaction.setMeta(documentValidationPluginKey, {
+    type: 'setNewReport',
+    report,
+    propertiesWithoutErrors,
+    propertiesWithErrors: propertiesWithErrorsMessages,
+  });
+  transaction.setMeta('addToHistory', false);
+  view.dispatch(transaction);
+}
+
+interface N3Parser {
+  parse: (
+    triples: string,
+    callback: (error: string, quad: Quad) => void,
+  ) => void;
+}
+
+async function parse(triples: string): Promise<DatasetCore<Quad>> {
+  return new Promise((resolve, reject) => {
+    // @ts-expect-error we have to use a custom type to make the quads compatible or else ts will complain
+    const parser: N3Parser = new ParserN3();
+    const dataset = factory.dataset();
+    parser.parse(triples, (error, quad) => {
+      if (error) {
+        console.warn(error);
+        reject(error);
+      } else if (quad) {
+        dataset.add(quad);
+      } else {
+        resolve(dataset);
+      }
+    });
+  });
+}
+
+function htmlToRdf(html: string): Promise<DatasetCore<Quad>> {
+  return new Promise((res, rej) => {
+    const myParser = new RdfaParser({ contentType: 'text/html' });
+    const dataset = factory.dataset();
+    myParser
+      .on('data', (data) => {
+        dataset.add(data);
+      })
+      .on('error', rej)
+      .on('end', () => res(dataset));
+    myParser.write(html);
+    myParser.end();
+  });
+}