diff --git a/src/src/util/viewmigration.js b/src/src/util/viewmigration.js index ca515afa5..461f37e31 100644 --- a/src/src/util/viewmigration.js +++ b/src/src/util/viewmigration.js @@ -750,10 +750,31 @@ define([ } } if (view.custom_filters) { - // eslint-disable-next-line no-console - console.warn( - 'This view has configured custom filters which are being removed', + const customFilters = view.custom_filters?.[0] ?? []; + const hasFilters = customFilters.sections.filters.some((filter) => { + return filter?.groups?.filter?.some( + (filter) => filter?.name?.[0] !== null, + ); + }); + + const hasModules = customFilters.sections.modules.some((module) => { + return module?.groups?.modules?.some((module) => + module?.some((module) => module.url), + ); + }); + + const hasFiltersLib = customFilters.sections.filtersLib.some((lib) => + lib?.groups?.filters?.some((filters) => + filters?.some((filter) => filter.name), + ), ); + + if (hasFilters || hasModules || hasFiltersLib) { + // eslint-disable-next-line no-console + console.warn( + 'This view has configured custom filters which are being removed. Check the custom filters tab in general preferences before migrating.', + ); + } delete view.custom_filters; } for (let module of view.modules) { @@ -761,6 +782,44 @@ define([ removeFilters(module, 'vars_in'); } }, + '4.1.2', + // Breaking change in src/util/api + // https://github.com/NPellet/visualizer/commit/0ed8fa3e2fc0cf2517e668800cca7df93c317092 + function (view) { + const alerts = []; + eachModule( + view, + function (module) { + const script = module.configuration?.groups?.group?.[0]?.script?.[0]; + if ( + script && + (script.match(/\.\s*form\s*\(/) || + script.match(/\.\s*renderTwig\s*\(/)) + ) { + alerts.push(module); + } + }, + 'code_executor', + ); + if (alerts.length > 0) { + // eslint-disable-next-line no-alert + window.alert( + `found .form or .renderTwig calls. You likely import them from src/util/ui, which is not longer supported. Must import from src/util/twig. Occurences:\n +${alerts + .map( + (module) => + `Module ${module.id}, displayed on layers:\n${Object.entries( + module.layers, + ) + .filter(([, layer]) => layer.display) + .map(([name, layer]) => ` ${name}: ${layer.title}`) + .join('\n')}`, + ) + .join('\n\n')} + `, + ); + } + }, // Add new migration functions here // Do not forget to `npm run prerelease` before creating your migration script // 'x.y.z', function (view) { diff --git a/testcase/data/twig-form-light/view.json b/testcase/data/twig-form-light/view.json index 35915846f..e6a432d1f 100644 --- a/testcase/data/twig-form-light/view.json +++ b/testcase/data/twig-form-light/view.json @@ -1,5 +1,5 @@ { - "version": "4.0.1", + "version": "4.2.2-0", "grid": { "layers": { "Default layer": { diff --git a/testcase/data/twigRenderer/view.json b/testcase/data/twigRenderer/view.json index f46c26292..8bc04cf6f 100644 --- a/testcase/data/twigRenderer/view.json +++ b/testcase/data/twigRenderer/view.json @@ -1,5 +1,5 @@ { - "version": "2.140.1-0", + "version": "4.2.2-0", "grid": { "layers": { "Default layer": { @@ -17,9 +17,20 @@ "groups": { "group": [ { - "display": [["editor", "buttons"]], - "execOnLoad": [[]], - "asyncAwait": [["top"]], + "display": [ + [ + "editor", + "buttons" + ] + ], + "execOnLoad": [ + [] + ], + "asyncAwait": [ + [ + "top" + ] + ], "script": [ "const template = API.getData('template');\n\nconst data={\n a: 1\n}\n\nlet html = await TwigUtil.renderTwig(template, data);\n\n\n\nAPI.createData('html', html);\n\n" ] @@ -58,7 +69,12 @@ "zIndex": 0, "display": true, "title": "Code to generate HTML based on twig and data", - "bgColor": [255, 255, 255, 0], + "bgColor": [ + 255, + 255, + 255, + 0 + ], "wrapper": true, "created": true, "name": "Default layer" @@ -71,7 +87,9 @@ "name": "template" } ], - "actions_in": [{}], + "actions_in": [ + {} + ], "vars_out": [ { "jpath": [] @@ -90,20 +108,33 @@ "icon": "", "action": "", "position": "begin", - "color": [100, 100, 100, 1] + "color": [ + 100, + 100, + 100, + 1 + ] } ] ], "common": [ { - "toolbar": [["Open Preferences"]] + "toolbar": [ + [ + "Open Preferences" + ] + ] } ] }, "css": [ { - "fontSize": [""], - "fontFamily": [""] + "fontSize": [ + "" + ], + "fontFamily": [ + "" + ] } ], "title": "Code to generate HTML based on twig and data" @@ -115,14 +146,34 @@ "groups": { "group": [ { - "mode": ["html"], - "outputType": [null], - "btnvalue": ["Send script"], - "iseditable": [["editable"]], - "hasButton": [[]], - "variable": [[]], - "storeOnChange": [["store"]], - "debouncing": [0], + "mode": [ + "html" + ], + "outputType": [ + null + ], + "btnvalue": [ + "Send script" + ], + "iseditable": [ + [ + "editable" + ] + ], + "hasButton": [ + [] + ], + "variable": [ + [] + ], + "storeOnChange": [ + [ + "store" + ] + ], + "debouncing": [ + 0 + ], "script": [ "ABCDE\n\n{{a}}\n\n{{rendertype('C10H20O', 'mf')}}\n\n
\n{{rendertypeBlock('CCCCCCCCCCCCCO', 'smiles',{width: 500, height: 300})}}\n
" ] @@ -130,8 +181,14 @@ ], "ace": [ { - "useSoftTabs": [["yes"]], - "tabSize": [4] + "useSoftTabs": [ + [ + "yes" + ] + ], + "tabSize": [ + 4 + ] } ] } @@ -149,15 +206,24 @@ "zIndex": 0, "display": true, "title": "Twig template", - "bgColor": [255, 255, 255, 0], + "bgColor": [ + 255, + 255, + 255, + 0 + ], "wrapper": true, "created": true, "name": "Default layer" } }, "id": 2, - "vars_in": [{}], - "actions_in": [{}], + "vars_in": [ + {} + ], + "actions_in": [ + {} + ], "vars_out": [ { "event": "onEditorChange", @@ -179,20 +245,33 @@ "icon": "", "action": "", "position": "begin", - "color": [100, 100, 100, 1] + "color": [ + 100, + 100, + 100, + 1 + ] } ] ], "common": [ { - "toolbar": [["Open Preferences"]] + "toolbar": [ + [ + "Open Preferences" + ] + ] } ] }, "css": [ { - "fontSize": [""], - "fontFamily": [""] + "fontSize": [ + "" + ], + "fontFamily": [ + "" + ] } ], "title": "Twig template" @@ -204,11 +283,23 @@ "groups": { "group": [ { - "selectable": [[]], - "template": [""], - "modifyInForm": [[]], - "debouncing": [0], - "formOptions": [["keepFormValueIfDataUndefined"]] + "selectable": [ + [] + ], + "template": [ + "" + ], + "modifyInForm": [ + [] + ], + "debouncing": [ + 0 + ], + "formOptions": [ + [ + "keepFormValueIfDataUndefined" + ] + ] } ] } @@ -226,7 +317,12 @@ "zIndex": 0, "display": true, "title": "Preview of HTML code", - "bgColor": [255, 255, 255, 0], + "bgColor": [ + 255, + 255, + 255, + 0 + ], "wrapper": true, "created": true, "name": "Default layer" @@ -239,7 +335,9 @@ "name": "html" } ], - "actions_in": [{}], + "actions_in": [ + {} + ], "vars_out": [ { "jpath": [] @@ -258,20 +356,34 @@ "icon": "", "action": "", "position": "begin", - "color": [100, 100, 100, 1] + "color": [ + 100, + 100, + 100, + 1 + ] } ] ], "common": [ { - "toolbar": [["Open Preferences", "Export Data"]] + "toolbar": [ + [ + "Open Preferences", + "Export Data" + ] + ] } ] }, "css": [ { - "fontSize": [""], - "fontFamily": [""] + "fontSize": [ + "" + ], + "fontFamily": [ + "" + ] } ], "title": "Preview of HTML code" @@ -283,21 +395,47 @@ "groups": { "group": [ { - "mode": ["text"], - "outputType": [null], - "btnvalue": ["Send script"], - "iseditable": [["editable"]], - "hasButton": [[]], - "variable": [[]], - "storeOnChange": [[]], - "debouncing": [0], - "script": [null] + "mode": [ + "text" + ], + "outputType": [ + null + ], + "btnvalue": [ + "Send script" + ], + "iseditable": [ + [ + "editable" + ] + ], + "hasButton": [ + [] + ], + "variable": [ + [] + ], + "storeOnChange": [ + [] + ], + "debouncing": [ + 0 + ], + "script": [ + null + ] } ], "ace": [ { - "useSoftTabs": [["yes"]], - "tabSize": [4] + "useSoftTabs": [ + [ + "yes" + ] + ], + "tabSize": [ + 4 + ] } ] } @@ -315,7 +453,12 @@ "zIndex": 0, "display": true, "title": "HTML code", - "bgColor": [255, 255, 255, 0], + "bgColor": [ + 255, + 255, + 255, + 0 + ], "wrapper": true, "created": true, "name": "Default layer" @@ -328,7 +471,9 @@ "name": "html" } ], - "actions_in": [{}], + "actions_in": [ + {} + ], "vars_out": [ { "jpath": [] @@ -347,20 +492,33 @@ "icon": "", "action": "", "position": "begin", - "color": [100, 100, 100, 1] + "color": [ + 100, + 100, + 100, + 1 + ] } ] ], "common": [ { - "toolbar": [["Open Preferences"]] + "toolbar": [ + [ + "Open Preferences" + ] + ] } ] }, "css": [ { - "fontSize": [""], - "fontFamily": [""] + "fontSize": [ + "" + ], + "fontFamily": [ + "" + ] } ], "title": "HTML code" diff --git a/testcase/data/twig_migration/data.json b/testcase/data/twig_migration/data.json new file mode 100644 index 000000000..0967ef424 --- /dev/null +++ b/testcase/data/twig_migration/data.json @@ -0,0 +1 @@ +{} diff --git a/testcase/data/twig_migration/view.json b/testcase/data/twig_migration/view.json new file mode 100644 index 000000000..85bf4cc27 --- /dev/null +++ b/testcase/data/twig_migration/view.json @@ -0,0 +1 @@ +{"version":"4.1.1","grid":{"layers":{"Default layer":{"name":"Default layer"},"Layer 1":{"name":"Layer 1"},"Layer 2":{"name":"Layer 2"}},"xWidth":10,"yHeight":10},"modules":[{"url":"modules/types/client_interaction/code_editor/","configuration":{"sections":{},"groups":{"group":[{"mode":["html"],"outputType":[null],"btnvalue":["Send script"],"iseditable":[["editable"]],"hasButton":[["button"]],"variable":[[]],"storeOnChange":[["store"]],"debouncing":[250],"script":["
\n\n\n\n
"]}],"ace":[{"useSoftTabs":[["yes"]],"tabSize":[4]}]}},"layers":{"Default layer":{"position":{"left":0,"top":0},"size":{"width":47,"height":32},"zIndex":0,"display":true,"title":"","bgColor":[255,255,255,0],"wrapper":true,"created":true,"name":"Default layer"},"Layer 1":{"position":{"left":0,"top":0},"size":{"width":47,"height":32},"zIndex":0,"display":false,"title":"","bgColor":[255,255,255,0],"wrapper":true,"created":true,"name":"Default layer"},"Layer 2":{"position":{"left":0,"top":0},"size":{"width":47,"height":32},"zIndex":0,"display":false,"title":"","bgColor":[255,255,255,0],"wrapper":true,"created":true,"name":"Default layer"}},"id":1,"vars_in":[{}],"actions_in":[{}],"vars_out":[{"event":"onEditorChange","rel":"data","jpath":[],"name":"template"}],"actions_out":[{"jpath":[]}],"toolbar":{"custom":[[{"title":"","icon":"","action":"","position":"begin","color":[100,100,100,1]}]],"common":[{"toolbar":[["Open Preferences"]]}]},"css":[{"fontSize":[""],"fontFamily":[""]}],"title":""},{"url":"modules/types/edition/object_editor/","configuration":{"sections":{},"groups":{"group":[{"editable":["text"],"expanded":[[]],"storeObject":[["expand"]],"displayValue":[[]],"searchBox":[["search"]],"sendButton":[["send"]],"output":["new"],"storedObject":["{\"title\":\"abfddc\",\"kind\":\"B\"}"]}]}},"layers":{"Default layer":{"position":{"left":89,"top":0},"size":{"width":49,"height":32},"zIndex":0,"display":true,"title":"Input - Click send to update the form data","bgColor":[255,255,255,0],"wrapper":true,"created":true,"name":"Default layer"},"Layer 1":{"position":{"left":89,"top":0},"size":{"width":49,"height":32},"zIndex":0,"display":false,"title":"Input - Click send to update the form data","bgColor":[255,255,255,0],"wrapper":true,"created":true,"name":"Default layer"},"Layer 2":{"position":{"left":89,"top":0},"size":{"width":49,"height":32},"zIndex":0,"display":false,"title":"Input - Click send to update the form data","bgColor":[255,255,255,0],"wrapper":true,"created":true,"name":"Default layer"}},"id":2,"vars_in":[{}],"actions_in":[{}],"vars_out":[{"event":"onObjectChange","rel":"output","jpath":[],"name":"data"}],"actions_out":[{"jpath":[]}],"toolbar":{"custom":[[{"title":"","icon":"","action":"","position":"begin","color":[100,100,100,1]}]],"common":[{"toolbar":[["Open Preferences"]]}]},"css":[{"fontSize":[""],"fontFamily":[""]}],"title":"Input - Click send to update the form data"},{"url":"modules/types/display/template-twig/","configuration":{"sections":{},"groups":{"group":[{"selectable":[[]],"template":[""],"modifyInForm":[["yes"]],"debouncing":[100],"formOptions":[["keepFormValueIfDataUndefined"]],"templateOptions":[null]}]}},"layers":{"Default layer":{"position":{"left":48,"top":0},"size":{"width":40,"height":26},"zIndex":0,"display":true,"title":"","bgColor":[255,255,255,0],"wrapper":true,"created":true,"name":"Default layer"},"Layer 1":{"position":{"left":48,"top":0},"size":{"width":40,"height":26},"zIndex":0,"display":false,"title":"","bgColor":[255,255,255,0],"wrapper":true,"created":true,"name":"Default layer"},"Layer 2":{"position":{"left":48,"top":0},"size":{"width":40,"height":26},"zIndex":0,"display":false,"title":"","bgColor":[255,255,255,0],"wrapper":true,"created":true,"name":"Default layer"}},"id":3,"vars_in":[{"rel":"tpl","name":"template"},{"rel":"form","name":"data"}],"actions_in":[{}],"vars_out":[{"jpath":[]}],"actions_out":[{"jpath":[]}],"toolbar":{"custom":[[{"title":"","icon":"","action":"","position":"begin","color":[100,100,100,1]}]],"common":[{"toolbar":[["Open Preferences"]]}]},"css":[{"fontSize":[""],"fontFamily":[""]}],"title":""},{"url":"modules/types/edition/object_editor/","configuration":{"sections":{},"groups":{"group":[{"editable":["text"],"expanded":[[]],"storeObject":[["expand"]],"displayValue":[[]],"searchBox":[["search"]],"sendButton":[[]],"output":["new"],"storedObject":["{\"title\":\"abfddc\",\"kind\":\"B\"}"]}]}},"layers":{"Default layer":{"position":{"left":89,"top":33},"size":{"width":49,"height":32},"zIndex":0,"display":true,"title":"Output","bgColor":[255,255,255,0],"wrapper":true,"created":true,"name":"Default layer"},"Layer 1":{"position":{"left":89,"top":33},"size":{"width":49,"height":32},"zIndex":0,"display":false,"title":"Output","bgColor":[255,255,255,0],"wrapper":true,"created":true,"name":"Default layer"},"Layer 2":{"position":{"left":89,"top":33},"size":{"width":49,"height":32},"zIndex":0,"display":false,"title":"Output","bgColor":[255,255,255,0],"wrapper":true,"created":true,"name":"Default layer"}},"id":4,"vars_in":[{"rel":"value","name":"data"}],"actions_in":[{}],"vars_out":[{"jpath":[]}],"actions_out":[{"jpath":[]}],"toolbar":{"custom":[[{"title":"","icon":"","action":"","position":"begin","color":[100,100,100,1]}]],"common":[{"toolbar":[["Open Preferences"]]}]},"css":[{"fontSize":[""],"fontFamily":[""]}],"title":"Output"},{"url":"modules/types/client_interaction/code_executor/","configuration":{"sections":{},"groups":{"group":[{"display":[["editor","buttons"]],"execOnLoad":[[]],"asyncAwait":[["top"]],"script":["API.createData('data', undefined);"]}],"libs":[[{}]],"buttons":[[{"name":"button1","label":"Execute","hide":[],"disable":[]}]]}},"layers":{"Default layer":{"position":{"left":48,"top":27},"size":{"width":40,"height":27},"zIndex":0,"display":true,"title":"","bgColor":[255,255,255,0],"wrapper":true,"created":true,"name":"Default layer"},"Layer 1":{"position":{"left":48,"top":27},"size":{"width":40,"height":27},"zIndex":0,"display":false,"title":"","bgColor":[255,255,255,0],"wrapper":true,"created":true,"name":"Default layer"},"Layer 2":{"position":{"left":48,"top":27},"size":{"width":40,"height":27},"zIndex":0,"display":false,"title":"","bgColor":[255,255,255,0],"wrapper":true,"created":true,"name":"Default layer"}},"id":5,"vars_in":[{}],"actions_in":[{}],"vars_out":[{"jpath":[]}],"actions_out":[{"jpath":[]}],"toolbar":{"custom":[[{"title":"","icon":"","action":"","position":"begin","color":[100,100,100,1]}]],"common":[{"toolbar":[["Open Preferences"]]}]},"css":[{"fontSize":[""],"fontFamily":[""]}],"title":""},{"url":"modules/types/client_interaction/code_executor/","configuration":{"sections":{},"groups":{"group":[{"display":[["editor","buttons"]],"execOnLoad":[[]],"asyncAwait":[["top"]],"script":["const data = API.getData('data');\ndata.kind= \"\";\ndata.triggerChange();"]}],"libs":[[{}]],"buttons":[[{"name":"button1","label":"Execute","hide":[],"disable":[]}]]}},"layers":{"Default layer":{"position":{"left":0,"top":33},"size":{"width":47,"height":12},"zIndex":0,"display":true,"title":"","bgColor":[255,255,255,0],"wrapper":true,"created":true,"name":"Default layer"},"Layer 1":{"position":{"left":0,"top":33},"size":{"width":47,"height":12},"zIndex":0,"display":false,"title":"","bgColor":[255,255,255,0],"wrapper":true,"created":true,"name":"Default layer"},"Layer 2":{"position":{"left":0,"top":33},"size":{"width":47,"height":12},"zIndex":0,"display":false,"title":"","bgColor":[255,255,255,0],"wrapper":true,"created":true,"name":"Default layer"}},"id":6,"vars_in":[{}],"actions_in":[{}],"vars_out":[{"jpath":[]}],"actions_out":[{"jpath":[]}],"toolbar":{"custom":[[{"title":"","icon":"","action":"","position":"begin","color":[100,100,100,1]}]],"common":[{"toolbar":[["Open Preferences"]]}]},"css":[{"fontSize":[""],"fontFamily":[""]}],"title":""},{"url":"modules/types/client_interaction/code_executor/","configuration":{"sections":{},"groups":{"group":[{"display":[["editor","buttons"]],"execOnLoad":[[]],"asyncAwait":[["top"]],"script":["const template = API.getData('template');\nconst data = API.getData('data');\n\nif(template && data) {\n const result = await TwigUtil.form(template, data, {twig: {}, buttonLabels: ['Submit']});\n console.log('result', result);\n}"]}],"libs":[[{"lib":"src/util/twig","alias":"TwigUtil"}]],"buttons":[[{"name":"button1","label":"Execute","hide":[],"disable":[]}]]}},"layers":{"Default layer":{"position":{"left":0,"top":46},"size":{"width":47,"height":25},"zIndex":0,"display":true,"title":"Twig dialog form","bgColor":[255,255,255,0],"wrapper":true,"created":true,"name":"Default layer"},"Layer 1":{"position":{"left":0,"top":46},"size":{"width":47,"height":25},"zIndex":0,"display":false,"title":"Twig dialog form","bgColor":[255,255,255,0],"wrapper":true,"created":true,"name":"Default layer"},"Layer 2":{"position":{"left":0,"top":46},"size":{"width":47,"height":25},"zIndex":0,"display":true,"title":"Twig dialog form (Layer 2)","bgColor":[255,255,255,0],"wrapper":true,"created":true,"name":"Default layer"}},"id":7,"vars_in":[{}],"actions_in":[{}],"vars_out":[{"jpath":[]}],"actions_out":[{"jpath":[]}],"toolbar":{"custom":[[{"title":"","icon":"","action":"","position":"begin","color":[100,100,100,1]}]],"common":[{"toolbar":[["Open Preferences"]]}]},"css":[{"fontSize":[""],"fontFamily":[""]}],"title":"Twig dialog form"}],"variables":[{"jpath":[""]}],"aliases":[{"path":"https://www.lactame.com/github/cheminfo-js/visualizer-helper/fede69d611616d26d5f70a4fc053eceac6612b68","alias":"vh"},{"path":"http://localhost:9898/cheminfo-js/visualizer-helper","alias":"vhxx"}],"configuration":{"title":"Twig dynamic form experiments"},"actionscripts":[{"sections":{},"groups":{"action":[{"name":[null],"script":[null]}]}}],"init_script":[{"sections":{},"groups":{"general":[{"script":["\n\nconst track = await API.require('vh/util/track');\nawait track('emdbPreferences', {\n \"title\": \"abfddc\",\n \"kind\": \"A\"\n}, { varName: 'data' });\n"]}]}}],"actionfiles":[{"sections":{},"groups":{"action":[[{}]]}}]} diff --git a/testcase/index.html b/testcase/index.html index 056569c09..00f4fba4f 100644 --- a/testcase/index.html +++ b/testcase/index.html @@ -269,11 +269,17 @@ description: 'Module not found (placeholder)', folder: 'module_not_found', }, + ], + Migrations: [ { description: 'Remove filters migration', folder: 'remove_filters', }, - ], + { + description: 'Twig form breaking change migration', + folder: 'twig_migration' + } + ] };