Semantic search, rough but functional

frontend/src/aspects/exploration.ts

@@ -7,6 +7,7 @@ import mainRouter from '../global/main-router';
 import explorer from '../global/explorer-view';
 import controller from '../global/explorer-controller';
 import welcomeView from '../global/welcome-view';
+import semanticSearchView from '../global/semantic-search';
 import SuggestionsPanel from '../panel-suggestions/suggestions-view';
 import deparam from '../utilities/deparam';
 
@@ -89,5 +90,8 @@ channel.on('currentRoute', (route, panel) => {
     // panel.
     browserHistory.replaceState(panel.cid, document.title);
 });
+
 welcomeView.on({'search:start': controller.resetSourceListFromSearchResults}, controller);
 welcomeView.on({'suggestions:show': controller.showSuggestionsPanel}, controller);
+
+semanticSearchView.on('search', controller.resetSemanticSearch, controller);

frontend/src/aspects/navigation.ts

@@ -12,6 +12,7 @@ import explorationRouter from '../global/exploration-router';
 import userFsm from '../global/user-fsm';
 import explorerView from '../global/explorer-view';
 import notFoundView from '../global/notfound-view';
+import semanticSearchView from '../global/semantic-search';
 
 history.once('route notfound', () => {
     menuView.render().$el.appendTo('#header');
@@ -54,5 +55,8 @@ userFsm.on('exit:lost', () => notFoundView.$el.detach());
 menuView.on('feedback', () => feedbackView.render().$el.appendTo('body'));
 
 feedbackView.on('close', () => feedbackView.$el.detach());
+
 welcomeView.on('search:start', () => userFsm.handle('explore'));
 welcomeView.on('suggestions:show', () => userFsm.handle('explore'));
+
+semanticSearchView.on('search', () => userFsm.handle('explore'));

frontend/src/explorer/explorer-event-controller.ts

@@ -36,6 +36,7 @@ import {
     isOntologyClass,
 } from '../utilities/linked-data-utilities';
 import { itemsForSourceQuery } from '../sparql/compile-query';
+import modelToQuery from '../semantic-search/modelToQuery';
 
 interface ExplorerEventController extends Events {}
 class ExplorerEventController {
@@ -90,6 +91,19 @@ class ExplorerEventController {
         this.explorerView.reset(sourceListPanel);
     }
 
+    resetSemanticSearch(model: Model): SearchResultListView {
+        const query = modelToQuery(model);
+        const items = new ItemGraph();
+        items.sparqlQuery(query);
+        const collection = new FlatItemCollection(items);
+        const resultsView = new SearchResultListView({
+            collection,
+            selectable: false,
+        });
+        this.explorerView.reset(resultsView);
+        return resultsView;
+    }
+
     showSuggestionsPanel() {
         const suggestionsView = new SuggestionsView();
         this.explorerView.reset(suggestionsView);
@@ -111,6 +125,10 @@ class ExplorerEventController {
                 const flat = collection.get(annotation.id);
                 flat.trigger('focus', flat);
             });
+        } else {
+            const itemPanel = new AnnotationView({ model: result });
+            this.explorerView.popUntil(searchResults).push(itemPanel);
+            return itemPanel;
         }
     }
 

frontend/src/explorer/route-patterns.ts

@@ -11,4 +11,5 @@ export default {
     'item:external:edit':     'explore/item/:serial/external/edit',
     'item:annotations':       'explore/item/:serial/annotations',
     'search:results:sources': 'explore/sources?*queryParams',
+    'search:results:semantic': 'explore/query',
 };

frontend/src/forms/add-button-template.hbs

@@ -1,4 +1,4 @@
-<button type=button class="button">
+<button type=button class="button is-success">
     <span>Add</span>
     <span class="icon is-small"><i class="fas fa-plus"></i></span>
 </button>

frontend/src/forms/multifield-view.ts

@@ -60,6 +60,7 @@ export default class Multifield extends CompositeView {
 }
 
 extend(Multifield.prototype, {
+    className: 'rit-multifield',
     template: multifieldTemplate,
     subviews: [{
         view: 'collectionView',

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

@@ -20,4 +20,9 @@ export default class Select2PickerView extends BasePicker {
         this.$('select').select2('destroy');
         return super.remove();
     }
+
+    open(): this {
+        this.$('select').select2('open');
+        return this;
+    }
 }

frontend/src/global/hbsPartials.ts

@@ -0,0 +1,5 @@
+import Handlebars from 'handlebars/dist/handlebars.runtime';
+
+import sparqlPreamble from '../sparql/query-templates/preamble-template';
+
+Handlebars.registerPartial('sparqlPreamble', sparqlPreamble);

frontend/src/global/semantic-search.ts

@@ -0,0 +1,3 @@
+import SemanticSearchView from '../semantic-search/semantic-search-view';
+
+export default new SemanticSearchView();

frontend/src/global/welcome-view.ts

@@ -1,4 +1,5 @@
 import WelcomeView from '../welcome/welcome-view';
 import searchBox from './searchbox';
+import semSearch from './semantic-search';
 
-export default new WelcomeView({searchBox});
+export default new WelcomeView({searchBox, semSearch});

frontend/src/main.ts

@@ -7,6 +7,7 @@ import './global/scroll-easings';
 import { i18nPromise } from './global/i18n';
 import './global/internalLinks';
 import './global/hbsHelpers';
+import './global/hbsPartials';
 import user from './global/user';
 import { prefetch } from './global/ld-store';
 import './global/item-cache';

frontend/src/panel-search-results/search-result-base-view.ts

@@ -2,9 +2,9 @@ import { extend, after, constant } from 'lodash';
 
 import View, { CompositeView, ViewOptions as BaseOpt } from '../core/view';
 import FlatItem from '../common-adapters/flat-item-model';
+import SearchResultItemView from '../item-summary-block/item-summary-block-view';
 
 import SearchResultSourceView from './search-result-source-view';
-import SearchResultItemView from './search-result-item-view';
 import searchResultBaseTemplate from './search-result-base-template';
 
 export interface ViewOptions extends BaseOpt {
@@ -36,11 +36,12 @@ export default class SearchResultView extends CompositeView<FlatItem> {
     }
 
     setContentView(model: FlatItem): void {
-        const ctor = (
-            model.has('annotation') ?
-            SearchResultSourceView :
-            SearchResultItemView
-        );
+        let ctor: any = SearchResultSourceView;
+        if (!model.has('annotation')) {
+            ctor = SearchResultItemView
+            this.$el.removeClass('search-result box');
+            this.undelegate('click');
+        }
         this.contentView = new ctor({ model }).render();
         this.render().activateContent();
     }

frontend/src/semantic-search/chain-view-test.ts

@@ -3,6 +3,7 @@ import { constant } from 'lodash';
 import { enableI18n, startStore, endStore, event } from '../test-util';
 import mockOntology from '../mock-data/mock-ontology';
 
+import Model from '../core/model';
 import ldChannel from '../common-rdf/radio';
 import { readit } from '../common-rdf/ns';
 import Graph from '../common-rdf/graph';
@@ -17,35 +18,44 @@ describe('semantic search ChainView', function() {
     beforeEach(function() {
         const ontology = new Graph(mockOntology);
         ldChannel.reply('ontology:graph', constant(ontology));
+        ldChannel.reply(
+            'ontology:promise', constant(Promise.resolve(ontology))
+        );
     });
 
     afterEach(function() {
         ldChannel.stopReplying('ontology:graph');
+        ldChannel.stopReplying('ontology:promise');
     });
 
     afterEach(endStore);
 
-    it('can be constructed in isolation', function() {
+    it('can be constructed in isolation', async function() {
         const view = new Chain();
         expect(view.items.length).toBe(1);
+        await event(view.items[0], 'ready');
         expect(view.items[0]['typeGroup']).toBeDefined();
         expect(view.items[0]['typeGroup'].collection.length).toBe(3);
     });
 
-    it('can be constructed with a preselection', function() {
+    it('can be constructed with a preselection', async function() {
         const Reader = ldChannel.request('obtain', readit('Reader'));
-        const view = new Chain({ model: Reader });
+        const model = new Model({ precedent: Reader });
+        const view = new Chain({ model });
         expect(view.items.length).toBe(1);
+        await event(view.items[0], 'ready');
         expect(view.items[0]['predicateGroup']).toBeDefined();
         expect(view.items[0]['predicateGroup'].collection.length).toBe(2);
     });
 
-    it('appends dropdowns as choices are made', function() {
+    it('appends dropdowns as choices are made', async function() {
         const view = new Chain();
         const dropdown1 = view.items[0] as Dropdown;
+        await event(dropdown1, 'ready');
         dropdown1.val(readit('Reader'));
         expect(view.items.length).toBe(2);
         const dropdown2 = view.items[1] as Dropdown;
+        await event(dropdown2, 'ready');
         expect(dropdown2.predicateGroup).toBeDefined();
         expect(dropdown2.predicateGroup.collection.length).toBe(2);
     });

frontend/src/semantic-search/chain-view.ts

@@ -3,37 +3,55 @@ import { extend } from 'lodash';
 import Model from '../core/model';
 import Collection from '../core/collection';
 import View, { CollectionView } from '../core/view';
+import { xsd } from '../common-rdf/ns';
 
+import semChannel from './radio';
 import Dropdown from './dropdown-view';
+import FilterInput from './filter-input-view';
 
 export default class Chain extends CollectionView {
     initialize(): void {
-        let collection = this.collection;
+        this.model = this.model || new Model();
+        let collection = this.collection || this.model.get('chain');
         if (!collection) {
-            this.collection = collection = new Collection([
-                { precedent: this.model } as unknown as Model,
+            collection = new Collection([
+                this.model.pick(['precedent', 'range']) as unknown as Model,
             ]);
         }
+        this.model.set('chain', this.collection = collection);
         this.initItems().render().initCollectionEvents();
         this.listenTo(collection, 'change:selection', this.updateControls);
     }
 
     makeItem(model: Model): View {
-        const precedent = model.get('precedent');
-        const scheme = precedent && precedent.id.split(':')[0];
-        switch (scheme) {
-        case 'logic':
-            // TODO
-        case 'filter':
-            // TODO
+        const scheme = model.get('scheme');
+        if (scheme === 'logic' && model.get('action') !== 'not') {
+            return semChannel.request('branchout', model);
+        }
+        if (scheme === 'filter') {
+            return new FilterInput({ model });
         }
         return new Dropdown({ model });
     }
 
     updateControls(model, selection): void {
         const collection = this.collection;
         while (collection.last() !== model) collection.pop();
-        collection.push({ precedent: selection } as unknown as Model);
+        if (!selection) return;
+        const [scheme, action] = selection.id.split(':');
+        const precedent = model.get('precedent');
+        const range = model.get('range');
+        const newModel = new Model();
+        switch (scheme) {
+        case 'filter':
+            newModel.set('filter', selection);
+        case 'logic':
+            newModel.set({ precedent, range, scheme, action });
+            break;
+        default:
+            newModel.set('precedent', selection);
+        }
+        collection.push(newModel);
     }
 }