Feature request: custom dialog construction via config #152
Labels
No labels
bug
config
documentation
duplicate
enhancement
good first issue
help wanted
invalid
question
wontfix
No milestone
No project
No assignees
3 participants
Notifications
Due date
No due date set.
Dependencies
No dependencies set.
Reference
orinoco/shacl-vue#152
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
From @mih
Some initial thoughts:
https://github.com/psychoinformatics-de/shacl-vue/pull/253 is an appropriate use case for developing the functionality proposed in this issue further.
One drawback of the current state of that PR is:
The idea is to create a TTL templating approach. The UI config will contain a TTL template that should be populated for a record of the specified class, taking the properties returned by the uploading process as inputs, and creating the necessary graph store quads from that. To feed this design process, I'm taking as an example the likelihood that the act of uploading a file won't necessarily be 1-to-1 with creating a
Distribution. There might be any number of convoluted (or flat) relations with any number of other classes and slots involved. And the eventual approach should allow that.The core inputs are:
shaclvue:GitAnnexUpload: trueshacl-vuereturns file information using a defined APIAnd then once the
shacl-vueform, of which one of the fields will be a new genericFileUploadEditorcomponent, is saved:For the last step, there should be a means to prevent duplicate quads.
Also, remember:
The use case:
Granthas aproposal_documentslot with rangeDocumentDistributioncan be adistribution_ofaDocumentproposal_documentslot, for ease of useAn example template:
The pipeline would be:
InstanceUploadEditorcomponent would be rendered for any slot that has a class asrangeAND theshaclvue:gitAnnexUpload: trueannotation; it instantiates anInstanceSelectEditoras well as theGitAnnexUploader.GitAnnexUploaderemits an event withfiledata includingname,size,hash,annexKeyInstanceUploadEditorresponds to the event by:filedata as inputshacl-vue-internal functionality to parse the output TTL and add new quads to the graph store (accounting for deduplicating blank nodes)InstanceSelectEditorinside theInstanceUploadEditorThe last step of setting the selected item needs additional specification, because the "item" could be of any sort (here
TRR379Document). Note that the template above has{this.pid}, which is meant to receive the PID of that to-be-created and afterwards to-be-selected item. How this PID is constructed should therefore be known inside and outside of the template, which makes me think configuration is a good way to approach this. Therefore, apart from providing the TTL template itself via config, we could also provide the record PID construction template. Since theInstanceUploadEditorwill render for any class, we can use config to distinguish templates per class. E.g.:There is currently some renewed interest in this feature. First some background and exchange of ideas:
@jsheunis:
@mih:
@jsheunis:
@mih:
@jsheunis:
@mih:
@jsheunis:
Ok. I have working local prototype of this feature (wip commit:
datalink/shacl-vue@bf8754feeb)Config
It starts with configuration:
Looking at the new option
wizard_editors, a wizard editor is declared by its nameDOIWizard. A wizard editor can have a few general properties to make it intuitive for the user:tooltipandiconwill render for the button that initiates the specific wizarddescriptionwill render inside the initiated wizard formThen one has to specify
inputs. Aninputcan have several properties (not all properties are 100% supported yet):propis the field name through which this input is referenced, both inshacl-vueinternals and inside the TTL templatenamewill render as the input labeldescriptionis a further description of the input that will render when hovering over the input labeltypetellsshacl-vuewhich type of input component to render (these are the primitives that need to be supported; currently onlytext,text-paragraphandbooleanare supported; more will be added...)placeholderwill render if the field has no entered value yetrequiredwill make the field required (or not) for validationpatternwill apply a regex check (for text-based inputs) for validationdefaultwill prepulate the value of the inputFinally, one has to specify a TTL template string, which will be populated using the values entered for the wizard inputs. The TTL string format is the same as is already supported by
shacl-vuevia theInstancesUploadEditorfunctionality. For example:The TTL can also be specified via file, which is done by pointing to the associated
content:key, as is already supported and also shown in the config above.Finally, another new config option
wizard_editor_selectioncan be used to specify which wizards should be made available to which classes. The config above says: show theDOI Wizardforxyzri:XYZPublicationrecords (during creation/editing).Demo
The following video shows what the prototype looks like locally:
How does it work?
NodeShapeEditor, which renders for a given record when it is being created or edited inside theFormEditor, will check thewizard_editor_selectionto see if any wizards needs to be made available for the current record type (a.k.a. class). If yes, it will render those as buttons right at the top of the form fields, below theAll fieldsbutton. The wizards render as clickable buttons, with customizable tooltips and icons, which will open a dialog when clicked, passing along all config options related to the selected wizard.WizardEditorwill render inside the dialog. It will display all general configured options of the wizard, and will then render a row per input. Inputs have their own descriptions and validation rules embedded (taken from config). Reset and Cancel buttons are self-explanatory. The save button will run validation on all inputs, and on successful validation will emit asaveevent to the parent component (NodeShapeEditor), also passing along all entered input values.saveevent from a wizard, theNodeShapeEditorwill:wizardDataxyzrins:myFirstPub) to thewizardDataunder thepidfield (this,{pid}, is how the record can be referenced inside the TTL template, which is why it is necessary as part ofwizardDatathat is used in the next string serialization step)wizardDatato the existingfillStringTemplateutility functionality in order to get the valid TTL outputrdfDS.parseTTLandDedup(newTTL)At this point we need to highlight an important caveat: the node ID of a record is how it is indexed inside
formData, which isshacl-vue's internal javascript-object-based representation of the graph data; and the node ID of the current record (e.g.xyzrins:myFirstPub) is not necessarily the same as the actual PID of the current record. This could be due to multiple reasons:shacl-vueassigns a random UUID as the node ID for the relevantformDataindexformDatanode ID migh under some circumstances be the actual PID of the record, but this is also not necessarily persistent throughout the user's interaction with the form, because they could also change the PID.So, taking the nature of the "node ID" into account, a likely scenario here is that the following TTL could be generated:
where
<9a686266-7edc-42c2-ab75-04513831d25c>is the named node referring to the current record (e.g. the publication). Remember, now, thatrdfDS.parseTTLandDedup(newTTL)parses this TTL and adds these quads to the graph store, which means that the useless<9a686266-7edc-42c2-ab75-04513831d25c>node is already in the graph store. We don't want this, so we deal with it in the next step.rdfDS.parseTTLandDedup(newTTL)returns all the quads that were parsed and added to the graph store. These are now process individually. Importantly, if an added quad has a subject value that is identical to the current node ID, we delete it from the graph store, because it uses a nonsense named node. However, we definitely still need that information linked to the current record, and that is why we also add it to theformDataunder the index of the current node and the quad's predicate. To demonstrate with the above example, we will:<9a686266-7edc-42c2-ab75-04513831d25c> dlthings:identifier _:n0-1.quad from the graph storedlthings:identifier _:n0-1.toformDatasuch that it is linked to the current node ID.This is what, by design, will make the parsed-and-saved quads actually show up in the form under the
Identifiersfield. Importantly, the existing standard functionality that runs when saving a form (for record creation or editing) will then take care of adding the correct quads to the graph store to replace those that were deleted.Continuing with the individual processing of quads that were parsed from TTL and added to the graph store, if an added quad has a subject value that is NOT identical to the current node ID, AND it is a named node, this means that a new record has been added to the graph store and it is therefore eligible for submission. This has to be tracked (same as what happens when a record being edited is saved, for example). This step adds those nodes to the tracking reference.
NOTE 1: there is no garbage cleanup yet, specifically with regards to quads that were added to the graph store from the parsed TTL, but were then unlinked from the main record. E.g. user creates publication, user adds DOI via wizard, this potentially adds more submittable quads to the graph store (other than the publication record being created), user afterwards decides to remove the DOI, user saves publication. This means unlinked, possibly submittable, quads are now in the graph store. There will show up in the list for submission later, and might confuse the user because they never saw them and they don't know anything about the hidden TTL template functionality.
The looks great!
Loose collection of thoughts:
iconbe something other that an identifier in a precrafted collection? What these wizards do will likely be very specific, and just having one icon can make selecting a wizard a treasure hunt, parsing tooltips. Even now, the DOI button should better say "DOI" (not ID) to help people make the connection.