#3658 - Move commonly used JS editor code to the JS API

- Introduce SCSS defining a set of colors that editors should use for various purposes
- Clean up build of the JS API module
- Added missing exports to the compact_v2 module
- Added markedAnnotations to the AnnotatedText and support filling in when unpacking CompactAnnotatedText

inception/inception-diam-editor/src/main/ts/src/AnnotationsByLabelList.svelte

@@ -24,7 +24,7 @@
     } from "@inception-project/inception-js-api";
     import LabelBadge from "./LabelBadge.svelte";
     import SpanText from "./SpanText.svelte";
-    import { groupRelationsByLabel, groupSpansByLabel, uniqueLabels, uniqueOffsets } from "./Utils";
+    import { groupRelationsByLabel, groupSpansByLabel, uniqueLabels } from "./Utils";
 
     export let ajaxClient: DiamAjax;
     export let data: AnnotatedText;

inception/inception-js-api/marker-wicket-module

@@ -0,0 +1 @@
+Marker file which activates the profile "wicket-module" from the parent POM.

inception/inception-js-api/pom.xml

@@ -26,4 +26,11 @@
   <artifactId>inception-js-api</artifactId>
   <name>INCEpTION - JavaScript API</name>
   <description>JavaScript APIs for INCEpTION</description>
+
+  <dependencies>
+    <dependency>
+      <groupId>org.apache.wicket</groupId>
+      <artifactId>wicket-core</artifactId>
+    </dependency>
+  </dependencies>
 </project>

inception/inception-js-api/src/main/java/de/tudarmstadt/ukp/inception/diam/editor/api/resources/InceptionJsApiResourceReference.java

@@ -0,0 +1,47 @@
+/*
+ * Licensed to the Technische Universität Darmstadt under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The Technische Universität Darmstadt 
+ * licenses this file to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.
+ *  
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package de.tudarmstadt.ukp.inception.diam.editor.api.resources;
+
+import org.apache.wicket.request.resource.JavaScriptResourceReference;
+
+public class InceptionJsApiResourceReference
+    extends JavaScriptResourceReference
+{
+    private static final long serialVersionUID = 1L;
+
+    private static final InceptionJsApiResourceReference INSTANCE = //
+            new InceptionJsApiResourceReference();
+
+    /**
+     * Gets the instance of the resource reference
+     *
+     * @return the single instance of the resource reference
+     */
+    public static InceptionJsApiResourceReference get()
+    {
+        return INSTANCE;
+    }
+
+    /**
+     * Private constructor
+     */
+    private InceptionJsApiResourceReference()
+    {
+        super(InceptionJsApiResourceReference.class, "InceptionJsAPI.min.js");
+    }
+}

inception/inception-js-api/src/main/ts/build.mjs

@@ -0,0 +1,57 @@
+/*
+ * Licensed to the Technische Universität Darmstadt under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The Technische Universität Darmstadt
+ * licenses this file to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import yargs from 'yargs/yargs'
+import { hideBin } from 'yargs/helpers'
+import esbuild from 'esbuild'
+import { sassPlugin } from 'esbuild-sass-plugin'
+import fs from 'fs-extra'
+
+const argv = yargs(hideBin(process.argv)).argv
+
+const packagePath = 'de/tudarmstadt/ukp/inception/diam/editor/api/resources/'
+
+let outbase = `../../../target/js/${packagePath}`
+
+const defaults = {
+  bundle: true,
+  sourcemap: true,
+  minify: !argv.live,
+  target: 'es6',
+  loader: { '.ts': 'ts' },
+  logLevel: 'info',
+  plugins: [sassPlugin()]
+}
+
+if (argv.live) {
+  defaults.watch = {
+    onRebuild (error, result) {
+      if (error) console.error('watch build failed:', error)
+      else console.log('watch build succeeded:', result)
+    }
+  }
+  outbase = `../../../target/classes/${packagePath}`
+} else {
+  fs.emptyDirSync(outbase)
+}
+fs.mkdirsSync(`${outbase}`)
+
+esbuild.build(Object.assign({
+  entryPoints: ['index.ts'],
+  outfile: `${outbase}/InceptionJsAPI.min.js`,
+  globalName: 'InceptionJsAPI'
+}, defaults))

inception/inception-js-api/src/main/ts/index.ts

@@ -15,6 +15,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import './src/style/InceptionEditorColors.scss'
+
 export * from './src/diam'
 export * from './src/editor'
 export * from './src/model'

inception/inception-js-api/src/main/ts/src/model/AnnotatedText.ts

@@ -22,6 +22,7 @@ import { Relation } from './Relation'
 import { Span } from './Span'
 import { TextMarker } from './TextMarker'
 import { Layer } from './Layer'
+import { MarkerType } from './Marker'
 
 export class AnnotatedText {
   window: Offsets
@@ -30,6 +31,7 @@ export class AnnotatedText {
   relations: Map<VID, Relation> = new Map<VID, Relation>()
   spans: Map<VID, Span> = new Map<VID, Span>()
   annotationMarkers: Map<VID, AnnotationMarker[]>
+  markedAnnotations: Map<MarkerType, VID[]>
   textMarkers: TextMarker[]
 
   __getOrCreateLayer (id: number): Layer {

inception/inception-js-api/src/main/ts/src/model/AnnotationMarker.ts

@@ -22,3 +22,26 @@ export class AnnotationMarker {
   type: MarkerType
   vid: Array<VID>
 }
+
+/**
+ * Groups the given markers by the VID to which they apply.
+ *
+ * @param markerList a list of markers.
+ * @returns the grouped markers.
+ */
+export function groupMarkers<T> (markerList: T[] | undefined): Map<VID, Array<T>> {
+  const markerMap = new Map<VID, Array<T>>()
+  if (markerList) {
+    markerList.forEach(marker => {
+      marker[1].forEach(vid => {
+        let ms = markerMap.get(vid)
+        if (!ms) {
+          ms = []
+          markerMap.set(vid, ms)
+        }
+        ms.push(marker)
+      })
+    })
+  }
+  return markerMap
+}

inception/inception-js-api/src/main/ts/src/model/compact_v2/CompactAnnotatedText.ts

@@ -15,8 +15,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { AnnotationMarker } from '@inception-project/inception-js-api'
-import { AnnotatedText, Offsets, VID } from '..'
+import { AnnotatedText, Offsets, VID, AnnotationMarker } from '..'
+import { MarkerType } from '../Marker'
 import { CompactAnnotationMarker, unpackCompactAnnotationMarker } from './CompactAnnotationMarker'
 import { CompactLayer, unpackCompactLayer } from './CompactLayer'
 import { CompactRelation, unpackCompactRelation } from './CompactRelation'
@@ -51,18 +51,36 @@ export function unpackCompactAnnotatedText (raw: CompactAnnotatedText): Annotate
 
   const annotationMarkers = raw.annotationMarkers?.map(unpackCompactAnnotationMarker)
   cooked.annotationMarkers = makeMarkerMap(annotationMarkers)
+  cooked.markedAnnotations = makeMarkedAnnotationsMap(annotationMarkers)
   cooked.textMarkers = raw.textMarkers?.map(unpackCompactTextMarker) || []
   return cooked
 }
 
+function makeMarkedAnnotationsMap (annotationMarkers?: AnnotationMarker[]) : Map<MarkerType, VID[]> {
+  const markedAnnotations = new Map<MarkerType, VID[]>()
+  if (annotationMarkers) {
+    for (const marker of annotationMarkers) {
+      for (const vid of marker.vid) {
+        let ms = markedAnnotations.get(marker.type)
+        if (!ms) {
+          ms = []
+          markedAnnotations.set(marker.type, ms)
+        }
+        ms.push(vid)
+      }
+    }
+  }
+  return markedAnnotations
+}
+
 /**
  * Converts a list of {@link CompactAnnotationMarker}s to an easily accessible map using the {@link VID}
  * as key and the set of markers on that annotation as values.
  *
  * @param markerList a list of {@link CompactAnnotationMarker}s
  * @returns the map
  */
-export function makeMarkerMap<AnnotationMarker> (markerList: AnnotationMarker[] | undefined): Map<VID, Array<AnnotationMarker>> {
+export function makeMarkerMap (markerList: AnnotationMarker[] | undefined): Map<VID, Array<AnnotationMarker>> {
   const markerMap = new Map<VID, Array<AnnotationMarker>>()
   if (markerList) {
     markerList.forEach(marker => {

inception/inception-js-api/src/main/ts/src/model/compact_v2/index.ts

@@ -21,3 +21,5 @@ export { CompactArgument } from './CompactArgument'
 export { CompactRelationAttributes } from './CompactRelationAttributes'
 export { CompactSpan } from './CompactSpan'
 export { CompactSpanAttributes } from './CompactSpanAttributes'
+export { CompactTextMarker } from './CompactTextMarker'
+export { CompactAnnotationMarker } from './CompactAnnotationMarker'

inception/inception-js-api/src/main/ts/src/style/InceptionEditorColors.scss

@@ -0,0 +1,26 @@
+/*
+ * Licensed to the Technische Universität Darmstadt under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The Technische Universität Darmstadt 
+ * licenses this file to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.
+ *  
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+$i7n-focus-color: rgba(255,165,0);
+$i7n-focus-bounds-color: rgb(255, 106, 0);
+$i7n-match-focus-color: rgb(0, 217, 255);
+
+:root {
+  --i7n-focus-color: #{$i7n-focus-color};
+  --i7n-focus-bounds-color: #{$i7n-focus-bounds-color};
+  --i7n-match-focus-color: #{$i7n-match-focus-color};
+}

inception/inception-js-api/src/main/ts/src/util/Coloring.ts

@@ -1,4 +1,20 @@
-
+/*
+ * Licensed to the Technische Universität Darmstadt under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The Technische Universität Darmstadt
+ * licenses this file to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 export type ColorCode = string
 
 // http://24ways.org/2010/calculating-color-contrast/

inception/inception-js-api/src/main/ts_template/package.json

@@ -9,7 +9,7 @@
     "url": "https://github.com/inception-project/issues"
   },
   "scripts": {
-    "build": "esbuild --bundle index.ts --outdir=dist --minify --sourcemap"
+    "build": "node build.mjs"
   },
   "dependencies": {
     "@stomp/stompjs": "${stomp-stompjs.version}",