starting to connect the peices together

Author: Tim Berners-Lee

src/widgets/forms/autocomplete/autocompleteField.ts

@@ -8,20 +8,28 @@ import { renderAutocompleteControl } from './autocompletBar'
 import { NamedNode, BlankNode, Variable, st } from 'rdflib'
 
 /**
- * Render a autocomplete form field
- *
- * The same function is used for many similar one-value fields, with different
- * regexps used to validate.
- *
- * @param dom The HTML Document object aka Document Object Model
- * @param container  If present, the created widget will be appended to this
- * @param already A hash table of (form, subject) kept to prevent recursive forms looping
- * @param subject The thing about which the form displays/edits data
- * @param form The form or field to be rendered
- * @param doc The web document in which the data is
- * @param callbackFunction Called when data is changed?
- *
- * @returns The HTML widget created
+  * Render a autocomplete form field
+  *
+  * Teh autocomplete form searches for an iobject in a definitive public database,
+  * and allows the user to search for it by name, displaying a list of objects whose names match
+  * the input to date, and letting  the user either click on one of the list,
+  * or just go on untill there is only one.  The process then returns two values,
+  * the URiI of the object and its name.
+  *
+  * @param dom The HTML Document object aka Document Object Model
+  * @param container  If present, the created widget will be appended to this
+  * @param already A hash table of (form, subject) kept to prevent recursive forms looping
+  * @param subject The thing about which the form displays/edits data
+  * @param form The form or field to be rendered
+  * @param doc The web document in which the data is
+  * @param callbackFunction Called when data is changed so other parts can be refreshed.
+  *
+  * Form properties:
+  * @param ui:property  The property to store the object itself
+  * @param ui:labelProperty The property used to store the name of the object
+  * @param ui:categoory The class of objects to be searched, if fixed (else dep on class of subject)
+  *
+  * @returns The HTML widget created
  */
 // eslint-disable-next-line complexity
 export function autocompleteField (
@@ -34,15 +42,15 @@ export function autocompleteField (
   callbackFunction: (ok: boolean, errorMessage: string) => void
 ): HTMLElement {
   async function addOneIdAndRefresh (result, _name) {
-    const ds = kb.statementsMatching(subject, property as any) // remove any multiple values
+    const deletables = kb.statementsMatching(subject, property as any, null, null) // remove any multiple values in any doc
 
-    let is = ds.map(statement => st(statement.subject, statement.predicate, result, statement.why)) // can include >1 doc
-    if (is.length === 0) {
+    let insertables = deletables.map(statement => st(statement.subject, statement.predicate, result, statement.why)) // can include >1 doc
+    if (insertables.length === 0) {
       // or none
-      is = [st(subject, property as any, result, doc)]
+      insertables = [st(subject, property as any, result, doc)]
     }
     try {
-      await kb.updater.updateMany(ds, is)
+      await kb.updater.updateMany(deletables, insertables)
     } catch (err) {
       callbackFunction(false, err)
       box.appendChild(widgets.errorMessageBlock(dom, 'Autocomplete form data write error:' + err))
@@ -66,70 +74,87 @@ export function autocompleteField (
 
   const property = kb.any(form, ns.ui('property'))
   if (!property) {
-    box.appendChild(
+    return box.appendChild(
       dom.createTextNode('Error: No property given for autocomplete field: ' + form)
     )
-    return box
   }
+  const labelProperty = kb.any(form, ns.ui('labelProperty')) || ns.schema('name')
+
   const searchClass = kb.any(form, ns.ui('searchClass'))
   if (!searchClass) {
     return box.appendChild(
       dom.createTextNode('Error: No searchClass given for autocomplete field: ' + form)
     )
   }
-  const endPoint = kb.any(form, ns.ui('endPoint'))
-  if (!endPoint) {
+  // Parse the data source into query options
+
+  const dataSource = kb.any(form, ns.ui('dataSource'))
+  if (!dataSource) {
     return box.appendChild(
-      dom.createTextNode('Error: No SPARQL endPoint given for autocomplete field: ' + form)
+      dom.createTextNode('Error: No data source given for autocomplete field: ' + form)
     )
   }
+  const queryParams = {} // @@ const?
+  queryParams.targetClass = kb.any(dataSource, ns.ui('targetClass'), null, dataSource.doc()) // Different ontology?
+  queryParams.name = kb.anyJS(dataSource, ns.schema('name'), null, dataSource.doc()) // Different ontology?
+  queryParams.logo = kb.anyJS(dataSource, ns.schema('logo'), null, dataSource.doc()) // Different ontology?
+
+  if (!queryParams.targetClass) {
+    queryParams.targetClass = kb.any(subject, ns.rdf('type')) // @@ be more selective of which class if many
+  }
+  const endPoint = kb.any(dataSource, ns.ui('endPoint'), null, dataSource.doc())
+  if (endPoint) { // SPARQL
+    queryParams.endpoint = endPoint
+
+    queryParams.searchByNameQuery = kb.the(dataSource, ns.ui('searchByNameQuery'), null, dataSource.doc())
+    if (!queryParams.searchByNameQuery) {
+      return box.appendChild(
+        dom.createTextNode('Error: No searchByNameQuery given for data Source: ' + form))
+    }
+    queryParams.insitituteDetailsQuery = kb.any(dataSource, ns.ui('insitituteDetailsQuery'), null, dataSource.doc())
+  } else {
+    return box.appendChild(
+      dom.createTextNode('Error: No SPARQL endPoint given for autocomplete field: ' + form))
+  }
   const queryTemplate = kb.any(form, ns.ui('queryTemplate'))
   if (!queryTemplate) {
-    box.appendChild(
+    return box.appendChild(
       dom.createTextNode('Error: No queryTemplate given for autocomplete field: ' + form)
     )
-    return box
   }
   // It can be cleaner to just remove empty fields if you can't edit them anyway
   const suppressEmptyUneditable = kb.anyJS(form, ns.ui('suppressEmptyUneditable'), null, formDoc)
   const editable = kb.updater.editable((doc as NamedNode).uri)
-  lhs.appendChild(widgets.fieldLabel(dom, property as any, form))
-  const uri = widgets.mostSpecificClassURI(form)
-  let params = widgets.fieldParams[uri]
-  if (params === undefined) params = {} // non-bottom field types can do this
-  // const theStyle = params.style || style.textInputStyle
-  const klass = kb.the(form, ns.ui('category'), null, formDoc)
-  /*
-  { label: string;
-    logo: string;
-    searchByNameQuery?: string;
-    searchByNameURI?: string;
-    insitituteDetailsQuery?: string;
-    endPoint?: string;
-    class: object
-  }
-*/
-
-  const searchByNameQuery = kb.the(form, ns.ui('searchByNameQuery'), null, formDoc)
-  const queryParams = {
-    label: 'from form',
-    logo: '',
-    class: klass,
-    endPoint: endPoint.uri,
-    searchByNameQuery
-  }
 
   const options = { // cancelButton?: HTMLElement,
     // acceptButton?: HTMLElement,
-    class: klass,
+    targetClass: dataSource.targetClass, // @@ simplify?
     queryParams
   }
+  let obj = kb.any(subject, property as any, undefined, doc)
+  if (!obj) {
+    obj = kb.any(form, ns.ui('default'))
+    if (obj) {
+      options.currentObject = obj
+      options.currentName = kb.the(obj, labelProperty, null, form.doc())
+    } else { // No data or default. Should we suprress the whole field?
+      if (suppressEmptyUneditable && !editable) {
+        box.style.display = 'none' // clutter removal
+        return box
+      }
+    }
+  } else { // get object and name from target data:
+    options.currentObject = obj
+    options.currentName = kb.the(obj, labelProperty, null, subject.doc())
+  }
 
-  rhs.appendChild(await renderAutocompleteControl(dom, subject, options, addOneIdAndRefresh))
+  lhs.appendChild(widgets.fieldLabel(dom, property as any, form))
 
-  // @@ set existing value is any
-  // renderAutoComplete(dom, options, addOneIdAndRefresh).then(acWiget => rhs.appendChild(acWiget))
+  // const searchByNameQuery = kb.the(form, ns.ui('searchByNameQuery'), null, formDoc)
 
+  rhs.appendChild(await renderAutocompleteControl(dom, subject, options, addOneIdAndRefresh))
+
+  /*
   const field = dom.createElement('input')
   ;(field as any).style = style.textInputStyle // Do we have to override length etc?
   rhs.appendChild(field)
@@ -144,28 +169,7 @@ export function autocompleteField (
   field.setAttribute('maxLength', maxLength ? '' + maxLength : '4096')
 
   doc = doc || widgets.fieldStore(subject, property as any, doc)
-
-  let obj = kb.any(subject, property as any, undefined, doc)
-  if (!obj) {
-    obj = kb.any(form, ns.ui('default'))
-  }
-  if (obj) {
-    field.value = obj.value || ''
-  }
-  field.setAttribute('style', style)
-  if (!kb.updater) {
-    throw new Error('kb has no updater')
-  }
-  if (!editable) {
-    field.readOnly = true // was: disabled. readOnly is better
-    ;(field as any).style = style.textInputStyleUneditable
-    // backgroundColor = textInputBackgroundColorUneditable
-    if (suppressEmptyUneditable && field.value === '') {
-      box.style.display = 'none' // clutter
-    }
-    return box
-  }
-
+*/
   return box
 }
 

src/widgets/forms/autocomplete/autocompletePicker.ts

@@ -21,20 +21,23 @@ const AUTOCOMPLETE_DEBOUNCE_MS = 300
 // const autocompleteRowStyle = 'border: 0.2em solid straw;' // @@ white
 
 /*
-Autocomplete happens in four phases:
+Autocomplete happens in 6 phases:
   1. The search string is too small to bother
   2. The search string is big enough, and we have not loaded the array
   3. The search string is big enough, and we have loaded array up to the limit
        Display them and wait for more user input
   4. The search string is big enough, and we have loaded array NOT to the limit
      but including all matches.   No more fetches.
      If user gets more precise, wait for them to select one - or reduce to a single
-  5. Optionally waiting for accept button to be pressed
+  5. Single one selected. Optionally waiting for accept button to be pressed, or can change string and go to 5 or 2
+  6. Locked with a value. Press 'edit' button to return to 5
 */
 
 type AutocompleteOptions = { cancelButton?: HTMLElement,
                              acceptButton?: HTMLElement,
                              class: NamedNode,
+                             currentObject: NamedNode,
+                             currentLabel: string,
                              queryParams: QueryParameters }
 
 interface Callback1 {
@@ -147,6 +150,7 @@ export async function renderAutoComplete (dom: HTMLDocument, options:Autocomplet
     }
     inputEventHandlerLock = true
     const languagePrefs = await getPreferredLanguages()
+    const language = languagePrefs[0] // if have to pick one
     const filter = searchInput.value.trim().toLowerCase()
     if (filter.length < AUTOCOMPLETE_THRESHOLD) { // too small
       clearList()
@@ -160,7 +164,7 @@ export async function renderAutoComplete (dom: HTMLDocument, options:Autocomplet
       }
       let bindings
       try {
-        bindings = await queryPublicDataByName(filter, OrgClass, options.queryParams)
+        bindings = await queryPublicDataByName(filter, OrgClass, languagePrefs, options.queryParams)
         // bindings = await queryDbpedia(sparql)
       } catch (err) {
         complain('Error querying db of organizations: ' + err)
@@ -225,6 +229,12 @@ export async function renderAutoComplete (dom: HTMLDocument, options:Autocomplet
   const cell = head.appendChild(dom.createElement('td'))
   const searchInput = cell.appendChild(dom.createElement('input'))
   searchInput.setAttribute('type', 'text')
+  if (options.currentObject) { // If have existing value then jump into the endgame of the autocomplete
+    searchInput.value = options.currentLabel || ''
+    foundName = options.currentLabel
+    lastFilter = options.currentLabel
+    foundObject = options.currentObject
+  }
   const searchInputStyle = style.searchInputStyle ||
     'border: 0.1em solid #444; border-radius: 0.5em; width: 100%; font-size: 100%; padding: 0.1em 0.6em' // @
   searchInput.setAttribute('style', searchInputStyle)

src/widgets/forms/autocomplete/publicData.ts

@@ -54,6 +54,11 @@ export const wikidataClasses = {
   SportsOrganization: 'http://www.wikidata.org/entity/Q4438121'
 }
 
+export const fetcherOptionsJsonPublicData = {
+  credentials: 'omit', // try to avoid CORS problems. Data is public so no auth
+  headers: { Accept: 'application/json' }
+}
+
 export async function getPreferredLanguages () {
   return ['fr', 'en', 'de', 'it'] // @@ testing only -- code me later
 }
@@ -63,6 +68,7 @@ export const escoParameters:QueryParameters = {
   searchByNameQuery: null, // No sparql endpoint
   searchByNameURI: 'https://ec.europa.eu/esco/api/search?language=$(language)&type=occupation&text=$(name)',
   endpoint: null,
+  returnFormat: 'ESCO',
   class: {}
 }
 
@@ -225,6 +231,15 @@ export function loadFromBindings (kb, solidSubject:NamedNode, bindings, doc, pre
 
 /* ESCO sopecific
 */
+export function ESCOResultToBindings (json: Object): Bindings {
+  const results = json._embedded.results // Array
+  const bindings = results.map(result => {
+    const name = result.title
+    const uri = result.uri // like http://data.europa.eu/esco/occupation/57af9090-55b4-4911-b2d0-86db01c00b02
+    return { name: { value: name, type: 'literal' }, uri: { type: 'IRI', value: uri } } // simulate SPARQL bindings
+  })
+  return bindings
+}
 
 /*  Query all entities of given class and partially matching name
 */
@@ -235,39 +250,54 @@ export async function queryESCODataByName (filter: string, theClass:NamedNode, q
     .replace('$(class)', theClass)
   console.log('Querying ESCO data - uri: ' + queryURI)
 
-  const options = {
-    credentials: 'omit',
-    headers: { Accept: 'application/json' }
-  } // CORS
-  const response = await kb.fetcher.webOperation('GET', queryURI, options)
-  // complain('Error querying db of organizations: ' + err)
+  const response = await kb.fetcher.webOperation('GET', queryURI, fetcherOptionsJsonPublicData)
   const text = response.responseText
   console.log('    Query result  text' + text.slice(0, 500) + '...')
   if (text.length === 0) throw new Error('Wot no text back from ESCO query ' + queryURI)
   const json = JSON.parse(text)
-  console.log('    Query result JSON' + JSON.stringify(json, null, 4).slice(0, 500) + '...')
-
-  const results = json._embedded.results // Array
-  const bindings = results.map(result => {
-    const name = result.title
-    const uri = result.uri // like http://data.europa.eu/esco/occupation/57af9090-55b4-4911-b2d0-86db01c00b02
-    return { name: { value: name, type: 'literal' }, uri: { type: 'IRI', value: uri } } // simulate SPARQL bindings
-  })
-  return bindings
-  // return queryPublicDataSelect(sparql, queryTarget)
+  console.log('    ESCO Query result JSON' + JSON.stringify(json, null, 4).slice(0, 500) + '...')
+  return ESCOResultToBindings(json)
 }
 
 /*  Query all entities of given class and partially matching name
 */
-export async function queryPublicDataByName (filter: string, theClass:NamedNode, queryTarget: QueryParameters): Promise<Bindings> {
-  const sparql = queryTarget.searchByNameQuery
-    .replace('$(name)', filter)
-    .replace('$(limit)', '' + AUTOCOMPLETE_LIMIT)
-    .replace('$(class)', theClass)
-  console.log('Querying public data - sparql: ' + sparql)
-  return queryPublicDataSelect(sparql, queryTarget)
+export async function queryPublicDataByName (
+  filter: string,
+  theClass:NamedNode,
+  languages: Array<string>,
+  queryTarget: QueryParameters): Promise<Bindings> {
+  function substituteStrings (template: string):string {
+    return template.replace('$(name)', filter)
+      .replace('$(limit)', '' + AUTOCOMPLETE_LIMIT)
+      .replace('$(class)', theClass)
+  }
+  if (queryTarget.searchByNameQuery) {
+    const sparql = substituteStrings(queryTarget.searchByNameQuery)
+    console.log('Querying public data - sparql: ' + sparql)
+    return queryPublicDataSelect(sparql, queryTarget)
+  } else if (queryTarget.searchByNameURI) { // not sparql - random API
+    const queryURI = substituteStrings(queryTarget.searchByNameURI)
+    const response = await kb.fetcher.webOperation('GET', queryURI, fetcherOptionsJsonPublicData)
+    const text = response.responseText
+    console.log('    Query result  text' + text.slice(0, 500) + '...')
+    if (text.length === 0) throw new Error('Wot no text back from ESCO query ' + queryURI)
+    const json = JSON.parse(text)
+    console.log('    API Query result JSON' + JSON.stringify(json, null, 4).slice(0, 500) + '...')
+    if (json._embedded) {
+      console.log('      Looks like ESCO')
+      const bindings = ESCOResultToBindings(json)
+      return bindings
+    } else {
+      alert('Code me: unrecognized API return format')
+      console.log('*** Need to add code to parse unrecognized API JSON return\n' + JSON.stringify(json), null, 4)
+    }
+  } else {
+    throw new Error('Query source must have either rest API or SPARQL endpoint.')
+  }
 }
 
+/* Query a database using SPARQL SELECT
+*/
 export async function queryPublicDataSelect (sparql: string, queryTarget: QueryParameters): Promise<Bindings> {
   const myUrlWithParams = new URL(queryTarget.endpoint)
   myUrlWithParams.searchParams.append('query', sparql)
@@ -289,6 +319,8 @@ export async function queryPublicDataSelect (sparql: string, queryTarget: QueryP
   return bindings
 }
 
+/* Load from a database using SPARQL CONSTRUCT
+*/
 export async function queryPublicDataConstruct (sparql: string, pubicId: NamedNode, queryTarget: QueryParameters): Promise<Bindings> {
   console.log('queryPublicDataConstruct: sparql:', sparql)
   const myUrlWithParams = new URL(queryTarget.endpoint)