2b:null 2c:["$","title",null,{"children":"Learning Form | jbouecke | Observable"}] 31:T4bf,md`## Use-Case/Application ### User The user expectance could be enhanced whenever the user needs to fill in a form that asks for several fields. This applies to generic forms ins XFD-, HTML- or Mobile-Technology. It also and especially applies to any Meta-Data-Template (instance). All these forms could calculate in the background while the user starts filling in some fields, if it could make an educated guess about other values by considering the previously entered data. Here one could/should define just if all historical data, or just data e.g. the user itself entered in the past should be considered and how much data from the past should be considered. In addition, one needs to distinguish between situations where the form should just support the user by displaying values with high probability or where the form should really 'choose' values with high probability so that the user does not need to fill out the rest. One Abbott Informatics customer is asking for a solution of a related problem where the user needs to fill in in some values that are required to orders a specific experiment many times because they often want to perform several experiments that will vary only in small parts. `32:T841,md`## Scope, Costs and Sub Modules ### Algorithm I assume, given the work I did already in my free time, that the finalization of the implementation of the algorithm should be possible within two to three days, at least for JavaScript implementation. Porting it to JScript.NET will take an additional day probably. This estimation includes a technical module description and a precise technical interface/usage description, basic unit testing, but no formal QA document. Given this module and the detailed technical description, the application of the algorithm for new forms would be easy within all technologies. ### Extension to Meta-Data-Templates A very useful script should be created to apply the algorithm/module to Meta-Data-Templates. Especially here I see a high chance for automation and a big benefit. For such an extension of Meta-Data, I assume an implementation effort of one to two days per technology (XFD, HTML5). However, the actual use case must be carefully evaluated because Meta-Data-Templates usually doesn't have a direct link to 'who' entered/created the data. Thus, any data proposal would usually take all entered data into account and not only the data, the user himself entered previously. For that reason, I suggest possibly not adapt the Meta-Data-Templates in general but to apply it initially only to special Meta-Data-Template use cases where a clear 'scope' of history data could be defined by a programmer (e.g. Order Portal). If done this way, the amount for work should be minimal, given the modularized algorithm, but will of course be beneficial than only there. ### Library for application onto existing classic XFD-Forms However, to increase the benefit one could try to create a client script that applies the new functionality to an existing form. This script, of course, will need some parameterization because the algorithm needs to 'know' some information about the schema/structure of the data and the past data itself. The effort for such a script is difficult to estimate and vary much depend on the grade of automation one will try to achieve with it. `33:T559,md`## Out of Scope and possible Extensions So far, each field is considered to be a translatable 'text'<->'value' entity. However, the similarity will always be computed on a 'textual' representation of the input value for the current input and on exact equality for already chosen values. This means, that no special similarity rules would apply for dates or number. Also, it is assumed that the translation of 'text' to 'value' space (and via verse) could be done on the client computer (e.g. by having all possible selections of a combo box entry loaded if a non 1:2 mapping is used). However, the general approach could be extended to also query more details form the server and doing this, also to deal with larger data sets. This introduction of direct server interactions would also require rewriting the code in SSL and to tune it to work directly with the data base. Also, a special similarity rule for numbers, dates, or any other type of data could be created. However, this then would require also much more insights and tuning during the actual application of that algorithm onto considered forms. A more valuable extension could be to extend it in the way that field-values are considered field independent within a group of fields. In other words, that the algorithm would work also for fields that could take ${tex`0..n`} entries of the same type. `34:T53c,{ const schema = [ { sFieldID : "name", bRequired : true },{ sFieldID : "cook", bRequired : true },{ sFieldID : "season", sFieldCaption : "typical seaon", aMinimalOptions: [{val:"Summer",text:"Summer"},{val:"Winter",text:"Winter"},{val:"Spring",text:"Spring"},{val:"Autumn",text:"Autumn"}], bAllowCustomValue: false, bRequired : true },{ sFieldID : "meal", sFieldCaption : "typical time", aMinimalOptions: [{val:"Breakfast",text:"Breakfast"},{val:"Lunch",text:"Lunch"},{val:"Dinner",text:"Dinner"}], bAllowCustomValue: false, bRequired : true },{ sFieldID : "category", sFieldCaption : "category", bAllowCustomValue: true, aMinimalOptions: [{val:"A"},{val:"B"},{val:"C"}], aTransformation: { fTextToVal : t => String(t).toUpperCase().replace(/\s/gm,"_"), fValToText: v => v }, bRequired : true },{ sFieldID : "mainIgredient", sFieldCaption : "main ingridient", bRequired : true },{ sFieldID : "ingr2", sFieldCaption : "additional ingridient", bRequired : false } ]; //try { var rtv = inputForm(schema,history2,magick); /*} catch (e) { console.log(e); }*/ return rtv; }35:T922,md`## (Data) Structure One array object fully represents the current status of the form, together with it's structure/schema. Each element of that array corresponds to one 'atomic' data set, idetified by its keys \`sFieldID\`. There is no inherent order between the keys (fields) and each key/field could be there only once. Such a Data Set contains: * field id * field caption (optional, default to field id) * boolean marker that indicates the field as mandatory (optional, default to false) * validating function to validate the enterd text against any required syntax or semantic (optional) * a set of functions that transforms a text into a value and via verse (optional, default to text=value) * a boolean marker that indicates that the user could enter new/custom values and is not forced to choos an existing option (optional, default to 'allow custom entry'='free text', only meaningfull if at least some minimal list of options are given) * (*3) a list of options, the user could choos from (optional, but mandatory if freetext is not allowed, in both cases it could be seen as an additional constraint on allowed values. It must be more scrit or same strict than the optional validation function) * (*2) current infered information for that field by a set of (optional) * values with high probablity in an ordered fashion (if exists and makes sence) together with their probabilty * (*1) enterd value for that field (three states must be duistingished: an entered text, a desired EMPTY input (similar to N/A), NOTHING_YET entered) (optional, default to 'NOTHING_YET'). * (*1) boolean marker if this field is the one, the user is just modifying/entering right now (optional, default to false, only meanigfull if the current enterd value is someting else then NOTHING_YET.) Listed data that is marked with (\\*3) will rarly change but could theoretically. Listed data that is marked with (\\*2) will change during the entry of data within a defined form/data set. This is the main functionaltiy here! Listed data that is marked with (\\*1) is entered by the user during data entry (or is directly given by the user interaction). All others are defining the form data schema and are immutable for a given form. So, for each filed, we have initially an object like the following example that defines the schema for a field: `36:T459,md` The options are ordere with decreasing probablity and does not need to sum up to 100% but the sum will never exceed 100%. It is defined like this to have the option to omit the tail of options. However, only the options with a probabilty ${tex`\leq \epsilon`} will be omitted while the list is complete for all proablilties above that value. If the tail options are not given in the list, the last option object in that array will have only one property called 'epslilon' which will be the probability of the next option that would follow. \`\`\`javascript { sFieldID : "field_id", bRequired : true, bAllowCustomValue : false, aMinimalOptions : [ {val:"option_1",text:"options_1"}, {val:"option_2",text:"options_2"}, {val:"option_3",text:"options_3"}, {val:"option_4",text:"options_4"}, {val:"option_5",text:"options_5"}, {val:"option_6",text:"options_6"} ], field : undefined, aOptions : [ {val:"option_1",text:"options_1",prop:0.75}, {val:"option_2",text:"options_2",prop:0.2}, {val:"option_3",text:"options_3",prop:0.02}, {epsilon:0.02} ] } \`\`\` `37:T479,md`# Current PoC Implementation In the current version, always all options with probablity greater than 0 are show becaus this feature only makes sence if there is alos a possibility to query for the rest of options (the less probable ones) by e.g. using text, the user is just entering right now into that field. Another reaseon for implementing this could be a performance boost if les probal options would not be considered. I propose to add options with probablity ${tex`p<=\epsilon`} in a separate property (e.g. \`oQuerriedOptions\`) of the field object. They also need to have a limt, which I suggest to set to a reasonable number of proposed values (e.g. 50). So this additional array would than contain the top 50 possible values with ${tex`p<=\epsilon`} that (partially) matches the current input in that field. However, this is so far not implemented here. Another extenstion could be to form 'groups' of fields where it does not make any differenct in which of the field, that belong to that group, a value is entered. Also not implemented yet. What is also not implemented yet is the application of the validation function.. `38:T6c8,inputFormFieldOption = function(fieldOption,sFieldKey, bAddDDD) { if (bAddDDD==undefined) bAddDDD=false; const oFieldOptionValue = bAddDDD?"...":fieldOption.val; const sFieldOptionText = bAddDDD?"...":(fieldOption.text || fieldOption.val); let nFieldOptionProbability = bAddDDD?0:(fieldOption.prop || 0); let prop2Color = p => { const t1 = 0.90; const t2 = 5; // t2 / 256 is base dark level let numtohex = n => { let s = Number(n).toString(16); while (s.length<2) s = "0"+s; return s; } const diff = (1-p); const r = numtohex(Math.min(Math.max(Math.floor(256*p),t2),255)); const g = numtohex(Math.min(Math.max(Math.floor(256*diff),t2),255)); const b = numtohex(Math.min(Math.max(Math.floor(256*diff),t2),255)); return "#"+r+g+b; } let fieldOptionsEl = html` ${sFieldOptionText} ${Math.round(nFieldOptionProbability*100)}%`; if (!bAddDDD) fieldOptionsEl.onclick = (e) => { let form = getParentFormElement(fieldOptionsEl); if (form) { form[sFieldKey].value = sFieldOptionText; var event = document.createEvent('Event'); event.initEvent('blur', true, true); /*console.log(form); console.log("//*[@name='"+sFieldKey+"']"); console.log(document.evaluate("//*[@name='"+sFieldKey+"']", document, form).iterateNext());*/ getChildInputElementByNameAttribute(form,sFieldKey).dispatchEvent(event); } } return fieldOptionsEl; }39:T8ef,inputFormField = function (oField) { const sFieldID = oField.sFieldID; const sFieldCaption = oField.sFieldCaption || oField.sFieldID; const aOptions = oField.aOptions || []; const aAdditionalOp = oField.aMinimalOptions || []; let fCompleteOptions = function(x) { if (!x.text && !!x.val) x.text=val2text(oField,x.val).text; if (!!x.text && !x.val) x.val=text2val(oField,x.text).val; } aAdditionalOp.forEach(fCompleteOptions); aOptions.forEach(fCompleteOptions); const bRequired = oField.bRequired === undefined ? false : oField.bRequired const emtpyHTML = ' null '; let contEL = html` `; if (bRequired) var fieldCaption = html`* ${sFieldCaption}:`; else var fieldCaption = html`${sFieldCaption}:`; let fieldEl = html``; let fieldInfoEl = html` ${emtpyHTML} `; let fieldOptions = html` `; contEL.appendChild(fieldCaption); contEL.appendChild(html`${fieldEl}`); contEL.appendChild(fieldInfoEl); contEL.appendChild(fieldOptions); fieldEl.oninput = (e) => { //console.log(form[sFieldID].value); const form = getParentFormElement(contEL); fieldInfoEl.innerHTML=(form[sFieldID].value)?(" "+form[sFieldID].value+" "):emtpyHTML; form.dispatchEvent(new CustomEvent("input")); } fieldEl.myClearValue = () => { fieldInfoEl.innerHTML=emtpyHTML; } fieldEl.mySetOptions = (aOptions) => { fieldOptions.innerHTML=""; let aJoinedOption = aOptions; if (aAdditionalOp.length>0) { aJoinedOption = aJoinedOption.concat(aAdditionalOp.filter(ao=>aOptions.every(xx=>ao.val!=xx.val))); } try { if (aJoinedOption) aJoinedOption.forEach(o=> fieldOptions.appendChild( inputFormFieldOption(o,sFieldID) )); if (oField.bAllowCustomValue==undefined || oField.bAllowCustomValue==true) fieldOptions.appendChild( inputFormFieldOption(null,null,true)); } catch (e) { console.log(e); } } fieldEl.mySetOptions(aOptions); return contEL; }3a:Tc6e,inputForm = function (schema,history,magickFunction) { let form = html``; let table= html`

`; let btn = html``; let msg = html`

`; schema.forEach(x=>table.appendChild(inputFormField(x))); form.appendChild(table); form.appendChild(btn); form.appendChild(msg); btn.onclick = e => { // submit let rtv={}; try { schema.forEach(x=>{ let text = form[x.sFieldID].value; let tmp = text2val(x,text); let val = tmp.val; // submitting of required emtpy fileds will be replaced by 'N/A' if this is a valid option // ==> this is kind of an error ? if (x.bRequired && !val) { msg.innerHTML = "Please enter all required fields: "+(x.sFieldCaption||x.sFieldID)+""; window.setTimeout(_=> msg.innerHTML ="",4000); throw "Please enter all required fields"; } if (x.bAllowCustomValue===false && x.aMinimalOptions && !tmp.bMatch) { msg.innerHTML = "Custom value is not allowed here: "+(x.sFieldCaption||x.sFieldID)+""; window.setTimeout(_=> msg.innerHTML ="",4000); throw "Custom value is not allowed here"; } if (x.fValidate && !tmp.bValid) { msg.innerHTML = "Custom value is not valid here: "+(x.sFieldCaption||x.sFieldID)+""; window.setTimeout(_=> msg.innerHTML ="",4000); throw "Value is not allowed here"; } rtv[x.sFieldID] = val; }); if (history) history.push(rtv); form.reset(); schema.forEach(x=>{ let inpEl = getChildInputElementByNameAttribute(form,x.sFieldID); inpEl.myClearValue(); }); form.oninput(null); } catch (e) { console.log(e); } }; form.oninput = e=> { // query for guessing let rtv=[]; /*if (e) console.log(e.type);*/ schema.forEach(x=>{ let text = form[x.sFieldID].value; let tmp = text2val(x,text); let val = tmp.val; rtv.push({ sFieldID : x.sFieldID, aTransformation : x.aTransformation, aMinimalOptions : x.aMinimalOptions, value : { val : val, text : text }, bHasFocus : e && (e.srcElement.getAttribute("name") == x.sFieldID && (e.type=="input" || e.type=="focus")) }); }); if (magickFunction) { const schemaUpdate = magickFunction(rtv,history); if (schemaUpdate) form.myUpdateSchema(schemaUpdate); } }; form.myUpdateSchema = function(schemaUpdate) { schema.forEach(x=>{ let newData = schemaUpdate.find(xx=>x.sFieldID==xx.sFieldID) if (newData==undefined) console.log(x); else { if (x.aOptions != newData.aOptions) x.aOptions = newData.aOptions; getChildInputElementByNameAttribute(form,x.sFieldID).mySetOptions(x.aOptions); } }); } schema.forEach(x=>{ let inpEl = getChildInputElementByNameAttribute(form,x.sFieldID); inpEl.onblur = form.oninput; }); form.oninput(null); return form; }3b:T1bef,magick = function (currData,history) { if (!history || history.length==0) return; const keys = Object.keys(history[0]); let currentKey = null; const currDataMap = currData.reduce((a,x) => { a[x.sFieldID] = x; if (x.bHasFocus==true) currentKey = x.sFieldID; return a; },{}); const currentlySetData = currData.reduce( (a,x) => { if (x.value != undefined && x.value.val != undefined) a[x.sFieldID] = x.value.val; return a; },{}); //console.log(currentlySetData); //console.log(currDataMap); const currentlySetKeys = Object.keys(currentlySetData); const currentlySetKeysWithoutCurrentKey = currentlySetKeys.filter(x=>x!=currentKey); const currentlyNotSetKeys = keys.filter(x=>!currentlySetKeys.includes(x)); const bShowCaseCalcAlsoForSetFields = false; const _incCounter = function(m,key,p) { if (p==true || p==undefined) p=1; if (key===null) { if (m.empty) m.empty = m.empty+p; else m.empty=p; return; } if (m.d.hasOwnProperty(key)) m.d[key] = m.d[key]+p; else m.d[key]=p; } const _getCounter = function(m,key) { if (key===null) { if (m.empty) return m.empty; return 0; } if (m.d.hasOwnProperty(key)) return m.d[key]; else return 0; } //console.log("start for "); //console.log(currentlySetData); let nMatchingHistory = 0; let nHistory = history.length; // do the over all counting (at first excluding the current key to append // complex testing only if the other values matches history) // this is done in a separate loop to store/cach/flag each history with macht or not match // to make it faster to go throug relevant history entires for each key later history.forEach(hd=> { if (currentKey!=null && currentlySetKeysWithoutCurrentKey.every(curKey => currentlySetData[curKey]==hd[curKey])) { // special case for current input: const a = currentlySetData[currentKey]; const b = hd[currentKey]; let sim = 0; if (a==null) sim=1; else if (b!=null) sim = stringSimilarity.compareTwoStrings(String(currentlySetData[currentKey]),String(hd[currentKey])); //console.log(sim); const th = 0.1 if (sim>th) { nMatchingHistory += sim; hd["___MATCHED"] = sim; } else { nMatchingHistory += th/2; hd["___MATCHED"] = th/2; } } else if (currentKey==null && currentlySetKeys.every(curKey => currentlySetData[curKey]==hd[curKey])) { nMatchingHistory++; hd["___MATCHED"] = true; } else { hd["___MATCHED"] = false; } }); /*history.forEach(hd=> { if (currentlySetKeys.every(curKey => currentlySetData[curKey]==hd[curKey])) { nMatchingHistory++; hd["___MATCHED"] = true; } else { // special case for current input: if (currentKey!=null && currentlySetKeysWithoutCurrentKey.every(curKey => currentlySetData[curKey]==hd[curKey])) { const sim = stringSimilarity.compareTwoStrings(currentlySetData[currentKey],hd[currentKey]); //console.log(sim); const th = 0.1 if (sim>th) { nMatchingHistory += sim; hd["___MATCHED"] = sim; } else { nMatchingHistory += th/2; hd["___MATCHED"] = th/2; } } else hd["___MATCHED"] = false; } });*/ let schemaUpdate = []; if (!bShowCaseCalcAlsoForSetFields) schemaUpdate = currentlySetKeysWithoutCurrentKey.reduce((a,key) => { a.push({sFieldID:key,aOptions:[]}); return a; },[]); /* if (nMatchingHistory==0) { console.log("no matches found"); if (currentKey!=null) schemaUpdate.push({sFieldID:currentKey,aOptions:[]}); currentlyNotSetKeys.forEach( key => { schemaUpdate.push({sFieldID:key,aOptions:[]}); }); } else */ { let keysToCalc = currentlyNotSetKeys; if (currentKey!=null) keysToCalc = keysToCalc.concat([currentKey]); if (bShowCaseCalcAlsoForSetFields) // this is usually not required but for demonstratino purpose its nice to see these resutls aswell keysToCalc = keys; keysToCalc.forEach( key => { if (key=="___MATCHED") return; // loop all not set fields to figure out how probable it is that they will be selected. let oOptionChoosenForMatchingHistory = {d:{},empty:0}; let oOptionChoosenInHistoryAtAll = {d:{},empty:0}; history.forEach(hd=> { // loop complete history // and check how often each option has been coosen in case of matching precondition .. if (hd["___MATCHED"]!=false) { _incCounter(oOptionChoosenForMatchingHistory,hd[key],hd["___MATCHED"]); } // and at all. _incCounter(oOptionChoosenInHistoryAtAll,hd[key]); }); /*console.log("key: "+key); console.log(aOptionsChoosenInHistoryButNotMatching);*/ let aOptionsGreater0 = _getCounter(oOptionChoosenForMatchingHistory,null)>0 ? [{val:null,text:null,prop:_getCounter(oOptionChoosenForMatchingHistory,null)/nMatchingHistory}] : []; // here in theory one should sort the oOptionChoosenForMatchingHistory to start with options of higher probability. aOptionsGreater0 = Object.keys(oOptionChoosenForMatchingHistory.d).reduce((a,option) => { if (false) { console.log("Option: "+option); console.log("Joined Probability for given data and option: " + oOptionChoosenForMatchingHistory.d[option]/nHistory+"\nProbability for given data: " + nMatchingHistory/nHistory+"\nProbability for that option: " + oOptionChoosenInHistoryAtAll.d[option]/nHistory); } a.push({val:option,prop:_getCounter(oOptionChoosenForMatchingHistory,option)/nMatchingHistory}); return a; /*console.log(nMatchingHistory); console.log(oOptionChoosenForMatchingHistory[option]); console.log(oOptionChoosenInHistoryAtAll[option]);*/ },aOptionsGreater0); aOptionsGreater0.sort((a,b) => b.prop-a.prop); //let currData.find( let currFieldSchema = currDataMap[key]; //console.log("key: "+key); console.log(currFieldSchema); aOptionsGreater0.forEach(x=>x.text=val2text(currFieldSchema,x.val).text); console.log(aOptionsGreater0); let aOptionsChoosenInHistoryButNotMatching = Object.keys(oOptionChoosenInHistoryAtAll.d).filter(x=>!Object.keys(oOptionChoosenForMatchingHistory.d).includes(x)); //console.log(aOptionsChoosenInHistoryButNotMatching); let aOptionsWith0 = aOptionsChoosenInHistoryButNotMatching.reduce( (a,x) =>{ a.push({val:x,_p:_getCounter(oOptionChoosenInHistoryAtAll,x),prop:0}); return a },[]); aOptionsWith0.sort((a,b) => b._p-a._p); //console.log(aOptionsWith0); aOptionsWith0.forEach(x=>x.text=val2text(currFieldSchema,x.val).text); console.log(aOptionsWith0); schemaUpdate.push({sFieldID:key,aOptions:aOptionsGreater0.concat(aOptionsWith0)}); }); } //exampleForm.myUpdateSchema(schemaUpdate) return schemaUpdate; }3c:[] 2f:{"id":"932c326ee9f74a47","slug":"learning-form","title":"Learning Form","thumbnail":"ea6b1073870b8190d0722022d3aa023e770405addc1d5bcdfe3d196d9e36907b","access_level":"public","create_time":"$D2018-06-19T09:35:09.599Z","update_time":"$D2019-03-13T05:16:39.996Z","view_time":null,"first_public_time":"$D2018-07-15T18:32:28.896Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"da6d52a08faa17c7","login":"jbouecke","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9f89bcf8248011a62f8b5938e160e76f93ae420ac622f34e5514266e06774889","tier":"starter_2024"},"version":1199,"publish_version":1199,"role":null,"authored":false,"authors":[{"type":"individual","id":"9936311cbed5414b","login":"jbouecke","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9f89bcf8248011a62f8b5938e160e76f93ae420ac622f34e5514266e06774889","tier":null}],"members":[{"type":"individual","id":"9936311cbed5414b","login":"jbouecke","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9f89bcf8248011a62f8b5938e160e76f93ae420ac622f34e5514266e06774889","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Learning Form","cells":[{"id":0,"value":"md`# Learning Form`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":941,"value":"md`## Concept\nA form, that needs to be filled by one or several users many times could try to learn from past submissions to suggest/propose values next time, just by applying the law of conditional probability.\n\n${tex`P(A|B) = \\frac{P(A \\cap B)}{P(B)}`}\n\nWhere the probability ${tex`P`} for an option _A_, within a specific field is given by the probability for the option _A_ filled into that field together with all other fields filled the way they are right now already ${tex`P(A \\cap B)`} divided by the probability for the current selection without that field ${tex`P(B)`}. \n\nApplying this 'simple' rule nearly any form could turn into a self-learning form by just taking the history into account.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1109,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1113,"value":"md`### Programmer\nThe module I suggest should be portable, which means at least existing in JScript.NET and JavaScript with the same consistent interface, to be applicable for both kind of technologies. I suggest implementing the JavaScript version as CommonJS modules or (if supported) as a ES2015 Modules.\n\nThe results should be very easy to apply it to existing forms without the need to modify it much and it should be automatically applicable for any Meta-Data-Template, may be also considering values associated to that template but not stored there (additional tables concept...).\n\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1122,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1131,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1144,"value":"md`## Summary\n\n* Basic version, applicable manually (by a programmer) to any form: 4 d\n* Metadata-Application-Support-Script, applicable manually in certain special Meta-Data-Template use cases (e.g. Order Portal). Additional 1 d\n\nBoth with good technical documentation and testing.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1139,"value":"md`# Example`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":950,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":47,"value":"md` ## Form \nA form within this concept consist of a distinct constant set of fields a user can/needs to fill by typing in some text (TextField or WritableComboBox), or where the user could choose by selecting one specific option from a list/dropdown (ComboBox).\n\nThe form discribed herer is considdered to be an artefact (statefull structured data that gives semantic) without any actions. Of coarse, the semantic implies some actions...\n\nThe actions are described later on.\n`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":836,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1100,"value":"md`\n\\`\\`\\`javascript\n${JSON.stringify(example_field_1,null,2)}\n\\`\\`\\`\n\n\\`\\`\\`javascript\n${JSON.stringify(example_field_2,null,2)}\n\\`\\`\\`\n\n\\`\\`\\`javascript\n${JSON.stringify(example_field_3,null,2)}\n\\`\\`\\`\n\n\\`\\`\\`javascript\n${JSON.stringify(example_field_4,null,2)}\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":856,"value":"example_field_1 = (\n{ // free text example\n sFieldID : \"field_1\",\n sFieldCaption : \"free text\",\n bRequired : true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":865,"value":"example_field_2 = ({ // free text for integer values\n sFieldID : \"field_2\",\n sFieldCaption : \"free text for integer values\",\n bRequired : true, \n fValidate : t => !!t.match(/^d+$/),\n aTransformation: { fTextToVal : t => Number(t), fValToText: v => \"\"+v }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":869,"value":"example_field_3 = ({ // ComboBox example\n sFieldID : \"field_3\",\n sFieldCaption : \"ComboBox example\",\n bRequired : true,\n bAllowCustomValue : false,\n aMinimalOptions : [{val:\"option_1\",text:\"Option 1\"},{val:\"option_2\",text:\"Option 2\"}]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":872,"value":"example_field_4 = ({ // Editable ComboBox example\n sFieldID : \"field_4\",\n sFieldCaption : \"Editable ComboBox example\",\n bRequired : true,\n bAllowCustomValue : true,\n aTransformation: { fTextToVal : t => String(t).toUpperCase().replace(/s/gm,\"_\"), fValToText: t => String(t).toUpperCase().replace(/s/gm,\"_\") },\n aMinimalOptions : [{val:\"OPTION_1\",text:\"OPTION_1\"},{val:\"OPTION_2\",text:\"OPTION_2\"}]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":846,"value":"md`\nThe id must bei uniqui within the form.\nAll schema defining properties are imutable and will not change after initial form creation. This covers all options, defined above.\n\n## Data\n\nThe value (and text) the user enters could be \\'undefined\\' (if not defined yet), \\'null\\' if selected/defined to be empty, or it could be a string (usual/most commond case for a filled form).\n\nIt may contain the input of the user before he confirms it. If so, this must be marked via the \\`bNotYetShure\\` property set to \\`true\\`. Usually confirmation means at least leaving the field.\n\nIf there are information about proposed values withoug beeing shure which one to select, the data for a minimal free text field could look like this:\n\\`\\`\\`javascript\n{\n sFieldID : \"field_id\",\n field : undefined,\n aOptions : [\n {val:\"option_1\",text:\"option_1\",prop:0.75},\n {val:\"option_2\",text:\"option_2\",prop:0.2},\n {val:\"option_3\",text:\"option_3\",prop:0.05}\n ]\n}\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":876,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":839,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":802,"value":"md`## History data structure\n\nThe history takes the choosen/sbmitted form data and stores each form information as simple key value paris (one key for each field/column), all within one object. These objects are stored in an order array to form the history.\n\nSo this form data set:\n\n\\`\\`\\`javascript\n[\n {\n sFieldID : \"field_id\",\n value : {val:\"field_value\",text:\"field value\"}\n },{\n sFieldID : \"name\",\n value : {val:\"Foo\",text:\"Foo\"}\n }\n]\n\\`\\`\\`\n\nwill be transformed into this history entry:\n\n\\`\\`\\`javascript\n{\n field_id : \"field_value\",\n name : \"Foo\"\n}\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":532,"value":"md` ## Actions\n### Build Form\nGiven the structure information, the form should/could be build (automatically).\n### Guessing\nWhenever a field value is changed (or whenever desired), all current form values will be used and compared them against history to calculate probalilities for not yet defined values.\n### Display Guessing\nThe result of the 'Guessing' needs to be presented to the user in a proper way and potentially will lead to automatically selected options.\n### Sumbit Form\nThe current choice of values will be added (pushed) to the history.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":824,"value":"md`# Example\n\nPlease try!!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":554,"value":"{\n const schema = [example_field_1,example_field_2,example_field_3,example_field_4];\n return inputForm(schema,history,magick);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":900,"value":"md`# Implementation PoC`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":293,"value":"md` ## Options display\n### Example`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":348,"value":"{\n let d = html`

`;\n for (var i=1; i>0; i-=0.2)\n d.appendChild(inputFormFieldOption({val:\"\"+Math.round(i*100)+\"%\",text:\"\"+Math.round(i*100)+\"%\",prop:i}))\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":980,"value":"{\n let d = html`

`;\n for (var i=1; i>0; i-=0.2)\n d.appendChild(inputFormFieldOption({val:\"\"+Math.round(i*100)+\"%\",text:\"\"+Math.round(i*100)+\"%\",prop:i}))\n d.appendChild(inputFormFieldOption(null,null,true))\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":415,"value":"md`### Function to create one 'option display' DOM object (one element)\n\n... that needs to be embedded into the associated form.\nThe given \\`sFieldKey\\` will be used to find/access the asscociated input dom element to set the value when the user clicks on that option.\n\nThus, the created dom element has the onClick event listener in place which access the input element identifed by \\`sFieldKey\\` that is inside the same form element than this element. It also triggers the blur event than there.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":301,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":420,"value":"md`## Field Display\nThis usese the 'options display' above to present the currently infered options to the user.\n### Example`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":488,"value":"{ \n let form = html``;\n let table= html`

`;\n table.appendChild(inputFormField({\n sFieldID : \"fieldID\",\n sFieldCaption : \"Caption\",\n bAllowCustomValue : false,\n aOptions : [\n {val:\"opt_1\",text:\"1\",prop:0.75},\n {val:\"opt_2\",text:\"2\",prop:0.2},\n {val:\"opt_3\",text:\"3\",prop:0.05}\n ]\n }));\n table.appendChild(inputFormField({\n sFieldID : \"fieldID2\",\n sFieldCaption : \"Hallo\",\n aOptions : [\n {val:\"Welt\",prop:0.80},\n {val:\"World\",prop:0.19},\n {val:\"watt?\",prop:0.01}\n ]\n }));\n form.appendChild(table);\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":479,"value":"md`### Constructor`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":482,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":548,"value":"md`## Form\n### Example`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":912,"value":"{\n const schema = [\n {\n sFieldID : \"Name\",\n bRequired : true\n },{\n sFieldID : \"TemperatureProfile\",\n bRequired : true\n },{\n sFieldID : \"Season\",\n sFieldCaption : \"Typical Season\",\n bRequired : true\n },{\n sFieldID : \"Solvent\",\n bRequired : true,\n sFieldCaption : \"Solvent\"\n },{\n sFieldID : \"PrimaryIngredient\",\n bRequired : true,\n sFieldCaption : \"Primary Ingredient\"\n },{\n sFieldID : \"Annotation\",\n sFieldCaption : \"Annotation\"\n }\n ];\n return inputForm(schema,history,magick);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1198,"value":"history","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":654,"value":"md`### Construtor for a form, given a schema`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":651,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":536,"value":"md`# Container`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":677,"value":"md`## History`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":684,"value":"viewof clearHistory = button({value: \"Clear History\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":546,"value":"history","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":768,"value":"md`# Magick!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":689,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"viewof history = {\n clearHistory;\n return new View([]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":995,"value":"viewof history2 = {\n clearHistory;\n return new View([]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":534,"value":"md`# Stuff`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1072,"value":"text2val = function(x,text) {\n let val = text;\n let match = null;\n let bValid = true;\n if (x.fValidate)\n bValid = x.fValidate(text);\n if (x.aTransformation)\n val = x.aTransformation.fTextToVal(text);\n if (x.aMinimalOptions) {\n match = x.aMinimalOptions.find(xx=>xx.val==val);\n if (match)\n val = match.val;\n }\n if (val==\"\") val = null;\n return {val:val,bMatch:match!=null,bValid:bValid};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1074,"value":"val2text = function(x,val) {\n let text = val;\n let match = null;\n let bValid = true;\n if (x.aTransformation) text = x.aTransformation.fValToText(val);\n if (x.aMinimalOptions) {\n match = x.aMinimalOptions.find(xx=>xx.val==val);\n if (match)\n text = match.text;\n console.log(match);\n }\n if (text==\"\") text = null;\n return {val:val,text:text,bMatch:match!=null,bValid:bValid};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":80,"value":"viewof submit = button({value: \"Submit\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"{\n submit\n addCurrentInputToHistory()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":117,"value":"history","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"addCurrentInputToHistory = function() \n{\n let d = currentDataFromView(true);\n console.log(d);\n if (d != null)\n {\n viewof history.value.push(d)\n viewof history.value = viewof history.value;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":175,"value":"currentDataFromView = function (bFillWithNull)\n{\n let aData = viewof inputForm.value\n let aOData = [];\n let i = 0;\n let filler = bFillWithNull === true ? null : undefined;\n let bAllEmpty = true;\n aData.forEach( e => {\n let o = e;\n if (o.sFieldValue==undefined)\n o.sFieldValue = filler;\n else\n bAllEmpty = false;\n \n aOData.push(o); \n });\n if (bAllEmpty)\n return null;\n else\n return aOData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"add = function(oData) \n{\n viewof history.value.push(oData)\n viewof history.value = viewof history.value;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"dataFromArray = function (aData, bFillWithNull)\n{\n let aOData = [];\n let i = 0;\n let filler = bFillWithNull === true ? null : undefined;\n aData.forEach( e => aOData.push({\n sFieldID : 'F'+(++i),\n sFieldValue : e || filler\n }));\n \n return aOData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"class View {\n constructor(value) {\n this._list = [];\n this._value = value;\n }\n get value() {\n return this._value;\n }\n set value(value) {\n this._value = value;\n this.dispatchEvent({type: \"input\", value});\n }\n addEventListener(type, listener) {\n if (type != \"input\" || this._list.includes(listener)) return;\n this._list = [listener].concat(this._list);\n }\n removeEventListener(type, listener) {\n if (type != \"input\") return;\n this._list = this._list.filter(l => l !== listener);\n }\n dispatchEvent(event) {\n const p = Promise.resolve(event);\n this._list.forEach(l => p.then(l));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":342,"value":"sequenceGenerator = function* (minVal,n, maxVal) {\n let currVal = minVal;\n const d = (maxVal-minVal)/(n-1);\n while(currVal < maxVal)\n yield currVal++;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":363,"value":"getParentFormElement = function(el) {\n while (el.parentElement && el.parentElement.tagName!=\"FORM\")\n el = el.parentElement;\n return el.parentElement\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":434,"value":"getChildInputElementByNameAttribute = function (el, name) {\n let _getChildInputElementByName = function (el, name) {\n if (!el || el.nodeType!=1) return null;\n if (el.getAttribute(\"name\") && el.getAttribute(\"name\")==name) return el;\n let children = el.childNodes;\n for(var child in children){\n let res = _getChildInputElementByName(children[child],name);\n if (res) return res;\n } \n return null;\n }\n return _getChildInputElementByName(el,name);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":438,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":346,"value":"[...sequenceGenerator(1,2,3)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":771,"value":"stringSimilarity = require('https://bundle.run/string-similarity')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":774,"value":"stringSimilarity.compareTwoStrings(\"Hallo\",\"ll\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"import {text} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":78,"value":"import {button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 30:"$2f:body"