Feature/semantic search

frontend/package.json

@@ -32,7 +32,7 @@
     "lodash": "^4.17.10",
     "rangy": "^1.3.0",
     "rdf-parse": "^1.1.1",
-    "select2": "^4.0.13",
+    "select2": "^4.1.0-rc.0",
     "streamify-string": "^1.0.1"
   },
   "devDependencies": {

frontend/src/forms/select2-picker-view.ts

@@ -0,0 +1,23 @@
+import 'select2';
+
+import BasePicker from './base-picker-view';
+
+/**
+ * A very thin wrapper around `BasePicker` that enables the select2 plugin.
+ */
+export default class Select2PickerView extends BasePicker {
+    beforeRender(): this {
+        this.$('select').select2('destroy');
+        return this;
+    }
+
+    afterRender(): this {
+        this.$('select').select2({ dropdownAutoWidth: true });
+        return this;
+    }
+
+    remove(): this {
+        this.$('select').select2('destroy');
+        return super.remove();
+    }
+}

frontend/src/panel-annotation/annotation-edit-view.ts

@@ -8,7 +8,7 @@ import Node from '../common-rdf/node';
 import Graph from '../common-rdf/graph';
 
 import ItemEditor from '../item-edit/item-edit-view';
-import PickerView from '../forms/base-picker-view';
+import PickerView from '../forms/select2-picker-view';
 import FilteredCollection from '../common-adapters/filtered-collection';
 import ItemGraph from '../common-adapters/item-graph';
 import ClassPickerView from '../forms/ontology-class-picker-view';
@@ -50,12 +50,7 @@ export default class AnnotationEditView extends CompositeView<FlatItem> {
     initialize() {
         this.itemOptions = new ItemGraph();
         this.itemOptions.comparator = this.sortOptions;
-        this.itemPicker = new PickerView({
-            collection: this.itemOptions,
-            className: '',
-        });
-        // Replace Bulma select by select2 select. TODO: make this less hacky.
-        this.itemPicker.$('select').width('95%').select2();
+        this.itemPicker = new PickerView({ collection: this.itemOptions });
         this.classPicker = new ClassPickerView({
             collection: getOntologyClasses(),
             preselection: this.model.get('class'),
@@ -112,7 +107,6 @@ export default class AnnotationEditView extends CompositeView<FlatItem> {
 
     remove(): this {
         if (this.validator) this.validator.destroy();
-        this.itemPicker.$('select').select2('destroy');
         super.remove();
         return this;
     }
@@ -263,7 +257,7 @@ export default class AnnotationEditView extends CompositeView<FlatItem> {
         if (isBlank(this.model.underlying)) {
             // Remove the placeholder.
             this.collection.underlying.remove(this.model.underlying);
-        } 
+        }
         explorerChannel.trigger('annotationEditView:close', this);
         return this;
     }

frontend/src/panel-related-items/related-items-edit-view.ts

@@ -11,8 +11,9 @@ import Graph from '../common-rdf/graph';
 import ItemGraph from '../common-adapters/item-graph';
 import explorerChannel from '../explorer/explorer-radio';
 import { announceRoute } from '../explorer/utilities';
+import { applicablePredicates, relationsFromModel } from '../utilities/relation-utilities';
+
 import RelationEditor from './relation-editor-view';
-import { applicablePredicates, relationsFromModel } from './relation-utilities';
 import relatedItemsTemplate from './related-items-edit-template';
 
 const announce = announceRoute('item:related:edit', ['model', 'id']);

frontend/src/panel-related-items/related-items-view.ts

@@ -9,10 +9,10 @@ import Node from '../common-rdf/node';
 import explorerChannel from '../explorer/explorer-radio';
 import { announceRoute } from '../explorer/utilities';
 import { getLabel, getLabelFromId } from '../utilities/linked-data-utilities';
+import { applicablePredicates, relationsFromModel } from '../utilities/relation-utilities';
 
 import relatedItemsTemplate from './related-items-template';
 import RelatedItemsRelationView from './related-items-relation-view';
-import { applicablePredicates, relationsFromModel } from './relation-utilities';
 
 const announce = announceRoute('item:related', ['model', 'id']);
 const getPredicateId = r => r.get('predicate').id;

frontend/src/style/forms.sass

@@ -1,3 +1,5 @@
+@import bulma-custom
+
 .form-feedback-bar
     p
         margin-left: 0.25em
@@ -26,3 +28,19 @@
 
 .upload-source-form p.filename
     padding: 7px
+
+.readit-picker.select
+    span.select2
+        @extend .input
+        box-shadow: none
+        padding-right: 2.5em
+        padding-left: .75em
+        &.select2-container .select2-selection--single
+            border: none
+            .select2-selection__rendered
+                padding: 0
+            .select2-selection__arrow
+                width: 43px
+                height: 100%
+                b
+                    border: none

frontend/yarn.lock

@@ -6963,10 +6963,10 @@ scss-tokenizer@^0.2.3:
     js-base64 "^2.1.8"
     source-map "^0.4.2"
 
-select2@^4.0.13:
-  version "4.0.13"
-  resolved "https://registry.yarnpkg.com/select2/-/select2-4.0.13.tgz#0dbe377df3f96167c4c1626033e924372d8ef44d"
-  integrity sha512-1JeB87s6oN/TDxQQYCvS5EFoQyvV6eYMZZ0AeA4tdFDYWN3BAGZ8npr17UBFddU0lgAt3H0yjX3X6/ekOj1yjw==
+select2@^4.1.0-rc.0:
+  version "4.1.0-rc.0"
+  resolved "https://registry.yarnpkg.com/select2/-/select2-4.1.0-rc.0.tgz#ba3cd3901dda0155e1c0219ab41b74ba51ea22d8"
+  integrity sha512-Hr9TdhyHCZUtwznEH2CBf7967mEM0idtJ5nMtjvk3Up5tPukOLXbHUNmh10oRfeNIhj+3GD3niu+g6sVK+gK0A==
 
 semver-greatest-satisfied-range@^1.1.0:
   version "1.1.0"