Skip to content

Integrating Tim's work on separating RDF forms #779

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
timea-solid wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Integrating Tim's work on separating RDF forms #779

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c1f7f95
Stage 1 is done. The widgets ↔ forms circular dependency is broken:
timbl Apr 20, 2026
879e309
- error.ts ↔ widgets index cycle: broke #778
timbl Apr 20, 2026
6296162
cancel and continue button handlers #778
timea-solid Jun 1, 2026
18d02c5
update snapshots for tests #778
timea-solid Jun 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 51 additions & 9 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions src/widgets/buttons.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -636,7 +636,7 @@ export function button (dom: HTMLDocument, iconURI: string | undefined, text: st
*
* @returns <dDomElement> - the button
*/
export function cancelButton (dom: HTMLDocument, handler: (_event?: any) => void) {
export function cancelButton (dom: HTMLDocument, handler?: (_event?: any) => void) {
const b = button(dom, cancelIconURI, 'Cancel', handler)
if (b.firstChild) { // sigh for tsc
(b.firstChild as HTMLElement).style.opacity = '0.3' // Black X is too harsh: current language is grey X
Expand All @@ -651,7 +651,7 @@ export function cancelButton (dom: HTMLDocument, handler: (_event?: any) => void
*
* @returns <dDomElement> - the button
*/
export function continueButton (dom: HTMLDocument, handler: (_event: any) => void) {
export function continueButton (dom: HTMLDocument, handler?: (_event: any) => void) {
return button(dom, checkIconURI, 'Continue', handler)
}

Expand Down
5 changes: 2 additions & 3 deletions src/widgets/error.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,8 @@
* Meanwhile the stack is dumped to the console for the developer, so you actually know
* where it happened!
*/

import { cancelButton } from '../widgets'
import { style } from '../style'
import { cancelButton } from './buttons'
import * as style from '../style'
import styleConstants from '../styleConstants'
Comment on lines +13 to 15

export function errorMessageBlock (dom: HTMLDocument, err: string | Error, backgroundColor?: string, err2?: Error): HTMLDivElement {
Expand Down
5 changes: 2 additions & 3 deletions src/widgets/forms.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import * as $rdf from 'rdflib'
import { store } from 'solid-logic'
import * as utils from '../utils'
import { IconicMultiSelect } from './multiSelect'
import * as widgets from '../widgets'
export { basicField, fieldLabel, fieldStore, renderNameValuePair } from './forms/basic' // Note default export

export { field, mostSpecificClassURI, fieldFunction } from './forms/fieldFunction'
Expand Down Expand Up @@ -1329,7 +1328,7 @@ export function makeDescription (
const editable = kb.updater.editable(dataDoc.uri)
let submit
if (editable) {
submit = widgets.continueButton(dom, saveChange)
submit = buttons.continueButton(dom, saveChange)
submit.disabled = true // until the filled has been modified
submit.style.visibility = 'hidden'
submit.style.float = 'right'
Expand Down Expand Up @@ -1879,7 +1878,7 @@ export function buildCheckboxForm (dom, kb, lab, del, ins, form, dataDoc, trista
const negation = holdsAll(del)
if (state && negation) {
box.appendChild(
widgets.errorMessageBlock(
errorMessageBlock(
dom,
'Inconsistent data in dataDoc!\n' + ins + ' and\n' + del
)
Expand Down
19 changes: 10 additions & 9 deletions src/widgets/forms/autocomplete/autocompleteBar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ and so on. See the state diagram in the documentation. The AUtocomplete Picker
import ns from '../../../ns'
import { icons } from '../../../iconBase'
import { store } from 'solid-logic'
import * as widgets from '../../../widgets'
import { askName, button, cancelButton as makeCancelButton, continueButton, deleteButtonWithCheck } from '../../buttons'
import { makeDropTarget } from '../../dragAndDrop'
import * as utils from '../../../utils'

import { renderAutoComplete, AutocompleteDecoration, setVisible } from './autocompletePicker' // dbpediaParameters
Expand Down Expand Up @@ -40,7 +41,7 @@ export async function renderAutocompleteControl (dom:HTMLDocument,
}

async function greenButtonHandler (_event) {
const webid = await widgets.askName(dom, store, creationArea, ns.vcard('url'), undefined, WEBID_NOUN)
const webid = await askName(dom, store, creationArea, ns.vcard('url'), undefined, WEBID_NOUN)
if (!webid) {
return // cancelled by user
}
Expand Down Expand Up @@ -87,16 +88,16 @@ export async function renderAutocompleteControl (dom:HTMLDocument,
}
}

const acceptButton = widgets.continueButton(dom)
const acceptButton = continueButton(dom)
acceptButton.setAttribute('data-testid', 'accept-button')

const cancelButton = widgets.cancelButton(dom)
const cancelButton = makeCancelButton(dom)
cancelButton.setAttribute('data-testid', 'cancel-button')
const deleteButtonContainer = dom.createElement('div')
const noun = acOptions.targetClass ? utils.label(acOptions.targetClass) : 'item'
const deleteButton = widgets.deleteButtonWithCheck(dom, deleteButtonContainer, noun, deleteOne) // need to knock out this UI or caller does that
const deleteButton = deleteButtonWithCheck(dom, deleteButtonContainer, noun, deleteOne) // need to knock out this UI or caller does that
deleteButton.setAttribute('data-testid', 'delete-button')
const editButton = widgets.button(dom, EDIT_ICON, 'Edit', _event => {
const editButton = button(dom, EDIT_ICON, 'Edit', _event => {
editing = !editing
syncEditingStatus()
})
Expand Down Expand Up @@ -132,11 +133,11 @@ export async function renderAutocompleteControl (dom:HTMLDocument,
// creationArea.appendChild(await renderAutoComplete(dom, barOptions, autoCompleteDone)) wait for searchButton
creationArea.style.width = '100%'
if (barOptions.manualURIEntry) {
const plus = creationArea.appendChild(widgets.button(dom, GREEN_PLUS, barOptions.idNoun, greenButtonHandler))
widgets.makeDropTarget(plus, droppedURIHandler, undefined)
const plus = creationArea.appendChild(button(dom, GREEN_PLUS, barOptions.idNoun, greenButtonHandler))
makeDropTarget(plus, droppedURIHandler, undefined)
}
if (barOptions.dbLookup && !acOptions.currentObject && !acOptions.permanent) {
creationArea.appendChild(widgets.button(dom, SEARCH_ICON, barOptions.idNoun, searchButtonHandler))
creationArea.appendChild(button(dom, SEARCH_ICON, barOptions.idNoun, searchButtonHandler))
}
}
syncEditingStatus()
Expand Down
25 changes: 13 additions & 12 deletions src/widgets/forms/autocomplete/autocompleteField.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@
*/
import ns from '../../../ns'
import { store } from 'solid-logic'
import * as widgets from '../../../widgets'
import { style } from '../../../style'
import { errorMessageBlock } from '../../error'
import { fieldLabel } from '../basic'
import * as style from '../../../style'
import { renderAutocompleteControl } from './autocompleteBar'
import { QueryParameters } from './publicData'
import { NamedNode, BlankNode, Literal, Variable, st } from 'rdflib'
Expand Down Expand Up @@ -67,7 +68,7 @@ export function autocompleteField (
await kb.updater?.updateMany(deletables, insertables)
} catch (err) {
callbackFunction(false, err)
box.appendChild(widgets.errorMessageBlock(dom, 'Autocomplete form data update error:' + err, null, err))
box.appendChild(errorMessageBlock(dom, 'Autocomplete form data update error:' + err, err))
return
Comment on lines 69 to 72
}
callbackFunction(true, '')
Expand All @@ -77,7 +78,7 @@ export function autocompleteField (
const oldValue = kb.the(subject, property as any, null, doc)
if (!oldValue) {
callbackFunction(false, 'NO data to elete')
box.appendChild(widgets.errorMessageBlock(dom, 'Autocomplete delete: no old data!'))
box.appendChild(errorMessageBlock(dom, 'Autocomplete delete: no old data!'))
return
}
// const oldName = kb.any(oldValue as any, labelProperty as any, null, doc)
Expand All @@ -92,7 +93,7 @@ export function autocompleteField (
} catch (err) {
const e2 = new Error('Autocomplete form data delete error:' + err)
callbackFunction(false, err)
box.appendChild(widgets.errorMessageBlock(dom, e2, null, err))
box.appendChild(errorMessageBlock(dom, e2, err))
return
Comment on lines 93 to 97
}
callbackFunction(true, '') // changed
Expand All @@ -117,7 +118,7 @@ export function autocompleteField (
const property = kb.any(form, ns.ui('property'))
if (!property) {
return box.appendChild(
widgets.errorMessageBlock(dom, 'Error: No property given for autocomplete field: ' + form)
errorMessageBlock(dom, 'Error: No property given for autocomplete field: ' + form)
)
}
const labelProperty = kb.any(form, ns.ui('labelProperty')) || ns.schema('name')
Expand All @@ -128,7 +129,7 @@ export function autocompleteField (
if (!dataSource) {
// console.log('@@ connectedStatements ACF ', kb.connectedStatements(form).map(x => x.toNT()).join('\n'))
return box.appendChild(
widgets.errorMessageBlock(dom, 'Error: No data source given for autocomplete field: ' + form)
errorMessageBlock(dom, 'Error: No data source given for autocomplete field: ' + form)
)
}
const queryParams:QueryParameters = {
Expand Down Expand Up @@ -163,16 +164,16 @@ export function autocompleteField (
queryParams.searchByNameQuery = kb.anyJS(dataSource, ns.ui('searchByNameQuery'), null, dataSource.doc())
if (!queryParams.searchByNameQuery) {
return box.appendChild(
widgets.errorMessageBlock(dom, 'Error: No searchByNameQuery given for endpoint data Source: ' + form))
errorMessageBlock(dom, 'Error: No searchByNameQuery given for endpoint data Source: ' + form))
}
queryParams.insitituteDetailsQuery = kb.anyJS(dataSource, ns.ui('insitituteDetailsQuery'), null, dataSource.doc())
} else {
// return box.appendChild(
// widgets.errorMessageBlock(dom, 'Error: No SPARQL endpoint given for autocomplete field: ' + form))
// errorMessageBlock(dom, 'Error: No SPARQL endpoint given for autocomplete field: ' + form))
const searchByNameURI = kb.anyJS(dataSource, ns.ui('searchByNameURI'))
if (!searchByNameURI) {
return box.appendChild(
widgets.errorMessageBlock(dom, 'Error: No searchByNameURI OR sparql endpoint given for dataSource: ' + dataSource)
errorMessageBlock(dom, 'Error: No searchByNameURI OR sparql endpoint given for dataSource: ' + dataSource)
)
}
queryParams.searchByNameURI = searchByNameURI
Expand Down Expand Up @@ -206,7 +207,7 @@ export function autocompleteField (
autocompleteOptions.currentName = kb.any(autocompleteOptions.currentObject, labelProperty, null, doc) as Literal
}

lhs.appendChild(widgets.fieldLabel(dom, property as any, form))
lhs.appendChild(fieldLabel(dom, property as any, form))

const barOptions = {
editable,
Expand All @@ -216,7 +217,7 @@ export function autocompleteField (
renderAutocompleteControl(dom, subject as NamedNode, barOptions, autocompleteOptions, addOneIdAndRefresh, deleteOne).then((control) => {
rhs.appendChild(control)
}, (err) => {
rhs.appendChild(widgets.errorMessageBlock(dom, `Error rendering autocomplete ${form}: ${err}`, '#fee', err)) //
rhs.appendChild(errorMessageBlock(dom, `Error rendering autocomplete ${form}: ${err}`, '#fee', err)) //
})
return box
}
Expand Down
Loading
Loading