From fedf03af44aace7ed1579a45bd46e7470efff24b Mon Sep 17 00:00:00 2001 From: LaviniaStiliadou Date: Wed, 31 May 2023 01:37:42 +0200 Subject: [PATCH 01/24] reorganize config, add option to specify plugin dependencies Co-Authored-By: SharonNaemi <49727936+SharonNaemi@users.noreply.github.com> --- .../config/{EditorTab.js => GeneralTab.js} | 0 .../editor/plugin/PluginHandler.js | 87 ++++-- .../data-extension/DataFlowPlugin.js | 2 +- .../extensions/deployment/QuantMEPlugin.js | 78 +++++ .../extensions/qhana/QHAnaPlugin.js | 2 +- .../extensions/quantme/QuantMEPlugin.js | 64 +--- .../quantme/configTabs/BPMNConfigTab.js | 107 ------- .../{QrmDataTab.js => GitHubTab.js} | 0 .../quantme/configTabs/HybridRuntimeTab.js | 114 ------- .../quantme/configTabs/NisqAnalyzerTab.js | 58 ---- .../quantme/configTabs/OpenToscaTab.js | 81 ----- .../quantme/configTabs/QuantMETab.js | 283 ++++++++++++++++++ 12 files changed, 427 insertions(+), 449 deletions(-) rename components/bpmn-q/modeler-component/editor/config/{EditorTab.js => GeneralTab.js} (100%) create mode 100644 components/bpmn-q/modeler-component/extensions/deployment/QuantMEPlugin.js delete mode 100644 components/bpmn-q/modeler-component/extensions/quantme/configTabs/BPMNConfigTab.js rename components/bpmn-q/modeler-component/extensions/quantme/configTabs/{QrmDataTab.js => GitHubTab.js} (100%) delete mode 100644 components/bpmn-q/modeler-component/extensions/quantme/configTabs/HybridRuntimeTab.js delete mode 100644 components/bpmn-q/modeler-component/extensions/quantme/configTabs/NisqAnalyzerTab.js delete mode 100644 components/bpmn-q/modeler-component/extensions/quantme/configTabs/OpenToscaTab.js create mode 100644 components/bpmn-q/modeler-component/extensions/quantme/configTabs/QuantMETab.js diff --git a/components/bpmn-q/modeler-component/editor/config/EditorTab.js b/components/bpmn-q/modeler-component/editor/config/GeneralTab.js similarity index 100% rename from components/bpmn-q/modeler-component/editor/config/EditorTab.js rename to components/bpmn-q/modeler-component/editor/config/GeneralTab.js diff --git a/components/bpmn-q/modeler-component/editor/plugin/PluginHandler.js b/components/bpmn-q/modeler-component/editor/plugin/PluginHandler.js index 2b45efb1..f53b7077 100644 --- a/components/bpmn-q/modeler-component/editor/plugin/PluginHandler.js +++ b/components/bpmn-q/modeler-component/editor/plugin/PluginHandler.js @@ -1,9 +1,10 @@ -import PlanQKPlugin from "../../extensions/planqk/PlanQKPlugin"; -import QuantMEPlugin from "../../extensions/quantme/QuantMEPlugin"; +import PlanQKPlugin from '../../extensions/planqk/PlanQKPlugin'; +import QuantMEPlugin from '../../extensions/quantme/QuantMEPlugin'; import DataFlowPlugin from '../../extensions/data-extension/DataFlowPlugin'; import QHAnaPlugin from '../../extensions/qhana/QHAnaPlugin'; -import {getAllConfigs} from "./PluginConfigHandler"; -import EditorTab from "../config/EditorTab"; +import { getAllConfigs } from './PluginConfigHandler'; +import GeneralTab from '../config/GeneralTab'; +import GitHubTab from '../../extensions/quantme/configTabs/GitHubTab'; /** * Handler for plugins of the modeler. Controls active plugins and the properties they define. Central access point to @@ -11,50 +12,69 @@ import EditorTab from "../config/EditorTab"; */ // list of plugins integrated in the modeler, register new plugins here +// dependencies can be specified by the name of the corresponding plugins const PLUGINS = [ - DataFlowPlugin, - QHAnaPlugin, - PlanQKPlugin, - QuantMEPlugin, + { + plugin: QuantMEPlugin, + dependencies: [] + }, + { + plugin: DataFlowPlugin, + dependencies: [] + }, + { + plugin: QHAnaPlugin, + dependencies: [] + }, + { + plugin: PlanQKPlugin, + dependencies: [] + } ]; // list of currently active plugins in the current running instance of the modeler, defined based on the plugin configuration let activePlugins = []; -/** - * Returns these plugins of PLUGINS which have an entry in the current plugin configuration of the modeler. - * - * @returns {*[]} Array of active plugins. - */ -export function getActivePlugins() { - - // return saved active plugins array +function getActivePlugins() { if (activePlugins.length > 0) { return activePlugins; - - // determine active plugins } else { - activePlugins = []; - - let plugin; - - // add all plugins of PLUGINS to active plugins which have a config entry for them - for (let pluginConfig of getAllConfigs()) { - - plugin = PLUGINS.find(plugin => plugin.name === pluginConfig.name && checkEnabledStatus(plugin.name)); + const loadPlugin = (plugin) => { + console.log('-------') + console.log(activePlugins) + if (!activePlugins.includes(plugin.plugin)) { + for (const dependency of plugin.dependencies) { + const dependencyPlugin = PLUGINS.find((p) => p.plugin.name === dependency); + console.log(dependencyPlugin) + if (dependencyPlugin && !activePlugins.includes(dependencyPlugin.plugin)) { + activePlugins.push(dependencyPlugin.plugin); + loadPlugin(dependencyPlugin); + } + } + activePlugins.push(plugin.plugin); + } + }; + for (const pluginConfig of getAllConfigs()) { + const plugin = PLUGINS.find( + (p) => p.plugin.name === pluginConfig.name && checkEnabledStatus(p.plugin.name) + ); if (plugin) { - activePlugins.push(plugin); + loadPlugin(plugin); } } + return activePlugins; } } + + export function checkEnabledStatus(pluginName) { - switch(pluginName) { + console.log(pluginName) + switch (pluginName) { case 'dataflow': return process.env.ENABLE_DATA_FLOW_PLUGIN; case 'planqk': @@ -62,6 +82,7 @@ export function checkEnabledStatus(pluginName) { case 'qhana': return process.env.ENABLE_QHANA_PLUGIN; case 'quantme': + console.log(process.env.ENABLE_QUANTME_PLUGIN) return process.env.ENABLE_QUANTME_PLUGIN; } } @@ -179,13 +200,17 @@ export function getConfigTabs() { // add default editor tab to configure editor configs let configTabs = [{ tabId: 'EditorTab', - tabTitle: 'Editor', - configTab: EditorTab, + tabTitle: 'General', + configTab: GeneralTab, + }, { + tabId: 'QRMDataTab', + tabTitle: 'GitHub', + configTab: GitHubTab, }]; // load the config tabs of the active plugins into one array for (let plugin of getActivePlugins()) { - if (plugin.configTabs) { + if (plugin.configTabs && checkEnabledStatus(plugin.name)) { configTabs = configTabs.concat(plugin.configTabs); } } diff --git a/components/bpmn-q/modeler-component/extensions/data-extension/DataFlowPlugin.js b/components/bpmn-q/modeler-component/extensions/data-extension/DataFlowPlugin.js index 0f458134..d4a31260 100644 --- a/components/bpmn-q/modeler-component/extensions/data-extension/DataFlowPlugin.js +++ b/components/bpmn-q/modeler-component/extensions/data-extension/DataFlowPlugin.js @@ -25,7 +25,7 @@ export default { configTabs: [ { tabId: 'DataEndpointsTab', - tabTitle: 'Data Endpoints', + tabTitle: 'Data Flow Plugin', configTab: TransformationTaskConfigurationsTab, }, ], diff --git a/components/bpmn-q/modeler-component/extensions/deployment/QuantMEPlugin.js b/components/bpmn-q/modeler-component/extensions/deployment/QuantMEPlugin.js new file mode 100644 index 00000000..1633064a --- /dev/null +++ b/components/bpmn-q/modeler-component/extensions/deployment/QuantMEPlugin.js @@ -0,0 +1,78 @@ +import React from "react"; + +import QuantMEExtensionModule from "./modeling"; +import BPMNConfigTab from "./configTabs/BPMNConfigTab"; +import OpenToscaTab from "./configTabs/OpenToscaTab"; +import NisqAnalyzerTab from "./configTabs/NisqAnalyzerTab"; +import QrmDataTab from "./configTabs/QrmDataTab"; +import HybridRuntimeTab from "./configTabs/HybridRuntimeTab"; +import {getQRMs} from "./qrm-manager"; +import {startQuantmeReplacementProcess} from "./replacement/QuantMETransformator"; +import * as camundaConfig from "../../editor/config/EditorConfigManager"; +import * as config from "./framework-config/config-manager"; +import TransformationButton from "../../editor/ui/TransformationButton"; +import DataObjectConfigurationsTab from './configurations/DataObjectConfigurationsTab'; + +import quantMEStyles from './styling/quantme.css'; +import QuantMEPluginButton from "./ui/QuantMEPluginButton"; + +let quantMEModdleExtension = require('./resources/quantum4bpmn.json'); + +/** + * Plugin Object of the QuantME extension. Used to register the plugin in the plugin handler of the modeler. + */ +export default { + buttons: [], + configTabs: [ + /** + { + tabId: 'DataConfigurationEndpointTab', + tabTitle: 'QuantME Data', + configTab: DataObjectConfigurationsTab, + }, + { + tabId: 'OpenTOSCAEndpointTab', + tabTitle: 'OpenTOSCA', + configTab: OpenToscaTab, + },**/ + { + tabId: 'BPMNTab', + tabTitle: 'QuantME', + configTab: BPMNConfigTab, + } + /** + { + tabId: 'NISQAnalyzerEndpointTab', + tabTitle: 'NISQ Analyzer', + configTab: NisqAnalyzerTab, + }, + { + tabId: 'QRMDataTab', + tabTitle: 'QRM Data', + configTab: QrmDataTab, + }, + { + tabId: 'HybridRuntimesTab', + tabTitle: 'Hybrid Runtimes', + configTab: HybridRuntimeTab, + } + */ + ], + name: 'quantme', + extensionModule: QuantMEExtensionModule, + moddleDescription: quantMEModdleExtension, + styling: [quantMEStyles], + transformExtensionButton: { + + let currentQRMs = getQRMs(); + return await startQuantmeReplacementProcess(xml, currentQRMs, + { + nisqAnalyzerEndpoint: config.getNisqAnalyzerEndpoint(), + transformationFrameworkEndpoint: config.getTransformationFrameworkEndpoint(), + camundaEndpoint: camundaConfig.getCamundaEndpoint() + } + ); + } + }/>, +}; \ No newline at end of file diff --git a/components/bpmn-q/modeler-component/extensions/qhana/QHAnaPlugin.js b/components/bpmn-q/modeler-component/extensions/qhana/QHAnaPlugin.js index 4219772f..63a86d72 100644 --- a/components/bpmn-q/modeler-component/extensions/qhana/QHAnaPlugin.js +++ b/components/bpmn-q/modeler-component/extensions/qhana/QHAnaPlugin.js @@ -23,7 +23,7 @@ export default { configTabs: [ { tabId: 'QHAnaEndpointsTab', - tabTitle: 'QHAna Endpoints', + tabTitle: 'QHAna Plugin', configTab: QHAnaConfigurationsTab, }, ], diff --git a/components/bpmn-q/modeler-component/extensions/quantme/QuantMEPlugin.js b/components/bpmn-q/modeler-component/extensions/quantme/QuantMEPlugin.js index 226698da..efdca096 100644 --- a/components/bpmn-q/modeler-component/extensions/quantme/QuantMEPlugin.js +++ b/components/bpmn-q/modeler-component/extensions/quantme/QuantMEPlugin.js @@ -1,20 +1,10 @@ -import React from "react"; +import React from 'react'; -import QuantMEExtensionModule from "./modeling"; -import BPMNConfigTab from "./configTabs/BPMNConfigTab"; -import OpenToscaTab from "./configTabs/OpenToscaTab"; -import NisqAnalyzerTab from "./configTabs/NisqAnalyzerTab"; -import QrmDataTab from "./configTabs/QrmDataTab"; -import HybridRuntimeTab from "./configTabs/HybridRuntimeTab"; -import {getQRMs} from "./qrm-manager"; -import {startQuantmeReplacementProcess} from "./replacement/QuantMETransformator"; -import * as camundaConfig from "../../editor/config/EditorConfigManager"; -import * as config from "./framework-config/config-manager"; -import TransformationButton from "../../editor/ui/TransformationButton"; -import DataObjectConfigurationsTab from './configurations/DataObjectConfigurationsTab'; +import QuantMEExtensionModule from './modeling'; +import QuantMETab from './configTabs/QuantMETab'; import quantMEStyles from './styling/quantme.css'; -import QuantMEPluginButton from "./ui/QuantMEPluginButton"; +import QuantMEPluginButton from './ui/QuantMEPluginButton'; let quantMEModdleExtension = require('./resources/quantum4bpmn.json'); @@ -22,54 +12,16 @@ let quantMEModdleExtension = require('./resources/quantum4bpmn.json'); * Plugin Object of the QuantME extension. Used to register the plugin in the plugin handler of the modeler. */ export default { - buttons: [], + buttons: [], configTabs: [ - { - tabId: 'DataConfigurationEndpointTab', - tabTitle: 'QuantME Data', - configTab: DataObjectConfigurationsTab, - }, - { - tabId: 'OpenTOSCAEndpointTab', - tabTitle: 'OpenTOSCA', - configTab: OpenToscaTab, - }, { tabId: 'BPMNTab', - tabTitle: 'Workflow', - configTab: BPMNConfigTab, - }, - { - tabId: 'NISQAnalyzerEndpointTab', - tabTitle: 'NISQ Analyzer', - configTab: NisqAnalyzerTab, - }, - { - tabId: 'QRMDataTab', - tabTitle: 'QRM Data', - configTab: QrmDataTab, - }, - { - tabId: 'HybridRuntimesTab', - tabTitle: 'Hybrid Runtimes', - configTab: HybridRuntimeTab, + tabTitle: 'QuantME Plugin', + configTab: QuantMETab, } ], name: 'quantme', extensionModule: QuantMEExtensionModule, moddleDescription: quantMEModdleExtension, - styling: [quantMEStyles], - transformExtensionButton: { - - let currentQRMs = getQRMs(); - return await startQuantmeReplacementProcess(xml, currentQRMs, - { - nisqAnalyzerEndpoint: config.getNisqAnalyzerEndpoint(), - transformationFrameworkEndpoint: config.getTransformationFrameworkEndpoint(), - camundaEndpoint: camundaConfig.getCamundaEndpoint() - } - ); - } - }/>, + styling: [quantMEStyles] }; \ No newline at end of file diff --git a/components/bpmn-q/modeler-component/extensions/quantme/configTabs/BPMNConfigTab.js b/components/bpmn-q/modeler-component/extensions/quantme/configTabs/BPMNConfigTab.js deleted file mode 100644 index ac63d075..00000000 --- a/components/bpmn-q/modeler-component/extensions/quantme/configTabs/BPMNConfigTab.js +++ /dev/null @@ -1,107 +0,0 @@ -import React, {useState} from 'react'; -import {getModeler} from "../../../editor/ModelerHandler"; -import * as config from "../framework-config/config-manager"; - -/** - * React component specifying a tab for the configuration dialog of the modeler. The tab allows the user to change workflow - * related configuration entries of the QuantME configs. - * - * @return {JSX.Element} The tab as a React component - * @constructor - */ -export default function BPMNConfigTab() { - - const [transformationFrameworkEndpoint, setTransformationFrameworkEndpoint] = useState(config.getTransformationFrameworkEndpoint()); - const [scriptSplitterEndpoint, setScriptSplitterEndpoint] = useState(config.getScriptSplitterEndpoint()); - const [scriptSplitterThreshold, setScriptSplitterThreshold] = useState(config.getScriptSplitterThreshold()); - - const modeler = getModeler(); - - const editorActions = modeler.get('editorActions'); - const eventBus = modeler.get('eventBus'); - - // register editor action listener for changes in config entries - if (!editorActions._actions.hasOwnProperty('transformationFrameworkEndpointChanged')) { - editorActions.register({ - transformationFrameworkEndpointChanged: function (transformationFrameworkEndpoint) { - modeler.config.transformationFrameworkEndpoint = transformationFrameworkEndpoint; - } - }); - } - if (!editorActions._actions.hasOwnProperty('scriptSplitterEndpointChanged')) { - editorActions.register({ - scriptSplitterEndpointChanged: function (scriptSplitterEndpoint) { - modeler.config.scriptSplitterEndpoint = scriptSplitterEndpoint; - eventBus.fire('config.updated', self.modeler.config); - } - }); - } - if (!editorActions._actions.hasOwnProperty('scriptSplitterThresholdChanged')) { - editorActions.register({ - scriptSplitterThresholdChanged: function (scriptSplitterEndpoint) { - modeler.config.scriptSplitterThreshold = scriptSplitterEndpoint; - } - }); - } - - // save changed config entries on close - BPMNConfigTab.prototype.onClose = () => { - modeler.config.transformationFrameworkEndpoint = transformationFrameworkEndpoint; - modeler.config.scriptSplitterEndpoint = scriptSplitterEndpoint; - modeler.config.scriptSplitterThreshold = scriptSplitterThreshold; - config.setTransformationFrameworkEndpoint(transformationFrameworkEndpoint); - config.setScriptSplitterEndpoint(scriptSplitterEndpoint); - config.setScriptSplitterThreshold(scriptSplitterThreshold); - }; - - return <> -

BPMN related configurations:

- - - - - - - -
QuantME Framework Endpoint - setTransformationFrameworkEndpoint(event.target.value)}/> -
-

Workflow generation:

- - - - - - - - - - - -
Script Splitter Endpoint - setScriptSplitterEndpoint(event.target.value)}/> -
Script Splitter Threshold - setScriptSplitterThreshold(event.target.value)}/> -
- ; -} - -BPMNConfigTab.prototype.config = () => { - const modeler = getModeler(); - - modeler.config.transformationFrameworkEndpoint = config.getTransformationFrameworkEndpoint(); - modeler.config.scriptSplitterEndpoint = config.getScriptSplitterEndpoint(); - modeler.config.scriptSplitterThreshold = config.getScriptSplitterThreshold(); -}; \ No newline at end of file diff --git a/components/bpmn-q/modeler-component/extensions/quantme/configTabs/QrmDataTab.js b/components/bpmn-q/modeler-component/extensions/quantme/configTabs/GitHubTab.js similarity index 100% rename from components/bpmn-q/modeler-component/extensions/quantme/configTabs/QrmDataTab.js rename to components/bpmn-q/modeler-component/extensions/quantme/configTabs/GitHubTab.js diff --git a/components/bpmn-q/modeler-component/extensions/quantme/configTabs/HybridRuntimeTab.js b/components/bpmn-q/modeler-component/extensions/quantme/configTabs/HybridRuntimeTab.js deleted file mode 100644 index 7a4b370d..00000000 --- a/components/bpmn-q/modeler-component/extensions/quantme/configTabs/HybridRuntimeTab.js +++ /dev/null @@ -1,114 +0,0 @@ -import React, {useState} from 'react'; -import {getModeler} from "../../../editor/ModelerHandler"; -import * as config from "../framework-config/config-manager"; - -/** - * React component specifying a tab for the configuration dialog of the modeler. The tab allows the user to change the - * hybrid runtime configs. - * - * @return {JSX.Element} The tab as a React component - * @constructor - */ -export default function HybridRuntimeTab() { - - const [qiskitRuntimeHandlerEndpoint, setQiskitRuntimeHandlerEndpoint] = useState(config.getQiskitRuntimeHandlerEndpoint()); - const [hybridRuntimeProvenance, setHybridRuntimeProvenance] = useState(config.getHybridRuntimeProvenance()); - const [awsRuntimeHandlerEndpoint, setAWSRuntimeHandlerEndpoint] = useState(config.getAWSRuntimeHandlerEndpoint()); - - let hybridRuntimeProvenanceBoolean = hybridRuntimeProvenance; - - const modeler = getModeler(); - - const editorActions = modeler.get('editorActions'); - const eventBus = modeler.get('eventBus'); - - // register editor action listener for changes in config entries - if (!editorActions._actions.hasOwnProperty('qiskitRuntimeHandlerEndpointChanged')) { - editorActions.register({ - qiskitRuntimeHandlerEndpointChanged: function (qiskitRuntimeHandlerEndpoint) { - self.modeler.config.qiskitRuntimeHandlerEndpoint = qiskitRuntimeHandlerEndpoint; - eventBus.fire('config.updated', self.modeler.config); - } - }); - } - if (!editorActions._actions.hasOwnProperty('awsRuntimeHandlerEndpointChanged')) { - editorActions.register({ - awsRuntimeHandlerEndpointChanged: function (awsRuntimeHandlerEndpoint) { - self.modeler.config.awsRuntimeHandlerEndpoint = awsRuntimeHandlerEndpoint; - eventBus.fire('config.updated', self.modeler.config); - } - }); - } - if (!editorActions._actions.hasOwnProperty('hybridRuntimeProvenanceChanged')) { - editorActions.register({ - hybridRuntimeProvenanceChanged: function (hybridRuntimeProvenance) { - self.modeler.config.hybridRuntimeProvenance = hybridRuntimeProvenance; - eventBus.fire('config.updated', self.modeler.config); - } - }); - } - - // save changed config entries on close - HybridRuntimeTab.prototype.onClose = () => { - modeler.config.qiskitRuntimeHandlerEndpoint = qiskitRuntimeHandlerEndpoint; - modeler.config.hybridRuntimeProvenance = hybridRuntimeProvenance; - modeler.config.awsRuntimeHandlerEndpoint = awsRuntimeHandlerEndpoint; - config.setQiskitRuntimeHandlerEndpoint(qiskitRuntimeHandlerEndpoint); - config.setAWSRuntimeHandlerEndpoint(awsRuntimeHandlerEndpoint); - config.setHybridRuntimeProvenance(hybridRuntimeProvenance); - }; - - return (<> -

Hybrid Runtime Handler Endpoints

- - - - - - - - - - - -
Qiskit Runtime Handler Endpoint: - setQiskitRuntimeHandlerEndpoint(event.target.value)}/> -
AWS Runtime Handler Endpoint: - setAWSRuntimeHandlerEndpoint(event.target.value)}/> -
-

Provenance Collection for Hybrid Runtime

- - - - - - - -
Retrieve Intermediate Results: - { - hybridRuntimeProvenanceBoolean = !hybridRuntimeProvenanceBoolean; - setHybridRuntimeProvenance(hybridRuntimeProvenanceBoolean); - }}/> -
- ); -} - -HybridRuntimeTab.prototype.config = () => { - const modeler = getModeler(); - - modeler.config.qiskitRuntimeHandlerEndpoint = config.getQiskitRuntimeHandlerEndpoint(); - modeler.config.hybridRuntimeProvenance = config.getHybridRuntimeProvenance(); - modeler.config.awsRuntimeHandlerEndpoint = config.getAWSRuntimeHandlerEndpoint(); -}; \ No newline at end of file diff --git a/components/bpmn-q/modeler-component/extensions/quantme/configTabs/NisqAnalyzerTab.js b/components/bpmn-q/modeler-component/extensions/quantme/configTabs/NisqAnalyzerTab.js deleted file mode 100644 index 45bcdcd7..00000000 --- a/components/bpmn-q/modeler-component/extensions/quantme/configTabs/NisqAnalyzerTab.js +++ /dev/null @@ -1,58 +0,0 @@ -import React, {useState} from 'react'; -import {getModeler} from "../../../editor/ModelerHandler"; -import * as config from "../framework-config/config-manager"; - -/** - * React component specifying a tab for the configuration dialog of the modeler. The tab allows the user to change the - * NISQ analyzer endpoint. - * - * @return {JSX.Element} The tab as a React component - * @constructor - */ -export default function NisqAnalyzerTab() { - - const [nisqAnalyzerEndpoint, setNisqAnalyzerEndpoint] = useState(config.getNisqAnalyzerEndpoint()); - - const modeler = getModeler(); - - const editorActions = modeler.get('editorActions'); - - // register editor action listener for changes in config entries - if (!editorActions._actions.hasOwnProperty('nisqAnalyzerEndpointChanged')) { - editorActions.register({ - nisqAnalyzerEndpointChanged: function (nisqAnalyzerEndpoint) { - self.modeler.config.nisqAnalyzerEndpoint = nisqAnalyzerEndpoint; - } - }); - } - - // save changed config entries on close - NisqAnalyzerTab.prototype.onClose = () => { - modeler.config.nisqAnalyzerEndpoint = nisqAnalyzerEndpoint; - config.setNisqAnalyzerEndpoint(nisqAnalyzerEndpoint); - }; - - return <> -

NISQ Analyzer

- - - - - - - -
NISQ Analyzer Endpoint: - setNisqAnalyzerEndpoint(event.target.value)}/> -
- ; -} - -NisqAnalyzerTab.prototype.config = () => { - const modeler = getModeler(); - - modeler.config.nisqAnalyzerEndpoint = config.getNisqAnalyzerEndpoint(); -}; \ No newline at end of file diff --git a/components/bpmn-q/modeler-component/extensions/quantme/configTabs/OpenToscaTab.js b/components/bpmn-q/modeler-component/extensions/quantme/configTabs/OpenToscaTab.js deleted file mode 100644 index 2cf3550b..00000000 --- a/components/bpmn-q/modeler-component/extensions/quantme/configTabs/OpenToscaTab.js +++ /dev/null @@ -1,81 +0,0 @@ -import React, {useState} from 'react'; -import {getModeler} from "../../../editor/ModelerHandler"; -import * as config from "../framework-config/config-manager"; - -/** - * React component specifying a tab for the configuration dialog of the modeler. The tab allows the user to change the - * OpenTOSCA and Winery endpoint. - * - * @return {JSX.Element} The tab as a React component - * @constructor - */ -export default function OpenToscaTab() { - - const [opentoscaEndpoint, setOpentoscaEndpoint] = useState(config.getOpenTOSCAEndpoint()); - const [wineryEndpoint, setWineryEndpoint] = useState(config.getWineryEndpoint()); - - const modeler = getModeler(); - - const editorActions = modeler.get('editorActions'); - const eventBus = modeler.get('eventBus'); - - // register editor action listener for changes in config entries - if (!editorActions._actions.hasOwnProperty('opentoscaEndpointChanged')) { - editorActions.register({ - opentoscaEndpointChanged: function (opentoscaEndpoint) { - self.modeler.config.opentoscaEndpoint = opentoscaEndpoint; - } - }); - } - if (!editorActions._actions.hasOwnProperty('wineryEndpointChanged')) { - editorActions.register({ - wineryEndpointChanged: function (wineryEndpoint) { - self.modeler.config.wineryEndpoint = wineryEndpoint; - eventBus.fire('config.updated', self.modeler.config); - } - }); - } - - // save changed config entries on close - OpenToscaTab.prototype.onClose = () => { - modeler.config.opentoscaEndpoint = opentoscaEndpoint; - modeler.config.wineryEndpoint = wineryEndpoint; - config.setOpenTOSCAEndpoint(opentoscaEndpoint); - config.setWineryEndpoint(wineryEndpoint); - }; - - return <> -

OpenTOSCA

- - - - - - - - - - - -
OpenTOSCA Endpoint: - setOpentoscaEndpoint(event.target.value)}/> -
Winery Endpoint: - setWineryEndpoint(event.target.value)}/> -
- ; -} - -OpenToscaTab.prototype.config = () => { - const modeler = getModeler(); - - modeler.config.opentoscaEndpoint = config.getOpenTOSCAEndpoint(); - modeler.config.wineryEndpoint = config.getWineryEndpoint(); -}; \ No newline at end of file diff --git a/components/bpmn-q/modeler-component/extensions/quantme/configTabs/QuantMETab.js b/components/bpmn-q/modeler-component/extensions/quantme/configTabs/QuantMETab.js new file mode 100644 index 00000000..805db369 --- /dev/null +++ b/components/bpmn-q/modeler-component/extensions/quantme/configTabs/QuantMETab.js @@ -0,0 +1,283 @@ +import React, { useState } from 'react'; +import { getModeler } from '../../../editor/ModelerHandler'; +import * as config from '../framework-config/config-manager'; + +/** + * React component specifying a tab for the configuration dialog of the modeler. The tab allows the user to change workflow + * related configuration entries of the QuantME configs. + * + * @return {JSX.Element} The tab as a React component + * @constructor + */ +export default function BPMNConfigTab() { + const [dataConfigurationsEndpoint, setDataConfigurationsEndpoint] = useState(config.getQuantMEDataConfigurationsEndpoint()); + + const [opentoscaEndpoint, setOpentoscaEndpoint] = useState(config.getOpenTOSCAEndpoint()); + const [wineryEndpoint, setWineryEndpoint] = useState(config.getWineryEndpoint()); + const [nisqAnalyzerEndpoint, setNisqAnalyzerEndpoint] = useState(config.getNisqAnalyzerEndpoint()); + const [qiskitRuntimeHandlerEndpoint, setQiskitRuntimeHandlerEndpoint] = useState(config.getQiskitRuntimeHandlerEndpoint()); + const [hybridRuntimeProvenance, setHybridRuntimeProvenance] = useState(config.getHybridRuntimeProvenance()); + const [awsRuntimeHandlerEndpoint, setAWSRuntimeHandlerEndpoint] = useState(config.getAWSRuntimeHandlerEndpoint()); + let hybridRuntimeProvenanceBoolean = hybridRuntimeProvenance; + + + + const modeler = getModeler(); + + const editorActions = modeler.get('editorActions'); + const eventBus = modeler.get('eventBus'); + + // register editor action listener for changes in config entries + if (!editorActions._actions.hasOwnProperty('qiskitRuntimeHandlerEndpointChanged')) { + editorActions.register({ + qiskitRuntimeHandlerEndpointChanged: function (qiskitRuntimeHandlerEndpoint) { + self.modeler.config.qiskitRuntimeHandlerEndpoint = qiskitRuntimeHandlerEndpoint; + eventBus.fire('config.updated', self.modeler.config); + } + }); + } + if (!editorActions._actions.hasOwnProperty('awsRuntimeHandlerEndpointChanged')) { + editorActions.register({ + awsRuntimeHandlerEndpointChanged: function (awsRuntimeHandlerEndpoint) { + self.modeler.config.awsRuntimeHandlerEndpoint = awsRuntimeHandlerEndpoint; + eventBus.fire('config.updated', self.modeler.config); + } + }); + } + if (!editorActions._actions.hasOwnProperty('hybridRuntimeProvenanceChanged')) { + editorActions.register({ + hybridRuntimeProvenanceChanged: function (hybridRuntimeProvenance) { + self.modeler.config.hybridRuntimeProvenance = hybridRuntimeProvenance; + eventBus.fire('config.updated', self.modeler.config); + } + }); + } + + // register editor action listener for changes in config entries + if (!editorActions._actions.hasOwnProperty('opentoscaEndpointChanged')) { + editorActions.register({ + opentoscaEndpointChanged: function (opentoscaEndpoint) { + self.modeler.config.opentoscaEndpoint = opentoscaEndpoint; + } + }); + } + if (!editorActions._actions.hasOwnProperty('wineryEndpointChanged')) { + editorActions.register({ + wineryEndpointChanged: function (wineryEndpoint) { + self.modeler.config.wineryEndpoint = wineryEndpoint; + eventBus.fire('config.updated', self.modeler.config); + } + }); + } + + // register editor action listener for changes in config entries + if (!editorActions._actions.hasOwnProperty('nisqAnalyzerEndpointChanged')) { + editorActions.register({ + nisqAnalyzerEndpointChanged: function (nisqAnalyzerEndpoint) { + self.modeler.config.nisqAnalyzerEndpoint = nisqAnalyzerEndpoint; + } + }); + } + + const [transformationFrameworkEndpoint, setTransformationFrameworkEndpoint] = useState(config.getTransformationFrameworkEndpoint()); + const [scriptSplitterEndpoint, setScriptSplitterEndpoint] = useState(config.getScriptSplitterEndpoint()); + const [scriptSplitterThreshold, setScriptSplitterThreshold] = useState(config.getScriptSplitterThreshold()); + + + // register editor action listener for changes in config entries + if (!editorActions._actions.hasOwnProperty('transformationFrameworkEndpointChanged')) { + editorActions.register({ + transformationFrameworkEndpointChanged: function (transformationFrameworkEndpoint) { + modeler.config.transformationFrameworkEndpoint = transformationFrameworkEndpoint; + } + }); + } + if (!editorActions._actions.hasOwnProperty('scriptSplitterEndpointChanged')) { + editorActions.register({ + scriptSplitterEndpointChanged: function (scriptSplitterEndpoint) { + modeler.config.scriptSplitterEndpoint = scriptSplitterEndpoint; + eventBus.fire('config.updated', self.modeler.config); + } + }); + } + if (!editorActions._actions.hasOwnProperty('scriptSplitterThresholdChanged')) { + editorActions.register({ + scriptSplitterThresholdChanged: function (scriptSplitterEndpoint) { + modeler.config.scriptSplitterThreshold = scriptSplitterEndpoint; + } + }); + } + + // save changed config entries on close + BPMNConfigTab.prototype.onClose = () => { + modeler.config.dataConfigurationsEndpoint = dataConfigurationsEndpoint; + modeler.config.opentoscaEndpoint = opentoscaEndpoint; + modeler.config.wineryEndpoint = wineryEndpoint; + modeler.config.nisqAnalyzerEndpoint = nisqAnalyzerEndpoint; + modeler.config.transformationFrameworkEndpoint = transformationFrameworkEndpoint; + modeler.config.scriptSplitterEndpoint = scriptSplitterEndpoint; + modeler.config.scriptSplitterThreshold = scriptSplitterThreshold; + modeler.config.qiskitRuntimeHandlerEndpoint = qiskitRuntimeHandlerEndpoint; + modeler.config.hybridRuntimeProvenance = hybridRuntimeProvenance; + modeler.config.awsRuntimeHandlerEndpoint = awsRuntimeHandlerEndpoint; + config.setQuantMEDataConfigurationsEndpoint(dataConfigurationsEndpoint); + config.setOpenTOSCAEndpoint(opentoscaEndpoint); + config.setWineryEndpoint(wineryEndpoint); + config.setNisqAnalyzerEndpoint(nisqAnalyzerEndpoint); + config.setTransformationFrameworkEndpoint(transformationFrameworkEndpoint); + config.setScriptSplitterEndpoint(scriptSplitterEndpoint); + config.setScriptSplitterThreshold(scriptSplitterThreshold); + config.setQiskitRuntimeHandlerEndpoint(qiskitRuntimeHandlerEndpoint); + config.setAWSRuntimeHandlerEndpoint(awsRuntimeHandlerEndpoint); + config.setHybridRuntimeProvenance(hybridRuntimeProvenance); + }; + + return <> +

QuantME data configuration endpoint:

+ + + + + + + +
Data Configurations Endpoint + setDataConfigurationsEndpoint(event.target.value)} /> +
+

OpenTOSCA

+ + + + + + + + + + + +
OpenTOSCA Endpoint: + setOpentoscaEndpoint(event.target.value)} /> +
Winery Endpoint: + setWineryEndpoint(event.target.value)} /> +
+

BPMN related configurations:

+ + + + + + + +
QuantME Framework Endpoint + setTransformationFrameworkEndpoint(event.target.value)} /> +
+

NISQ Analyzer

+ + + + + + + +
NISQ Analyzer Endpoint: + setNisqAnalyzerEndpoint(event.target.value)} /> +
+

Workflow generation:

+ + + + + + + + + + + +
Script Splitter Endpoint + setScriptSplitterEndpoint(event.target.value)} /> +
Script Splitter Threshold + setScriptSplitterThreshold(event.target.value)} /> +
+

Hybrid Runtime Handler Endpoints

+ + + + + + + + + + + +
Qiskit Runtime Handler Endpoint: + setQiskitRuntimeHandlerEndpoint(event.target.value)} /> +
AWS Runtime Handler Endpoint: + setAWSRuntimeHandlerEndpoint(event.target.value)} /> +
+

Provenance Collection for Hybrid Runtime

+ + + + + + + +
Retrieve Intermediate Results: + { + hybridRuntimeProvenanceBoolean = !hybridRuntimeProvenanceBoolean; + setHybridRuntimeProvenance(hybridRuntimeProvenanceBoolean); + }} /> +
+ ; +} + +BPMNConfigTab.prototype.config = () => { + const modeler = getModeler(); + + modeler.config.transformationFrameworkEndpoint = config.getTransformationFrameworkEndpoint(); + modeler.config.scriptSplitterEndpoint = config.getScriptSplitterEndpoint(); + modeler.config.scriptSplitterThreshold = config.getScriptSplitterThreshold(); +}; \ No newline at end of file From 6b822f15069528fb1ca9278919c149d6eccd37e4 Mon Sep 17 00:00:00 2001 From: LaviniaStiliadou Date: Wed, 31 May 2023 02:21:11 +0200 Subject: [PATCH 02/24] integrate auto save --- .../editor/EditorConstants.js | 7 ++- .../editor/config/EditorConfigManager.js | 30 +++++++++- .../editor/config/GeneralTab.js | 24 +++++++- .../editor/util/IoUtilities.js | 57 +++++++++++++++---- .../rules/DataFlowRulesProvider.js | 8 +++ 5 files changed, 113 insertions(+), 13 deletions(-) diff --git a/components/bpmn-q/modeler-component/editor/EditorConstants.js b/components/bpmn-q/modeler-component/editor/EditorConstants.js index 85155ba1..dd01fd65 100644 --- a/components/bpmn-q/modeler-component/editor/EditorConstants.js +++ b/components/bpmn-q/modeler-component/editor/EditorConstants.js @@ -11,4 +11,9 @@ export const workflowEventTypes = { SAVED: 'quantum-workflow-saved', // Workflow saved TRANSFORMED: 'quantum-workflow-transformed', // Workflow transformed DEPLOYED: 'quantum-workflow-deployed', // Workflow deployed to workflow engine -}; \ No newline at end of file +}; + +export const autoSaveFile = { + INTERVAL: 'Interval', + ON_ACTION: 'On Action' +} \ No newline at end of file diff --git a/components/bpmn-q/modeler-component/editor/config/EditorConfigManager.js b/components/bpmn-q/modeler-component/editor/config/EditorConfigManager.js index c7cd1b1f..d40c27ed 100644 --- a/components/bpmn-q/modeler-component/editor/config/EditorConfigManager.js +++ b/components/bpmn-q/modeler-component/editor/config/EditorConfigManager.js @@ -1,11 +1,12 @@ import {getPluginConfig} from '../plugin/PluginConfigHandler'; -import {transformedWorkflowHandlers} from '../EditorConstants'; +import {autoSaveFile, transformedWorkflowHandlers} from '../EditorConstants'; // default configurations of the editor const defaultConfig = { camundaEndpoint: process.env.CAMUNDA_ENDPOINT, fileName: 'quantum-workflow-model.bpmn', transformedWorkflowHandler: transformedWorkflowHandlers.NEW_TAB, + autoSaveFileOption: autoSaveFile.INTERVAL }; let config = {}; @@ -88,6 +89,33 @@ export function setTransformedWorkflowHandler(transformedWorkflowHandler) { } } +/** + * Get the id of the handler to handle auto save of files. + * + * @return {string} the currently specified handler id + */ +export function getAutoSaveFileOption() { + if (config.autoSaveFileOption === undefined) { + const autoSaveFileOption = autoSaveFile[getPluginConfig('editor').autoSaveFileOption]; + setAutoSaveFileOption(autoSaveFileOption || defaultConfig.autoSaveFileOption); + } + return config.autoSaveFileOption; +} + +/** + * Set the id of the handler to handle auto save of files + * + * @param autoSaveFileOption the id of the transformed workflow handler + */ +export function setAutoSaveFileOption(autoSaveFileOption) { + if (autoSaveFileOption !== null && autoSaveFileOption !== undefined + // check that the new value is a valid handler id + && Object.values(autoSaveFile).includes(autoSaveFileOption)) { + + config.autoSaveFileOption = autoSaveFileOption; + } +} + /** * Resets the current editor configs */ diff --git a/components/bpmn-q/modeler-component/editor/config/GeneralTab.js b/components/bpmn-q/modeler-component/editor/config/GeneralTab.js index fe8c9d42..a1f051ff 100644 --- a/components/bpmn-q/modeler-component/editor/config/GeneralTab.js +++ b/components/bpmn-q/modeler-component/editor/config/GeneralTab.js @@ -1,7 +1,7 @@ import React, {useState} from 'react'; import {getModeler} from "../ModelerHandler"; import * as editorConfig from "./EditorConfigManager"; -import {transformedWorkflowHandlers} from '../EditorConstants'; +import {autoSaveFile, transformedWorkflowHandlers} from '../EditorConstants'; /** * Tab for the ConfigModal. Used to allow the configurations of the editor configs, namely the camunda endpoint and the @@ -14,6 +14,7 @@ export default function EditorTab() { const [camundaEndpoint, setCamundaEndpoint] = useState(editorConfig.getCamundaEndpoint()); const [workflowHandler, setWorkflowHandler] = useState(editorConfig.getTransformedWorkflowHandler()); + const [autoSaveFileOption, setAutoSaveFileOption] = useState(editorConfig.getAutoSaveFileOption()); const modeler = getModeler(); @@ -33,6 +34,7 @@ export default function EditorTab() { modeler.config.camundaEndpoint = camundaEndpoint; editorConfig.setCamundaEndpoint(camundaEndpoint); editorConfig.setTransformedWorkflowHandler(workflowHandler); + editorConfig.setAutoSaveFileOption(autoSaveFileOption); }; // return tab which contains entries to change the camunda endpoint and the workflow handler @@ -73,6 +75,26 @@ export default function EditorTab() { +

Auto save file:

+ + + + + + + +
Auto save file option: + +
); } diff --git a/components/bpmn-q/modeler-component/editor/util/IoUtilities.js b/components/bpmn-q/modeler-component/editor/util/IoUtilities.js index 3a5a26f5..1c42ad0e 100644 --- a/components/bpmn-q/modeler-component/editor/util/IoUtilities.js +++ b/components/bpmn-q/modeler-component/editor/util/IoUtilities.js @@ -1,5 +1,6 @@ -import {transformedWorkflowHandlers, workflowEventTypes} from '../EditorConstants'; -import {dispatchWorkflowEvent} from '../events/EditorEventHandler'; +import { autoSaveFile, transformedWorkflowHandlers, workflowEventTypes } from '../EditorConstants'; +import { getModeler } from '../ModelerHandler'; +import { dispatchWorkflowEvent } from '../events/EditorEventHandler'; const editorConfig = require('../config/EditorConfigManager'); @@ -29,7 +30,7 @@ const NEW_DIAGRAM_XML = '\n' + * @returns {Promise} */ export async function saveXmlAsLocalFile(xml, fileName = editorConfig.getFileName()) { - const bpmnFile = await new File([xml], fileName, {type: 'text/xml'}); + const bpmnFile = await new File([xml], fileName, { type: 'text/xml' }); const link = document.createElement('a'); link.download = fileName; @@ -58,7 +59,7 @@ export async function saveModelerAsLocalFile(modeler, fileName = editorConfig.ge * @returns {Promise<*>} The xml diagram. */ export async function getXml(modeler) { - const {xml} = await modeler.saveXML({format: true}); + const { xml } = await modeler.saveXML({ format: true }); return xml; } @@ -83,7 +84,7 @@ export async function loadDiagram(xml, modeler, dispatchEvent = true) { } catch (err) { console.error(err); - return {error: err}; + return { error: err }; } } @@ -120,7 +121,7 @@ export async function deployWorkflowToCamunda(workflowName, workflowXml, viewMap } // add diagram to the body - const bpmnFile = new File([workflowXml], fileName, {type: 'text/xml'}); + const bpmnFile = new File([workflowXml], fileName, { type: 'text/xml' }); form.append('data', bpmnFile); // upload all provided views @@ -151,7 +152,7 @@ export async function deployWorkflowToCamunda(workflowName, workflowXml, viewMap // abort if there is not exactly one deployed process definition if (Object.values(result['deployedProcessDefinitions'] || {}).length !== 1) { console.error('Invalid size of deployed process definitions list: ' + Object.values(result['deployedProcessDefinitions'] || {}).length); - return {status: 'failed'}; + return { status: 'failed' }; } dispatchWorkflowEvent(workflowEventTypes.DEPLOYED, workflowXml, workflowName); @@ -162,11 +163,11 @@ export async function deployWorkflowToCamunda(workflowName, workflowXml, viewMap }; } else { console.error('Deployment of workflow returned invalid status code: %s', response.status); - return {status: 'failed'}; + return { status: 'failed' }; } } catch (error) { console.error('Error while executing post to deploy workflow: ' + error); - return {status: 'failed'}; + return { status: 'failed' }; } } @@ -215,6 +216,42 @@ export function openInNewTab(workflowXml, fileName) { newWindow.onload = function () { // Pass the XML string to the new window using postMessage - newWindow.postMessage({workflow: workflowXml, name: fileName}, window.location.href); + newWindow.postMessage({ workflow: workflowXml, name: fileName }, window.location.href); }; +} + + +export function resetAutosaveTimeout(autosaveTimeout, hasChanges, autoSaveFileOption = editorConfig.getAutoSaveFileOption()) { + clearTimeout(autosaveTimeout); + hasChanges = hasChanges; + + if (autoSaveFileOption === autoSaveFile.INTERVAL) { + autosaveTimeout = setTimeout(() => autosave(hasChanges), 30000); + } else { + const timestamp = getTimestamp(); + saveModelerAsLocalFile(getModeler(), `autosave_${timestamp}_${editorConfig.getFileName()}`) + } +} + +function autosave(hasChanges) { + if (hasChanges) { + // extract the xml and save it to a file + getModeler().saveXML({ format: true }, function (err, xml) { + if (!err) { + // Save the XML + console.log('Autosaved:', xml); + const timestamp = getTimestamp(); + saveXmlAsLocalFile(xml, `autosave_${timestamp}_${editorConfig.getFileName()}`) + } + }); + } + + // Reset the timer after the autosave is completed + resetAutosaveTimeout(); +} + +function getTimestamp() { + const date = new Date(); + const timestamp = date.toISOString().replace(/:/g, '-'); + return timestamp; } \ No newline at end of file diff --git a/components/bpmn-q/modeler-component/extensions/data-extension/rules/DataFlowRulesProvider.js b/components/bpmn-q/modeler-component/extensions/data-extension/rules/DataFlowRulesProvider.js index b01d2991..94c3cc17 100644 --- a/components/bpmn-q/modeler-component/extensions/data-extension/rules/DataFlowRulesProvider.js +++ b/components/bpmn-q/modeler-component/extensions/data-extension/rules/DataFlowRulesProvider.js @@ -5,6 +5,7 @@ import { } from 'bpmn-js/lib/features/modeling/util/ModelingUtil'; import * as consts from '../Constants'; import {isConnectedWith} from '../../../editor/util/ModellingUtilities'; +import { resetAutosaveTimeout } from '../../../editor/util/IoUtilities'; /** * Custom rules provider for the DataFlow elements. Extends the BpmnRules. @@ -17,6 +18,7 @@ export default class CustomRulesProvider extends BpmnRules { const canConnectDataExtension = this.canConnectDataExtension; const canConnect = this.canConnect.bind(this); const canCreate = this.canCreate.bind(this); + let autosaveTimeout = 0; /** * Fired during creation of a new connection (while you selected the target of a connection) @@ -56,6 +58,12 @@ export default class CustomRulesProvider extends BpmnRules { context.position ); }); + + eventBus.on("commandStack.changed", function() { + + // Reset the timeout on any change event + resetAutosaveTimeout(autosaveTimeout, true); + }); } /** From 2685b69322f866e302b3b1c252055ef18b3e198f Mon Sep 17 00:00:00 2001 From: LaviniaStiliadou Date: Wed, 31 May 2023 02:30:48 +0200 Subject: [PATCH 03/24] set interval size with environment variable --- .../bpmn-q/modeler-component/editor/plugin/PluginHandler.js | 5 ----- .../bpmn-q/modeler-component/editor/util/IoUtilities.js | 2 +- components/bpmn-q/webpack.config.js | 1 + 3 files changed, 2 insertions(+), 6 deletions(-) diff --git a/components/bpmn-q/modeler-component/editor/plugin/PluginHandler.js b/components/bpmn-q/modeler-component/editor/plugin/PluginHandler.js index f53b7077..34892a41 100644 --- a/components/bpmn-q/modeler-component/editor/plugin/PluginHandler.js +++ b/components/bpmn-q/modeler-component/editor/plugin/PluginHandler.js @@ -42,12 +42,9 @@ function getActivePlugins() { activePlugins = []; const loadPlugin = (plugin) => { - console.log('-------') - console.log(activePlugins) if (!activePlugins.includes(plugin.plugin)) { for (const dependency of plugin.dependencies) { const dependencyPlugin = PLUGINS.find((p) => p.plugin.name === dependency); - console.log(dependencyPlugin) if (dependencyPlugin && !activePlugins.includes(dependencyPlugin.plugin)) { activePlugins.push(dependencyPlugin.plugin); loadPlugin(dependencyPlugin); @@ -73,7 +70,6 @@ function getActivePlugins() { export function checkEnabledStatus(pluginName) { - console.log(pluginName) switch (pluginName) { case 'dataflow': return process.env.ENABLE_DATA_FLOW_PLUGIN; @@ -82,7 +78,6 @@ export function checkEnabledStatus(pluginName) { case 'qhana': return process.env.ENABLE_QHANA_PLUGIN; case 'quantme': - console.log(process.env.ENABLE_QUANTME_PLUGIN) return process.env.ENABLE_QUANTME_PLUGIN; } } diff --git a/components/bpmn-q/modeler-component/editor/util/IoUtilities.js b/components/bpmn-q/modeler-component/editor/util/IoUtilities.js index 1c42ad0e..0fb54ab2 100644 --- a/components/bpmn-q/modeler-component/editor/util/IoUtilities.js +++ b/components/bpmn-q/modeler-component/editor/util/IoUtilities.js @@ -226,7 +226,7 @@ export function resetAutosaveTimeout(autosaveTimeout, hasChanges, autoSaveFileOp hasChanges = hasChanges; if (autoSaveFileOption === autoSaveFile.INTERVAL) { - autosaveTimeout = setTimeout(() => autosave(hasChanges), 30000); + autosaveTimeout = setTimeout(() => autosave(hasChanges), process.env.INTERVAL); } else { const timestamp = getTimestamp(); saveModelerAsLocalFile(getModeler(), `autosave_${timestamp}_${editorConfig.getFileName()}`) diff --git a/components/bpmn-q/webpack.config.js b/components/bpmn-q/webpack.config.js index 20aee90c..4918264c 100644 --- a/components/bpmn-q/webpack.config.js +++ b/components/bpmn-q/webpack.config.js @@ -66,6 +66,7 @@ module.exports = { ENABLE_QHANA_PLUGIN: true, ENABLE_QUANTME_PLUGIN: true, GITHUB_TOKEN: '', + INTERVAL: 300000, OPENTOSCA_ENDPOINT: 'http://localhost:1337/csars', NISQ_ANALYZER_ENDPOINT: 'http://localhost:8098/nisq-analyzer', QISKIT_RUNTIME_HANDLER_ENDPOINT: 'http://localhost:8889', From 0a7282dd8add014754ed75bcac78a4ef8719cbb1 Mon Sep 17 00:00:00 2001 From: LaviniaStiliadou Date: Wed, 31 May 2023 09:47:16 +0200 Subject: [PATCH 04/24] restore transformation button --- .../extensions/quantme/QuantMEPlugin.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/components/bpmn-q/modeler-component/extensions/quantme/QuantMEPlugin.js b/components/bpmn-q/modeler-component/extensions/quantme/QuantMEPlugin.js index efdca096..180cc707 100644 --- a/components/bpmn-q/modeler-component/extensions/quantme/QuantMEPlugin.js +++ b/components/bpmn-q/modeler-component/extensions/quantme/QuantMEPlugin.js @@ -5,6 +5,7 @@ import QuantMETab from './configTabs/QuantMETab'; import quantMEStyles from './styling/quantme.css'; import QuantMEPluginButton from './ui/QuantMEPluginButton'; +import TransformationButton from "../../editor/ui/TransformationButton"; let quantMEModdleExtension = require('./resources/quantum4bpmn.json'); @@ -23,5 +24,18 @@ export default { name: 'quantme', extensionModule: QuantMEExtensionModule, moddleDescription: quantMEModdleExtension, - styling: [quantMEStyles] + styling: [quantMEStyles], + transformExtensionButton: { + + let currentQRMs = getQRMs(); + return await startQuantmeReplacementProcess(xml, currentQRMs, + { + nisqAnalyzerEndpoint: config.getNisqAnalyzerEndpoint(), + transformationFrameworkEndpoint: config.getTransformationFrameworkEndpoint(), + camundaEndpoint: camundaConfig.getCamundaEndpoint() + } + ); + } + }/> }; \ No newline at end of file From 7d05b06931a11e95a0f7ecd169d14bc61a5986c4 Mon Sep 17 00:00:00 2001 From: LaviniaStiliadou Date: Wed, 31 May 2023 09:55:17 +0200 Subject: [PATCH 05/24] add missing imports --- .../modeler-component/extensions/quantme/QuantMEPlugin.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/components/bpmn-q/modeler-component/extensions/quantme/QuantMEPlugin.js b/components/bpmn-q/modeler-component/extensions/quantme/QuantMEPlugin.js index 180cc707..6ad217c3 100644 --- a/components/bpmn-q/modeler-component/extensions/quantme/QuantMEPlugin.js +++ b/components/bpmn-q/modeler-component/extensions/quantme/QuantMEPlugin.js @@ -6,6 +6,10 @@ import QuantMETab from './configTabs/QuantMETab'; import quantMEStyles from './styling/quantme.css'; import QuantMEPluginButton from './ui/QuantMEPluginButton'; import TransformationButton from "../../editor/ui/TransformationButton"; +import {getQRMs} from "./qrm-manager"; +import {startQuantmeReplacementProcess} from "./replacement/QuantMETransformator"; +import * as config from "./framework-config/config-manager"; +import * as camundaConfig from "../../editor/config/EditorConfigManager"; let quantMEModdleExtension = require('./resources/quantum4bpmn.json'); From eefa1f922b64512f67ec867292d745016dd96457 Mon Sep 17 00:00:00 2001 From: LaviniaStiliadou Date: Thu, 1 Jun 2023 01:25:17 +0200 Subject: [PATCH 06/24] adapt test --- .../bpmn-q/modeler-component/editor/plugin/PluginHandler.js | 2 +- components/bpmn-q/test/tests/editor/plugin.spec.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/bpmn-q/modeler-component/editor/plugin/PluginHandler.js b/components/bpmn-q/modeler-component/editor/plugin/PluginHandler.js index 34892a41..5b50b865 100644 --- a/components/bpmn-q/modeler-component/editor/plugin/PluginHandler.js +++ b/components/bpmn-q/modeler-component/editor/plugin/PluginHandler.js @@ -35,7 +35,7 @@ const PLUGINS = [ // list of currently active plugins in the current running instance of the modeler, defined based on the plugin configuration let activePlugins = []; -function getActivePlugins() { +export function getActivePlugins() { if (activePlugins.length > 0) { return activePlugins; } else { diff --git a/components/bpmn-q/test/tests/editor/plugin.spec.js b/components/bpmn-q/test/tests/editor/plugin.spec.js index adf87c37..dfc50c1a 100644 --- a/components/bpmn-q/test/tests/editor/plugin.spec.js +++ b/components/bpmn-q/test/tests/editor/plugin.spec.js @@ -54,7 +54,7 @@ describe('Test plugins', function () { expect(extensions['planqk']).to.not.be.undefined; expect(transfButtons.length).to.equal(3); expect(buttons.length).to.equal(2); - expect(tabs.length).to.equal(8); + expect(tabs.length).to.equal(4); expect(styles.length).to.equal(3); }); }); From 3fbe17190b6008284ee283c8d73800bd5a6a6677 Mon Sep 17 00:00:00 2001 From: LaviniaStiliadou Date: Mon, 19 Jun 2023 14:02:57 +0200 Subject: [PATCH 07/24] add doc for plugin dependencies --- .../extensions/plugins.md | 56 +++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 doc/quantum-workflow-modeler/extensions/plugins.md diff --git a/doc/quantum-workflow-modeler/extensions/plugins.md b/doc/quantum-workflow-modeler/extensions/plugins.md new file mode 100644 index 00000000..63327785 --- /dev/null +++ b/doc/quantum-workflow-modeler/extensions/plugins.md @@ -0,0 +1,56 @@ +# Plugin Dependencies +Plugin dependencies are a way to establish relationships between different plugins. A plugin dependency indicates that one plugin relies on another plugin to function properly. By defining plugin dependencies, you ensure that the required plugins are loaded and available before using a particular plugin. + +To add plugin dependencies, you typically need to follow these steps: + +1. Identify the plugins: Determine which plugins in your system have dependencies. Identify the plugins that require other plugins to be present and functional. + +2. Define & update the dependencies: For each plugin with dependencies, specify the required plugins. This can be done by associating the dependent plugin with the required plugins. This can be done by adding the plugin id to the dependency attribute. + +The following code snippet demonstrates how to define plugin dependencies using an array of plugins. We specify that the `QuantMEPlugin` depends on the `QHAanaPlugin`. + +```javascript +const PLUGINS = [ + { + plugin: DataFlowPlugin, + dependencies: [] + }, + { + plugin: QHAnaPlugin, + dependencies: [] + }, + { + plugin: PlanQKPlugin, + dependencies: [] + }, + { + plugin: QuantMEPlugin, + dependencies: ['QHAnaPlugin'] + } +]; +``` + + +## Dependency resolution +The provided [code](../../../components/bpmn-q/modeler-component/editor/plugin/PluginHandler.js#L38) handles transitive dependencies by using a recursive approach to load plugins and their dependencies. +Here's a breakdown of how the code handles transitive dependencies: + +1. Check if active plugins have already been determined: The function first checks if the `activePlugins` array has already been populated. If it contains plugins, indicating that the active plugins have already been determined, the function simply returns the `activePlugins` array. + +2. Determine active plugins and their dependencies: If the `activePlugins` array is empty, the function proceeds to determine the active plugins and their dependencies. + +3. Recursive loading of plugins and dependencies: The `loadPlugin` function is defined as a recursive function that takes a plugin as an argument. It checks if the plugin is already included in the `activePlugins` array. If it is not, it iterates over the plugin's `dependencies` array. + +4. Recursive dependency resolution: For each dependency, the function finds the corresponding plugin object from the `PLUGINS` array based on the dependency's name. If the dependency plugin is found, the `loadPlugin` function is recursively called with the dependency plugin as the argument. This allows the function to resolve dependencies at multiple levels, handling transitive dependencies. + +5. Add plugin to activePlugins: After resolving all dependencies, the plugin object is added to the `activePlugins` array. + +6. Iterate over plugin configurations: The function then iterates over the plugin configurations obtained from `getAllConfigs()`. + +7. Find enabled plugins: For each plugin configuration, the function finds the corresponding plugin object from the `PLUGINS` array based on the plugin's name. It also checks if the plugin is enabled by calling the `checkEnabledStatus` function. + +8. Load plugins and dependencies: If a plugin object is found and it is enabled, the `loadPlugin` function is called with the plugin as the argument. This initiates the loading of the plugin and its dependencies. + +9. Return active plugins: Finally, the function returns the `activePlugins` array, which contains all the active plugins and their resolved dependencies. + +By recursively loading plugins and their dependencies, the code handles transitive dependencies, ensuring that all required plugins are loaded and added to the `activePlugins` array in the correct order. \ No newline at end of file From d01ef5440f4710a43aa204415867105d53a7517d Mon Sep 17 00:00:00 2001 From: SharonNaemi Date: Mon, 19 Jun 2023 14:30:32 +0200 Subject: [PATCH 08/24] add overview to env variables --- .../modeler-configuration.md | 52 +++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 doc/quantum-workflow-modeler/modeler-configuration.md diff --git a/doc/quantum-workflow-modeler/modeler-configuration.md b/doc/quantum-workflow-modeler/modeler-configuration.md new file mode 100644 index 00000000..38f375b6 --- /dev/null +++ b/doc/quantum-workflow-modeler/modeler-configuration.md @@ -0,0 +1,52 @@ +# Environment Variables + +In the following, all environment variables that can be used to customize the workflow modeler are summarized. + +### Overview + +* ```AWS_RUNTIME_HANDLER_ENDPOINT``` (default 'http://localhost:8890'): Defines the endpoint of the [Amazon Braket Hybrid Jobs Handler](https://github.com/UST-QuAntiL/amazon-braket-hybrid-jobs-handler) which enables the automatic generation of hybrid programs from Amazon Braket programs. + +* ```CAMUNDA_ENDPOINT``` (default: 'http://localhost:8080/engine-rest'): Defines the endpoint of the Camunda engine to deploy workflows to. + +* ```DATA_CONFIG``` (default: 'http://localhost:8100/data-objects'): Defines the configuration of data objects. + +* ```ENABLE_DATA_FLOW_PLUGIN``` (default: 'true'): Defines if the Data Flow plugin is enabled. + +* ```ENABLE_PLANQK_PLUGIN``` (default: 'true'): Defines if the PlanQK plugin is enabled. + +* ```ENABLE_QHANA_PLUGIN``` (default: 'true'): Defines if the QHAna plugin is enabled. + +* ```ENABLE_QUANTME_PLUGIN``` (default: 'true'): Defines if the QuantME plugin is enabled. + +* ```GITHUB_TOKEN``` (default: ''): Defines the GitHub Token which can be used to make authorized requests. For more information take a look at [GitHub Token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token). + +* ```NISQ_ANALYZER_ENDPOINT``` (default: 'http://localhost:8098/nisq-analyzer'): Defines the endpoint of the [NISQ Analyzer](https://github.com/UST-QuAntiL/nisq-analyzer) to enable an automated hardware selection. + +* ```OPENTOSCA_ENDPOINT``` (default: 'http://localhost:1337/csars'): Defines the endpoint of the OpenTOSCA container to deploy services with. + +* ```QISKIT_RUNTIME_HANDLER_ENDPOINT``` (default: 'http://localhost:8889'): Defines the endpoint of the [Qiskit Runtime Handler](https://github.com/UST-QuAntiL/qiskit-runtime-handler) which enables the automatic generation of hybrid programs from Qiskit programs. + +* ```QHANA_GET_PLUGIN_URL``` (default: 'http://localhost:5006/api/plugins/'): Defines the plugin url for QHAna. + +* ```QHANA_LIST_PLUGINS_URL``` (default: 'http://localhost:5006/api/plugins/?item-count=100'): Defines the plugin list url for QHAna. + +* ```QRM_USERNAME``` (default: ' '): Defines the Github username to access the [QRM-Repository](../QRM-Repository) + +* ```QRM_REPONAME``` (default: ' '): Defines the Github repository name to access the [QRM-Repository](../QRM-Repository) + +* ```QRM_REPOPATH``` (default: ' '): Defines the local path in the Github repository to the folder containing the [QRM-Repository](../QRM-Repository). This parameter is optional and if it is not set, the root folder of the repository is used. + +* ```SERVICE_DATA_CONFIG``` (default: 'http://localhost:8000/service-task'): Defines the configuration for the service task. + +* ```SCRIPT_SPLITTER_EDNPOINT``` (default: 'http://localhost:8891'): Defines the endpoint of the Script Splitter. + +* ```SCRIPT_SPLITTER_THRESHOLD``` (default: '5'): Defines the splitting threshold for the Script Splitter. + +* ```TRANSFORMATION_FRAMEWORK_ENDPOINT``` (default: 'http://localhost:8888'): Defines the endpoint of the QuantME Transformation Framework to use for the automated hardware selection. + +* ```WINERY_ENDPOINT``` (default: 'http://localhost:8081/winery'): Defines the endpoint of the Winery to retrieve deployment models for services from. + +* ```PROVENANCE_COLLECTION``` (default: 'false'): Defines if the intermediate results of the workflow executed should be collected. + + +The value of an environment variable is accessed using `process.env.ENV_NAME`. If you want to add a new environment variable, add it to the [webpack.config](../../../../../components/bpmn-q/webpack.config.js) file and restart the application. \ No newline at end of file From fd566e4460e3b1160f5dc1f04a48ebde5a87cab4 Mon Sep 17 00:00:00 2001 From: LaviniaStiliadou Date: Mon, 19 Jun 2023 14:43:43 +0200 Subject: [PATCH 09/24] add doc for auto save --- doc/quantum-workflow-modeler/modeler-configuration.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/doc/quantum-workflow-modeler/modeler-configuration.md b/doc/quantum-workflow-modeler/modeler-configuration.md index 38f375b6..8f4cba8b 100644 --- a/doc/quantum-workflow-modeler/modeler-configuration.md +++ b/doc/quantum-workflow-modeler/modeler-configuration.md @@ -20,6 +20,8 @@ In the following, all environment variables that can be used to customize the wo * ```GITHUB_TOKEN``` (default: ''): Defines the GitHub Token which can be used to make authorized requests. For more information take a look at [GitHub Token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token). +* ```INTERVAL``` (default ms: '300000'): Defines the interval of the auto save feature. If changes are applied to the workflow then it get saved after `5` minutes. + * ```NISQ_ANALYZER_ENDPOINT``` (default: 'http://localhost:8098/nisq-analyzer'): Defines the endpoint of the [NISQ Analyzer](https://github.com/UST-QuAntiL/nisq-analyzer) to enable an automated hardware selection. * ```OPENTOSCA_ENDPOINT``` (default: 'http://localhost:1337/csars'): Defines the endpoint of the OpenTOSCA container to deploy services with. From a95cc4ed79414573c3e31c830f29e5b35914f360 Mon Sep 17 00:00:00 2001 From: LaviniaStiliadou Date: Tue, 20 Jun 2023 16:40:14 +0200 Subject: [PATCH 10/24] fix test --- components/bpmn-q/test/tests/editor/plugin.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/bpmn-q/test/tests/editor/plugin.spec.js b/components/bpmn-q/test/tests/editor/plugin.spec.js index dfc50c1a..7f9dc6b0 100644 --- a/components/bpmn-q/test/tests/editor/plugin.spec.js +++ b/components/bpmn-q/test/tests/editor/plugin.spec.js @@ -54,7 +54,7 @@ describe('Test plugins', function () { expect(extensions['planqk']).to.not.be.undefined; expect(transfButtons.length).to.equal(3); expect(buttons.length).to.equal(2); - expect(tabs.length).to.equal(4); + expect(tabs.length).to.equal(5); expect(styles.length).to.equal(3); }); }); From d66811c6dd88b25f98decf7230e8aa7069f1f6d4 Mon Sep 17 00:00:00 2001 From: LaviniaStiliadou Date: Tue, 20 Jun 2023 17:05:48 +0200 Subject: [PATCH 11/24] integrate upload into github tab --- .../extensions/quantme/QuantMEPlugin.js | 6 - .../quantme/configTabs/GitHubTab.js | 94 +++++++++++++ .../quantme/configTabs/UploadTab.js | 123 ------------------ .../bpmn-q/test/tests/editor/plugin.spec.js | 2 +- 4 files changed, 95 insertions(+), 130 deletions(-) delete mode 100644 components/bpmn-q/modeler-component/extensions/quantme/configTabs/UploadTab.js diff --git a/components/bpmn-q/modeler-component/extensions/quantme/QuantMEPlugin.js b/components/bpmn-q/modeler-component/extensions/quantme/QuantMEPlugin.js index d4135963..f1574810 100644 --- a/components/bpmn-q/modeler-component/extensions/quantme/QuantMEPlugin.js +++ b/components/bpmn-q/modeler-component/extensions/quantme/QuantMEPlugin.js @@ -2,7 +2,6 @@ import React from 'react'; import QuantMEExtensionModule from './modeling'; import QuantMETab from './configTabs/QuantMETab'; -import UploadTab from './configTabs/UploadTab'; import {getQRMs} from './qrm-manager'; import {startQuantmeReplacementProcess} from './replacement/QuantMETransformator'; import * as camundaConfig from '../../editor/config/EditorConfigManager'; @@ -23,11 +22,6 @@ export default { tabId: 'BPMNTab', tabTitle: 'QuantME Plugin', configTab: QuantMETab, - }, - { - tabId: 'UploadTab', - tabTitle: 'Upload data', - configTab: UploadTab } ], name: 'quantme', diff --git a/components/bpmn-q/modeler-component/extensions/quantme/configTabs/GitHubTab.js b/components/bpmn-q/modeler-component/extensions/quantme/configTabs/GitHubTab.js index 6a2b7068..bd5cbe8b 100644 --- a/components/bpmn-q/modeler-component/extensions/quantme/configTabs/GitHubTab.js +++ b/components/bpmn-q/modeler-component/extensions/quantme/configTabs/GitHubTab.js @@ -15,6 +15,10 @@ export default function QrmDataTab() { const [githubUsername, setGithubUsername] = useState(config.getQRMRepositoryUserName()); const [githubRepositoryPath, setGithubRepositoryPath] = useState(config.getQRMRepositoryPath()); const [githubToken, setGitHubToken] = useState(config.getGitHubToken()); + const [uploadGithubRepositoryName, setUploadGithubRepositoryName] = useState(config.getUploadGithubRepositoryName()); + const [uploadGithubOwner, setUploadGithubOwner] = useState(config.getUploadGithubRepositoryOwner()); + const [uploadFileName, setUploadFileName] = useState(config.getUploadFileName()); + const [uploadBranchName, setUploadBranchName] = useState(config.getUploadBranchName()); const modeler = getModeler(); const editorActions = modeler.get('editorActions'); @@ -49,12 +53,52 @@ export default function QrmDataTab() { }); } + if (!editorActions._actions.hasOwnProperty('uploadGithubRepositoryNameChanged')) { + editorActions.register({ + uploadGithubRepositoryNameChanged: function (uploadGithubRepositoryName) { + self.modeler.config.uploadGithubRepositoryName = uploadGithubRepositoryName; + } + }); + } + if (!editorActions._actions.hasOwnProperty('uploadGithubRepositoryOwnerChanged')) { + editorActions.register({ + uploadGithubRepositoryOwnerChanged: function (uploadGithubRepositoryOwner) { + self.modeler.config.uploadGithubRepositoryOwner = uploadGithubRepositoryOwner; + } + }); + } + if (!editorActions._actions.hasOwnProperty('uploadFileNameChanged')) { + editorActions.register({ + uploadFileNameChanged: function (uploadFileName) { + self.modeler.config.uploadFileName = uploadFileName; + } + }); + } + + if (!editorActions._actions.hasOwnProperty('uploadBranchNameChanged')) { + editorActions.register({ + uploadBranchNameChanged: function (uploadBranchName) { + self.modeler.config.uploadBranchName = uploadBranchName; + } + }); + } + + // save changed config entries on close QrmDataTab.prototype.onClose = () => { modeler.config.githubRepositoryName = githubRepositoryName; modeler.config.githubUsername = githubUsername; modeler.config.githubRepositoryPath = githubRepositoryPath; modeler.config.githubToken = githubToken; + modeler.config.uploadGithubRepositoryName = uploadGithubRepositoryName; + modeler.config.uploadGithubRepositoryOwner = uploadGithubOwner; + modeler.config.uploadFileName = uploadFileName; + modeler.config.uploadBranchName = uploadBranchName; + + config.setUploadGithubRepositoryName(uploadGithubRepositoryName); + config.setUploadGithubRepositoryOwner(uploadGithubOwner); + config.setUploadFileName(uploadFileName); + config.setUploadBranchName(uploadBranchName); config.setQRMRepositoryName(githubRepositoryName); config.setQRMUserName(githubUsername); config.setQRMRepositoryPath(githubRepositoryPath); @@ -112,6 +156,51 @@ export default function QrmDataTab() { +

Upload Data

+ + + + + + + + + + + + + + + + + + + +
GitHub Repository Owner: + setUploadGithubOwner(event.target.value)}/> +
GitHub Repository Name: + setUploadGithubRepositoryName(event.target.value)}/> +
GitHub Repository Branch: + setUploadBranchName(event.target.value)}/> +
Workflow File Name: + setUploadFileName(event.target.value)}/> +
; } @@ -122,5 +211,10 @@ QrmDataTab.prototype.config = () => { modeler.config.githubUsername = config.getQRMRepositoryUserName(); modeler.config.githubRepositoryPath = config.getQRMRepositoryPath(); modeler.config.githubToken = config.getGitHubToken(); + + modeler.config.uploadGithubRepositoryName = config.getUploadGithubRepositoryName(); + modeler.config.uploadGithubRepositoryOwner = config.getUploadGithubRepositoryOwner(); + modeler.config.uploadFileName = config.getUploadFileName(); + modeler.config.uploadBranchName = config.getUploadBranchName(); }; \ No newline at end of file diff --git a/components/bpmn-q/modeler-component/extensions/quantme/configTabs/UploadTab.js b/components/bpmn-q/modeler-component/extensions/quantme/configTabs/UploadTab.js deleted file mode 100644 index 66624d03..00000000 --- a/components/bpmn-q/modeler-component/extensions/quantme/configTabs/UploadTab.js +++ /dev/null @@ -1,123 +0,0 @@ -import React, {useState} from 'react'; -import {getModeler} from "../../../editor/ModelerHandler"; -import * as config from "../framework-config/config-manager"; - -/** - * React component specifying a tab for the configuration dialog of the modeler. The tab allows the user to change the - * QRM data. - * - * @return {JSX.Element} The tab as a React component - * @constructor - */ -export default function UploadTab() { - - const [uploadGithubRepositoryName, setUploadGithubRepositoryName] = useState(config.getUploadGithubRepositoryName()); - const [uploadGithubOwner, setUploadGithubOwner] = useState(config.getUploadGithubRepositoryOwner()); - const [uploadFileName, setUploadFileName] = useState(config.getUploadFileName()); - const [uploadBranchName, setUploadBranchName] = useState(config.getUploadBranchName()); - const modeler = getModeler(); - - const editorActions = modeler.get('editorActions'); - - // register editor action listener for changes in config entries - if (!editorActions._actions.hasOwnProperty('uploadGithubRepositoryNameChanged')) { - editorActions.register({ - uploadGithubRepositoryNameChanged: function (uploadGithubRepositoryName) { - self.modeler.config.uploadGithubRepositoryName = uploadGithubRepositoryName; - } - }); - } - if (!editorActions._actions.hasOwnProperty('uploadGithubRepositoryOwnerChanged')) { - editorActions.register({ - uploadGithubRepositoryOwnerChanged: function (uploadGithubRepositoryOwner) { - self.modeler.config.uploadGithubRepositoryOwner = uploadGithubRepositoryOwner; - } - }); - } - if (!editorActions._actions.hasOwnProperty('uploadFileNameChanged')) { - editorActions.register({ - uploadFileNameChanged: function (uploadFileName) { - self.modeler.config.uploadFileName = uploadFileName; - } - }); - } - - if (!editorActions._actions.hasOwnProperty('uploadBranchNameChanged')) { - editorActions.register({ - uploadBranchNameChanged: function (uploadBranchName) { - self.modeler.config.uploadBranchName = uploadBranchName; - } - }); - } - - // save changed config entries on close - UploadTab.prototype.onClose = () => { - modeler.config.uploadGithubRepositoryName = uploadGithubRepositoryName; - modeler.config.uploadGithubRepositoryOwner = uploadGithubOwner; - modeler.config.uploadFileName = uploadFileName; - modeler.config.uploadBranchName = uploadBranchName; - - config.setUploadGithubRepositoryName(uploadGithubRepositoryName); - config.setUploadGithubRepositoryOwner(uploadGithubOwner); - config.setUploadFileName(uploadFileName); - config.setUploadBranchName(uploadBranchName); - - }; - - return <> -

Upload Data

- - - - - - - - - - - - - - - - - - - -
GitHub Repository Owner: - setUploadGithubOwner(event.target.value)}/> -
GitHub Repository Name: - setUploadGithubRepositoryName(event.target.value)}/> -
GitHub Repository Branch: - setUploadBranchName(event.target.value)}/> -
Workflow File Name: - setUploadFileName(event.target.value)}/> -
- ; -} - -UploadTab.prototype.config = () => { - const modeler = getModeler(); - - modeler.config.uploadGithubRepositoryName = config.getUploadGithubRepositoryName(); - modeler.config.uploadGithubRepositoryOwner = config.getUploadGithubRepositoryOwner(); - modeler.config.uploadFileName = config.getUploadFileName(); - modeler.config.uploadBranchName = config.getUploadBranchName(); -}; \ No newline at end of file diff --git a/components/bpmn-q/test/tests/editor/plugin.spec.js b/components/bpmn-q/test/tests/editor/plugin.spec.js index 7f9dc6b0..dfc50c1a 100644 --- a/components/bpmn-q/test/tests/editor/plugin.spec.js +++ b/components/bpmn-q/test/tests/editor/plugin.spec.js @@ -54,7 +54,7 @@ describe('Test plugins', function () { expect(extensions['planqk']).to.not.be.undefined; expect(transfButtons.length).to.equal(3); expect(buttons.length).to.equal(2); - expect(tabs.length).to.equal(5); + expect(tabs.length).to.equal(4); expect(styles.length).to.equal(3); }); }); From 2e3d210cfe72cb8211a1d1a09271652a7d4c9948 Mon Sep 17 00:00:00 2001 From: Benjamin Weder Date: Fri, 21 Jul 2023 13:41:33 +0200 Subject: [PATCH 12/24] Small fixes --- .../bpmn-q/modeler-component/editor/util/IoUtilities.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/components/bpmn-q/modeler-component/editor/util/IoUtilities.js b/components/bpmn-q/modeler-component/editor/util/IoUtilities.js index 3f2ef004..6bcbf24d 100644 --- a/components/bpmn-q/modeler-component/editor/util/IoUtilities.js +++ b/components/bpmn-q/modeler-component/editor/util/IoUtilities.js @@ -237,13 +237,11 @@ export function openInNewTab(workflowXml, fileName) { export function resetAutosaveTimeout(autosaveTimeout, hasChanges, autoSaveFileOption = editorConfig.getAutoSaveFileOption()) { clearTimeout(autosaveTimeout); - hasChanges = hasChanges; if (autoSaveFileOption === autoSaveFile.INTERVAL) { - autosaveTimeout = setTimeout(() => autosave(hasChanges), process.env.INTERVAL); + setTimeout(() => autosave(hasChanges), process.env.INTERVAL); } else { const timestamp = getTimestamp(); - console.log("los") saveModelerAsLocalFile(getModeler(), `autosave_${timestamp}_${editorConfig.getFileName()}`, saveFileFormats.BPMN, false); } } From dd2c3a6649ff771569d9c748f06347a66c053ddc Mon Sep 17 00:00:00 2001 From: Benjamin Weder Date: Fri, 21 Jul 2023 13:52:44 +0200 Subject: [PATCH 13/24] Remove redundant declaration --- .../modeler-component/editor/util/IoUtilities.js | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/components/bpmn-q/modeler-component/editor/util/IoUtilities.js b/components/bpmn-q/modeler-component/editor/util/IoUtilities.js index 6bcbf24d..16fcbaf4 100644 --- a/components/bpmn-q/modeler-component/editor/util/IoUtilities.js +++ b/components/bpmn-q/modeler-component/editor/util/IoUtilities.js @@ -1,11 +1,11 @@ -import { autoSaveFile, transformedWorkflowHandlers, workflowEventTypes, saveFileFormats } from '../EditorConstants'; -import { getModeler } from '../ModelerHandler'; -import { dispatchWorkflowEvent } from '../events/EditorEventHandler'; +import { autoSaveFile, saveFileFormats, transformedWorkflowHandlers, workflowEventTypes } from "../EditorConstants"; +import { getModeler } from "../ModelerHandler"; +import { dispatchWorkflowEvent } from "../events/EditorEventHandler"; +import fetch from "node-fetch"; const editorConfig = require('../config/EditorConfigManager'); let FormData = require('form-data'); -import fetch from 'node-fetch'; // workflow with a start event to use as template for new workflows const NEW_DIAGRAM_XML = '\n' + @@ -53,16 +53,13 @@ export async function saveModelerAsLocalFile(modeler, fileName = editorConfig.ge if (openWindow) { await openFileDialog(xml, fileName, saveFileFormats.BPMN); } else { - console.log("hir") - saveXmlAsLocalFile(xml, fileName) + await saveXmlAsLocalFile(xml, fileName); } } if (fileFormat === saveFileFormats.ALL || fileFormat === saveFileFormats.SVG || fileFormat === saveFileFormats.PNG) { await saveWorkflowAsSVG(modeler, fileName, fileFormat); } - - return; } /** @@ -265,8 +262,7 @@ function autosave(hasChanges) { function getTimestamp() { const date = new Date(); - const timestamp = date.toISOString().replace(/:/g, '-'); - return timestamp; + return date.toISOString().replace(/:/g, '-'); } export async function saveWorkflowAsSVG(modeler, fileName, fileFormat) { From 9739ce209e81032070b457df0bc85789786f2713 Mon Sep 17 00:00:00 2001 From: Benjamin Weder Date: Fri, 21 Jul 2023 14:07:36 +0200 Subject: [PATCH 14/24] Small readme fixes --- doc/quantum-workflow-modeler/extensions/plugins.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/doc/quantum-workflow-modeler/extensions/plugins.md b/doc/quantum-workflow-modeler/extensions/plugins.md index 63327785..df0b1174 100644 --- a/doc/quantum-workflow-modeler/extensions/plugins.md +++ b/doc/quantum-workflow-modeler/extensions/plugins.md @@ -1,13 +1,15 @@ # Plugin Dependencies -Plugin dependencies are a way to establish relationships between different plugins. A plugin dependency indicates that one plugin relies on another plugin to function properly. By defining plugin dependencies, you ensure that the required plugins are loaded and available before using a particular plugin. +Plugin dependencies are a way to establish relationships between different plugins. +A plugin dependency indicates that one plugin relies on another plugin to function properly. By defining plugin dependencies, you ensure that the required plugins are loaded and available before using a particular plugin. To add plugin dependencies, you typically need to follow these steps: 1. Identify the plugins: Determine which plugins in your system have dependencies. Identify the plugins that require other plugins to be present and functional. -2. Define & update the dependencies: For each plugin with dependencies, specify the required plugins. This can be done by associating the dependent plugin with the required plugins. This can be done by adding the plugin id to the dependency attribute. +2. Define & update the dependencies: For each plugin with dependencies, specify the required plugins. This can be done by associating the dependent plugin with the required plugins, i.e., by adding the plugin id to the dependency attribute. -The following code snippet demonstrates how to define plugin dependencies using an array of plugins. We specify that the `QuantMEPlugin` depends on the `QHAanaPlugin`. +The following code snippet demonstrates how to define plugin dependencies using an array of plugins. +Exemplarily, we specify that the `QuantMEPlugin` depends on the `QHAanaPlugin`. ```javascript const PLUGINS = [ @@ -33,7 +35,7 @@ const PLUGINS = [ ## Dependency resolution The provided [code](../../../components/bpmn-q/modeler-component/editor/plugin/PluginHandler.js#L38) handles transitive dependencies by using a recursive approach to load plugins and their dependencies. -Here's a breakdown of how the code handles transitive dependencies: +Here is a breakdown of how the code handles transitive dependencies: 1. Check if active plugins have already been determined: The function first checks if the `activePlugins` array has already been populated. If it contains plugins, indicating that the active plugins have already been determined, the function simply returns the `activePlugins` array. @@ -49,7 +51,7 @@ Here's a breakdown of how the code handles transitive dependencies: 7. Find enabled plugins: For each plugin configuration, the function finds the corresponding plugin object from the `PLUGINS` array based on the plugin's name. It also checks if the plugin is enabled by calling the `checkEnabledStatus` function. -8. Load plugins and dependencies: If a plugin object is found and it is enabled, the `loadPlugin` function is called with the plugin as the argument. This initiates the loading of the plugin and its dependencies. +8. Load plugins and dependencies: If a plugin object is found, and it is enabled, the `loadPlugin` function is called with the plugin as the argument. This initiates the loading of the plugin and its dependencies. 9. Return active plugins: Finally, the function returns the `activePlugins` array, which contains all the active plugins and their resolved dependencies. From 47538ab92141fc3aac31044907aa163ba20f9790 Mon Sep 17 00:00:00 2001 From: Benjamin Weder Date: Fri, 21 Jul 2023 15:06:38 +0200 Subject: [PATCH 15/24] Rename timeout interval environment variable --- .../bpmn-q/modeler-component/editor/util/IoUtilities.js | 4 ++-- components/bpmn-q/webpack.config.js | 9 +++------ doc/quantum-workflow-modeler/extensions/plugins.md | 1 - doc/quantum-workflow-modeler/modeler-configuration.md | 9 ++++----- 4 files changed, 9 insertions(+), 14 deletions(-) diff --git a/components/bpmn-q/modeler-component/editor/util/IoUtilities.js b/components/bpmn-q/modeler-component/editor/util/IoUtilities.js index 16fcbaf4..35a90d86 100644 --- a/components/bpmn-q/modeler-component/editor/util/IoUtilities.js +++ b/components/bpmn-q/modeler-component/editor/util/IoUtilities.js @@ -236,7 +236,7 @@ export function resetAutosaveTimeout(autosaveTimeout, hasChanges, autoSaveFileOp clearTimeout(autosaveTimeout); if (autoSaveFileOption === autoSaveFile.INTERVAL) { - setTimeout(() => autosave(hasChanges), process.env.INTERVAL); + setTimeout(() => autosave(hasChanges), process.env.AUTOSAVE_INTERVAL); } else { const timestamp = getTimestamp(); saveModelerAsLocalFile(getModeler(), `autosave_${timestamp}_${editorConfig.getFileName()}`, saveFileFormats.BPMN, false); @@ -251,7 +251,7 @@ function autosave(hasChanges) { // Save the XML console.log('Autosaved:', xml); const timestamp = getTimestamp(); - saveXmlAsLocalFile(xml, `autosave_${timestamp}_${editorConfig.getFileName()}`) + saveXmlAsLocalFile(xml, `autosave_${timestamp}_${editorConfig.getFileName()}`); } }); } diff --git a/components/bpmn-q/webpack.config.js b/components/bpmn-q/webpack.config.js index 002e5368..d4037330 100644 --- a/components/bpmn-q/webpack.config.js +++ b/components/bpmn-q/webpack.config.js @@ -62,25 +62,22 @@ module.exports = { }), // use the default values if environment variable does not exist new webpack.EnvironmentPlugin({ + AUTOSAVE_INTERVAL: 300000, AWS_RUNTIME_HANDLER_ENDPOINT: 'http://localhost:8890', CAMUNDA_ENDPOINT: 'http://localhost:8080/engine-rest', DATA_CONFIG: 'http://localhost:8100/data-objects', - GITHUB_TOKEN: '', - NISQ_ANALYZER_ENDPOINT: 'http://localhost:8098/nisq-analyzer', - OPENTOSCA_ENDPOINT: 'http://localhost:1337/csars', - PROVENANCE_COLLECTION: false, DOWNLOAD_FILE_NAME: 'quantum-workflow-model', ENABLE_DATA_FLOW_PLUGIN: true, ENABLE_PLANQK_PLUGIN: true, ENABLE_QHANA_PLUGIN: true, ENABLE_QUANTME_PLUGIN: true, GITHUB_TOKEN: '', - INTERVAL: 300000, OPENTOSCA_ENDPOINT: 'http://localhost:1337/csars', NISQ_ANALYZER_ENDPOINT: 'http://localhost:8098/nisq-analyzer', - QISKIT_RUNTIME_HANDLER_ENDPOINT: 'http://localhost:8889', + PROVENANCE_COLLECTION: false, QHANA_GET_PLUGIN_URL: 'http://localhost:5006/api/plugins/', QHANA_LIST_PLUGINS_URL: 'http://localhost:5006/api/plugins/?item-count=100', + QISKIT_RUNTIME_HANDLER_ENDPOINT: 'http://localhost:8889', QRM_USERNAME: '', QRM_REPONAME: '', QRM_REPOPATH: '', diff --git a/doc/quantum-workflow-modeler/extensions/plugins.md b/doc/quantum-workflow-modeler/extensions/plugins.md index df0b1174..bc9462c5 100644 --- a/doc/quantum-workflow-modeler/extensions/plugins.md +++ b/doc/quantum-workflow-modeler/extensions/plugins.md @@ -32,7 +32,6 @@ const PLUGINS = [ ]; ``` - ## Dependency resolution The provided [code](../../../components/bpmn-q/modeler-component/editor/plugin/PluginHandler.js#L38) handles transitive dependencies by using a recursive approach to load plugins and their dependencies. Here is a breakdown of how the code handles transitive dependencies: diff --git a/doc/quantum-workflow-modeler/modeler-configuration.md b/doc/quantum-workflow-modeler/modeler-configuration.md index 8f4cba8b..958eab5c 100644 --- a/doc/quantum-workflow-modeler/modeler-configuration.md +++ b/doc/quantum-workflow-modeler/modeler-configuration.md @@ -20,7 +20,7 @@ In the following, all environment variables that can be used to customize the wo * ```GITHUB_TOKEN``` (default: ''): Defines the GitHub Token which can be used to make authorized requests. For more information take a look at [GitHub Token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token). -* ```INTERVAL``` (default ms: '300000'): Defines the interval of the auto save feature. If changes are applied to the workflow then it get saved after `5` minutes. +* ```AUTOSAVE_INTERVAL``` (default ms: '300000'): Defines the interval of the auto save feature. If changes are applied to the workflow then it get saved after `5` minutes. * ```NISQ_ANALYZER_ENDPOINT``` (default: 'http://localhost:8098/nisq-analyzer'): Defines the endpoint of the [NISQ Analyzer](https://github.com/UST-QuAntiL/nisq-analyzer) to enable an automated hardware selection. @@ -32,11 +32,11 @@ In the following, all environment variables that can be used to customize the wo * ```QHANA_LIST_PLUGINS_URL``` (default: 'http://localhost:5006/api/plugins/?item-count=100'): Defines the plugin list url for QHAna. -* ```QRM_USERNAME``` (default: ' '): Defines the Github username to access the [QRM-Repository](../QRM-Repository) +* ```QRM_USERNAME``` (default: ' '): Defines the GitHub username to access the [QRM-Repository](../QRM-Repository) -* ```QRM_REPONAME``` (default: ' '): Defines the Github repository name to access the [QRM-Repository](../QRM-Repository) +* ```QRM_REPONAME``` (default: ' '): Defines the GitHub repository name to access the [QRM-Repository](../QRM-Repository) -* ```QRM_REPOPATH``` (default: ' '): Defines the local path in the Github repository to the folder containing the [QRM-Repository](../QRM-Repository). This parameter is optional and if it is not set, the root folder of the repository is used. +* ```QRM_REPOPATH``` (default: ' '): Defines the local path in the GitHub repository to the folder containing the [QRM-Repository](../QRM-Repository). This parameter is optional and if it is not set, the root folder of the repository is used. * ```SERVICE_DATA_CONFIG``` (default: 'http://localhost:8000/service-task'): Defines the configuration for the service task. @@ -50,5 +50,4 @@ In the following, all environment variables that can be used to customize the wo * ```PROVENANCE_COLLECTION``` (default: 'false'): Defines if the intermediate results of the workflow executed should be collected. - The value of an environment variable is accessed using `process.env.ENV_NAME`. If you want to add a new environment variable, add it to the [webpack.config](../../../../../components/bpmn-q/webpack.config.js) file and restart the application. \ No newline at end of file From b65624b53744fc9538d5215f9d2c986296a79697 Mon Sep 17 00:00:00 2001 From: Benjamin Weder Date: Tue, 25 Jul 2023 12:09:01 +0200 Subject: [PATCH 16/24] Refactor QuantMETab --- .../extensions/quantme/configTabs/QuantMETab.js | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/components/bpmn-q/modeler-component/extensions/quantme/configTabs/QuantMETab.js b/components/bpmn-q/modeler-component/extensions/quantme/configTabs/QuantMETab.js index 805db369..dbd5cc07 100644 --- a/components/bpmn-q/modeler-component/extensions/quantme/configTabs/QuantMETab.js +++ b/components/bpmn-q/modeler-component/extensions/quantme/configTabs/QuantMETab.js @@ -18,10 +18,11 @@ export default function BPMNConfigTab() { const [qiskitRuntimeHandlerEndpoint, setQiskitRuntimeHandlerEndpoint] = useState(config.getQiskitRuntimeHandlerEndpoint()); const [hybridRuntimeProvenance, setHybridRuntimeProvenance] = useState(config.getHybridRuntimeProvenance()); const [awsRuntimeHandlerEndpoint, setAWSRuntimeHandlerEndpoint] = useState(config.getAWSRuntimeHandlerEndpoint()); + const [transformationFrameworkEndpoint, setTransformationFrameworkEndpoint] = useState(config.getTransformationFrameworkEndpoint()); + const [scriptSplitterEndpoint, setScriptSplitterEndpoint] = useState(config.getScriptSplitterEndpoint()); + const [scriptSplitterThreshold, setScriptSplitterThreshold] = useState(config.getScriptSplitterThreshold()); let hybridRuntimeProvenanceBoolean = hybridRuntimeProvenance; - - const modeler = getModeler(); const editorActions = modeler.get('editorActions'); @@ -52,8 +53,6 @@ export default function BPMNConfigTab() { } }); } - - // register editor action listener for changes in config entries if (!editorActions._actions.hasOwnProperty('opentoscaEndpointChanged')) { editorActions.register({ opentoscaEndpointChanged: function (opentoscaEndpoint) { @@ -69,8 +68,6 @@ export default function BPMNConfigTab() { } }); } - - // register editor action listener for changes in config entries if (!editorActions._actions.hasOwnProperty('nisqAnalyzerEndpointChanged')) { editorActions.register({ nisqAnalyzerEndpointChanged: function (nisqAnalyzerEndpoint) { @@ -78,13 +75,6 @@ export default function BPMNConfigTab() { } }); } - - const [transformationFrameworkEndpoint, setTransformationFrameworkEndpoint] = useState(config.getTransformationFrameworkEndpoint()); - const [scriptSplitterEndpoint, setScriptSplitterEndpoint] = useState(config.getScriptSplitterEndpoint()); - const [scriptSplitterThreshold, setScriptSplitterThreshold] = useState(config.getScriptSplitterThreshold()); - - - // register editor action listener for changes in config entries if (!editorActions._actions.hasOwnProperty('transformationFrameworkEndpointChanged')) { editorActions.register({ transformationFrameworkEndpointChanged: function (transformationFrameworkEndpoint) { From 14fdb41360ce23dec25757be53d5ce2e0ee5bb8d Mon Sep 17 00:00:00 2001 From: Benjamin Weder Date: Tue, 25 Jul 2023 12:42:12 +0200 Subject: [PATCH 17/24] Remove deployment plugin --- .../extensions/deployment/QuantMEPlugin.js | 78 ------------------- 1 file changed, 78 deletions(-) delete mode 100644 components/bpmn-q/modeler-component/extensions/deployment/QuantMEPlugin.js diff --git a/components/bpmn-q/modeler-component/extensions/deployment/QuantMEPlugin.js b/components/bpmn-q/modeler-component/extensions/deployment/QuantMEPlugin.js deleted file mode 100644 index 1633064a..00000000 --- a/components/bpmn-q/modeler-component/extensions/deployment/QuantMEPlugin.js +++ /dev/null @@ -1,78 +0,0 @@ -import React from "react"; - -import QuantMEExtensionModule from "./modeling"; -import BPMNConfigTab from "./configTabs/BPMNConfigTab"; -import OpenToscaTab from "./configTabs/OpenToscaTab"; -import NisqAnalyzerTab from "./configTabs/NisqAnalyzerTab"; -import QrmDataTab from "./configTabs/QrmDataTab"; -import HybridRuntimeTab from "./configTabs/HybridRuntimeTab"; -import {getQRMs} from "./qrm-manager"; -import {startQuantmeReplacementProcess} from "./replacement/QuantMETransformator"; -import * as camundaConfig from "../../editor/config/EditorConfigManager"; -import * as config from "./framework-config/config-manager"; -import TransformationButton from "../../editor/ui/TransformationButton"; -import DataObjectConfigurationsTab from './configurations/DataObjectConfigurationsTab'; - -import quantMEStyles from './styling/quantme.css'; -import QuantMEPluginButton from "./ui/QuantMEPluginButton"; - -let quantMEModdleExtension = require('./resources/quantum4bpmn.json'); - -/** - * Plugin Object of the QuantME extension. Used to register the plugin in the plugin handler of the modeler. - */ -export default { - buttons: [], - configTabs: [ - /** - { - tabId: 'DataConfigurationEndpointTab', - tabTitle: 'QuantME Data', - configTab: DataObjectConfigurationsTab, - }, - { - tabId: 'OpenTOSCAEndpointTab', - tabTitle: 'OpenTOSCA', - configTab: OpenToscaTab, - },**/ - { - tabId: 'BPMNTab', - tabTitle: 'QuantME', - configTab: BPMNConfigTab, - } - /** - { - tabId: 'NISQAnalyzerEndpointTab', - tabTitle: 'NISQ Analyzer', - configTab: NisqAnalyzerTab, - }, - { - tabId: 'QRMDataTab', - tabTitle: 'QRM Data', - configTab: QrmDataTab, - }, - { - tabId: 'HybridRuntimesTab', - tabTitle: 'Hybrid Runtimes', - configTab: HybridRuntimeTab, - } - */ - ], - name: 'quantme', - extensionModule: QuantMEExtensionModule, - moddleDescription: quantMEModdleExtension, - styling: [quantMEStyles], - transformExtensionButton: { - - let currentQRMs = getQRMs(); - return await startQuantmeReplacementProcess(xml, currentQRMs, - { - nisqAnalyzerEndpoint: config.getNisqAnalyzerEndpoint(), - transformationFrameworkEndpoint: config.getTransformationFrameworkEndpoint(), - camundaEndpoint: camundaConfig.getCamundaEndpoint() - } - ); - } - }/>, -}; \ No newline at end of file From aaf489981e156cb5c85486ac538a35c9bd812ad0 Mon Sep 17 00:00:00 2001 From: Benjamin Weder Date: Tue, 25 Jul 2023 12:51:02 +0200 Subject: [PATCH 18/24] Rename QrmTab to GitHubTab --- .../modeler-component/editor/plugin/PluginHandler.js | 2 +- .../extensions/quantme/configTabs/GitHubTab.js | 8 +++----- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/components/bpmn-q/modeler-component/editor/plugin/PluginHandler.js b/components/bpmn-q/modeler-component/editor/plugin/PluginHandler.js index 5b50b865..cc1d95fd 100644 --- a/components/bpmn-q/modeler-component/editor/plugin/PluginHandler.js +++ b/components/bpmn-q/modeler-component/editor/plugin/PluginHandler.js @@ -198,7 +198,7 @@ export function getConfigTabs() { tabTitle: 'General', configTab: GeneralTab, }, { - tabId: 'QRMDataTab', + tabId: 'GitHubTab', tabTitle: 'GitHub', configTab: GitHubTab, }]; diff --git a/components/bpmn-q/modeler-component/extensions/quantme/configTabs/GitHubTab.js b/components/bpmn-q/modeler-component/extensions/quantme/configTabs/GitHubTab.js index bd5cbe8b..e99c95f8 100644 --- a/components/bpmn-q/modeler-component/extensions/quantme/configTabs/GitHubTab.js +++ b/components/bpmn-q/modeler-component/extensions/quantme/configTabs/GitHubTab.js @@ -9,7 +9,7 @@ import * as config from "../framework-config/config-manager"; * @return {JSX.Element} The tab as a React component * @constructor */ -export default function QrmDataTab() { +export default function GitHubTab() { const [githubRepositoryName, setGithubRepositoryName] = useState(config.getQRMRepositoryName()); const [githubUsername, setGithubUsername] = useState(config.getQRMRepositoryUserName()); @@ -83,9 +83,8 @@ export default function QrmDataTab() { }); } - // save changed config entries on close - QrmDataTab.prototype.onClose = () => { + GitHubTab.prototype.onClose = () => { modeler.config.githubRepositoryName = githubRepositoryName; modeler.config.githubUsername = githubUsername; modeler.config.githubRepositoryPath = githubRepositoryPath; @@ -204,7 +203,7 @@ export default function QrmDataTab() { ; } -QrmDataTab.prototype.config = () => { +GitHubTab.prototype.config = () => { const modeler = getModeler(); modeler.config.githubRepositoryName = config.getQRMRepositoryName(); @@ -216,5 +215,4 @@ QrmDataTab.prototype.config = () => { modeler.config.uploadGithubRepositoryOwner = config.getUploadGithubRepositoryOwner(); modeler.config.uploadFileName = config.getUploadFileName(); modeler.config.uploadBranchName = config.getUploadBranchName(); - }; \ No newline at end of file From 52e9bd41e7245e73e8cbd733d0139f8f0c97894b Mon Sep 17 00:00:00 2001 From: LaviniaStiliadou Date: Tue, 25 Jul 2023 14:38:25 +0200 Subject: [PATCH 19/24] enable config of auto save interval size --- .../editor/config/EditorConfigManager.js | 27 ++++++++++- .../editor/config/GeneralTab.js | 45 ++++++++++++------- .../editor/util/IoUtilities.js | 2 +- 3 files changed, 57 insertions(+), 17 deletions(-) diff --git a/components/bpmn-q/modeler-component/editor/config/EditorConfigManager.js b/components/bpmn-q/modeler-component/editor/config/EditorConfigManager.js index 2f31d19b..43b7baf2 100644 --- a/components/bpmn-q/modeler-component/editor/config/EditorConfigManager.js +++ b/components/bpmn-q/modeler-component/editor/config/EditorConfigManager.js @@ -7,7 +7,8 @@ const defaultConfig = { fileName: process.env.DOWNLOAD_FILE_NAME, transformedWorkflowHandler: transformedWorkflowHandlers.NEW_TAB, autoSaveFileOption: autoSaveFile.INTERVAL, - fileFormat: saveFileFormats.BPMN + fileFormat: saveFileFormats.BPMN, + autoSaveIntervalSize: process.env.AUTOSAVE_INTERVAL }; let config = {}; @@ -116,6 +117,7 @@ export function setAutoSaveFileOption(autoSaveFileOption) { config.autoSaveFileOption = autoSaveFileOption; } } + /** * Get the file format * @@ -143,6 +145,29 @@ export function setFileFormat(fileFormat) { } } +/** + * Get the autosave interval size + * + * @return {string} the current interval size + */ +export function getAutoSaveIntervalSize() { + if (config.autoSaveIntervalSize === undefined) { + setAutoSaveIntervalSize(getPluginConfig('editor').autoSaveIntervalSize || defaultConfig.autoSaveIntervalSize); + } + return config.autoSaveIntervalSize; +} + +/** + * Set the interval size of the autosave function + * + * @param intervalSize the interval size + */ +export function setAutoSaveIntervalSize(intervalSize) { + if (intervalSize !== null && intervalSize !== undefined) { + config.autoSaveIntervalSize = intervalSize; + } +} + /** * Resets the current editor configs */ diff --git a/components/bpmn-q/modeler-component/editor/config/GeneralTab.js b/components/bpmn-q/modeler-component/editor/config/GeneralTab.js index 06d964fe..b2e13ff5 100644 --- a/components/bpmn-q/modeler-component/editor/config/GeneralTab.js +++ b/components/bpmn-q/modeler-component/editor/config/GeneralTab.js @@ -17,6 +17,8 @@ export default function EditorTab() { const [autoSaveFileOption, setAutoSaveFileOption] = useState(editorConfig.getAutoSaveFileOption()); const [fileName, setFileName] = useState(editorConfig.getFileName()); const [fileFormat, setFileFormat] = useState(editorConfig.getFileFormat()); + const [autoSaveIntervalSize, setAutoSaveIntervalSize] = useState(editorConfig.getAutoSaveIntervalSize()); + const modeler = getModeler(); @@ -49,6 +51,7 @@ export default function EditorTab() { editorConfig.setAutoSaveFileOption(autoSaveFileOption); editorConfig.setFileName(fileName); editorConfig.setFileFormat(fileFormat); + editorConfig.setAutoSaveIntervalSize(autoSaveIntervalSize); }; // return tab which contains entries to change the camunda endpoint and the workflow handler @@ -123,21 +126,33 @@ export default function EditorTab() {

Auto save file:

- - - - + + + + + {autoSaveFileOption === autoSaveFile.INTERVAL && ( + + + + + )}
Auto save file option: - -
Auto save file option: + +
Auto save interval size: + setAutoSaveIntervalSize(event.target.value)} /> +
); diff --git a/components/bpmn-q/modeler-component/editor/util/IoUtilities.js b/components/bpmn-q/modeler-component/editor/util/IoUtilities.js index 35a90d86..abcfe116 100644 --- a/components/bpmn-q/modeler-component/editor/util/IoUtilities.js +++ b/components/bpmn-q/modeler-component/editor/util/IoUtilities.js @@ -236,7 +236,7 @@ export function resetAutosaveTimeout(autosaveTimeout, hasChanges, autoSaveFileOp clearTimeout(autosaveTimeout); if (autoSaveFileOption === autoSaveFile.INTERVAL) { - setTimeout(() => autosave(hasChanges), process.env.AUTOSAVE_INTERVAL); + setTimeout(() => autosave(hasChanges), editorConfig.getAutoSaveIntervalSize()); } else { const timestamp = getTimestamp(); saveModelerAsLocalFile(getModeler(), `autosave_${timestamp}_${editorConfig.getFileName()}`, saveFileFormats.BPMN, false); From 5aeb69f49e452f37242f397971eec9ee1dfb8232 Mon Sep 17 00:00:00 2001 From: LaviniaStiliadou Date: Wed, 26 Jul 2023 02:44:24 +0200 Subject: [PATCH 20/24] fix interval implementation --- .../QuantumWorkflowModeler.js | 3 +- .../editor/config/GeneralTab.js | 1 + .../editor/util/IoUtilities.js | 34 +++++++------------ .../rules/DataFlowRulesProvider.js | 23 +++++++++---- 4 files changed, 33 insertions(+), 28 deletions(-) diff --git a/components/bpmn-q/modeler-component/QuantumWorkflowModeler.js b/components/bpmn-q/modeler-component/QuantumWorkflowModeler.js index ce9da905..26908445 100644 --- a/components/bpmn-q/modeler-component/QuantumWorkflowModeler.js +++ b/components/bpmn-q/modeler-component/QuantumWorkflowModeler.js @@ -12,7 +12,7 @@ import './modeler.css'; import React from 'react'; import { createRoot } from 'react-dom/client'; import ButtonToolbar from "./editor/ui/ButtonToolbar"; -import { createNewDiagram, loadDiagram } from "./editor/util/IoUtilities"; +import { createNewDiagram, loadDiagram, setAutoSaveInterval } from "./editor/util/IoUtilities"; import NotificationHandler from "./editor/ui/notifications/NotificationHandler"; import { createModeler, getModeler } from "./editor/ModelerHandler"; import { getPluginButtons, getTransformationButtons } from "./editor/plugin/PluginHandler"; @@ -335,6 +335,7 @@ export class QuantumWorkflowModeler extends HTMLElement { // restart modeler to apply plugin config when shadow dom is rendered requestAnimationFrame(() => { this.startModeler(); + setAutoSaveInterval(); }); } } diff --git a/components/bpmn-q/modeler-component/editor/config/GeneralTab.js b/components/bpmn-q/modeler-component/editor/config/GeneralTab.js index b2e13ff5..4f6f822a 100644 --- a/components/bpmn-q/modeler-component/editor/config/GeneralTab.js +++ b/components/bpmn-q/modeler-component/editor/config/GeneralTab.js @@ -49,6 +49,7 @@ export default function EditorTab() { editorConfig.setCamundaEndpoint(camundaEndpoint); editorConfig.setTransformedWorkflowHandler(workflowHandler); editorConfig.setAutoSaveFileOption(autoSaveFileOption); + modeler.get('eventBus').fire('autoSaveOptionChanged', { autoSaveFileOption }); editorConfig.setFileName(fileName); editorConfig.setFileFormat(fileFormat); editorConfig.setAutoSaveIntervalSize(autoSaveIntervalSize); diff --git a/components/bpmn-q/modeler-component/editor/util/IoUtilities.js b/components/bpmn-q/modeler-component/editor/util/IoUtilities.js index abcfe116..9529645d 100644 --- a/components/bpmn-q/modeler-component/editor/util/IoUtilities.js +++ b/components/bpmn-q/modeler-component/editor/util/IoUtilities.js @@ -232,32 +232,24 @@ export function openInNewTab(workflowXml, fileName) { }; } -export function resetAutosaveTimeout(autosaveTimeout, hasChanges, autoSaveFileOption = editorConfig.getAutoSaveFileOption()) { - clearTimeout(autosaveTimeout); - +export function setAutoSaveInterval(autoSaveFileOption = editorConfig.getAutoSaveFileOption()) { if (autoSaveFileOption === autoSaveFile.INTERVAL) { - setTimeout(() => autosave(hasChanges), editorConfig.getAutoSaveIntervalSize()); + getModeler().autosaveIntervalId = setInterval(() => { saveFile(); }, editorConfig.getAutoSaveIntervalSize()); } else { - const timestamp = getTimestamp(); - saveModelerAsLocalFile(getModeler(), `autosave_${timestamp}_${editorConfig.getFileName()}`, saveFileFormats.BPMN, false); + saveFile(); } } -function autosave(hasChanges) { - if (hasChanges) { - // extract the xml and save it to a file - getModeler().saveXML({ format: true }, function (err, xml) { - if (!err) { - // Save the XML - console.log('Autosaved:', xml); - const timestamp = getTimestamp(); - saveXmlAsLocalFile(xml, `autosave_${timestamp}_${editorConfig.getFileName()}`); - } - }); - } - - // Reset the timer after the autosave is completed - resetAutosaveTimeout(); +export function saveFile() { + // extract the xml and save it to a file + getModeler().saveXML({ format: true }, function (err, xml) { + if (!err) { + // Save the XML + console.log('Autosaved:', xml); + const timestamp = getTimestamp(); + saveXmlAsLocalFile(xml, `autosave_${timestamp}_${editorConfig.getFileName()}`); + } + }); } function getTimestamp() { diff --git a/components/bpmn-q/modeler-component/extensions/data-extension/rules/DataFlowRulesProvider.js b/components/bpmn-q/modeler-component/extensions/data-extension/rules/DataFlowRulesProvider.js index 7f2560de..24fbeffb 100644 --- a/components/bpmn-q/modeler-component/extensions/data-extension/rules/DataFlowRulesProvider.js +++ b/components/bpmn-q/modeler-component/extensions/data-extension/rules/DataFlowRulesProvider.js @@ -5,9 +5,11 @@ import { } from 'bpmn-js/lib/features/modeling/util/ModelingUtil'; import * as consts from '../Constants'; import { isConnectedWith } from '../../../editor/util/ModellingUtilities'; -import { resetAutosaveTimeout } from '../../../editor/util/IoUtilities'; +import { saveFile, setAutoSaveInterval } from '../../../editor/util/IoUtilities'; import { getModeler } from '../../../editor/ModelerHandler'; import ace from 'ace-builds'; +import * as editorConfig from "../../../editor/config/EditorConfigManager"; +import { autoSaveFile } from '../../../editor/EditorConstants'; /** * Custom rules provider for the DataFlow elements. Extends the BpmnRules. @@ -20,7 +22,6 @@ export default class CustomRulesProvider extends BpmnRules { const canConnectDataExtension = this.canConnectDataExtension; const canConnect = this.canConnect.bind(this); const canCreate = this.canCreate.bind(this); - let autosaveTimeout = 0; // persist into local storage whenever copy took place eventBus.on('copyPaste.elementsCopied', event => { @@ -69,10 +70,20 @@ export default class CustomRulesProvider extends BpmnRules { ); }); - eventBus.on("commandStack.changed", function() { - - // Reset the timeout on any change event - resetAutosaveTimeout(autosaveTimeout, true); + // save every change when the autosave option is on action + eventBus.on("commandStack.changed", function () { + if (editorConfig.getAutoSaveFileOption() === autoSaveFile.ON_ACTION) { + saveFile(); + } + }); + + // remove interval when autosave option is on action + eventBus.on("autoSaveOptionChanged", function (context) { + if (context.autoSaveFileOption === autoSaveFile.ON_ACTION) { + clearInterval(getModeler().autosaveIntervalId); + } else { + setAutoSaveInterval(); + } }); // update xml viewer on diagram change From 842ceaa6a3b673240db54450ab28841c2934f083 Mon Sep 17 00:00:00 2001 From: LaviniaStiliadou Date: Mon, 21 Aug 2023 12:55:42 +0200 Subject: [PATCH 21/24] only save xml in interval if xml changed --- .../modeler-component/editor/util/IoUtilities.js | 16 +++++++++++----- .../rules/DataFlowRulesProvider.js | 4 ++++ 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/components/bpmn-q/modeler-component/editor/util/IoUtilities.js b/components/bpmn-q/modeler-component/editor/util/IoUtilities.js index 9529645d..a17914cc 100644 --- a/components/bpmn-q/modeler-component/editor/util/IoUtilities.js +++ b/components/bpmn-q/modeler-component/editor/util/IoUtilities.js @@ -236,7 +236,7 @@ export function setAutoSaveInterval(autoSaveFileOption = editorConfig.getAutoSav if (autoSaveFileOption === autoSaveFile.INTERVAL) { getModeler().autosaveIntervalId = setInterval(() => { saveFile(); }, editorConfig.getAutoSaveIntervalSize()); } else { - saveFile(); + saveFile(); } } @@ -244,10 +244,16 @@ export function saveFile() { // extract the xml and save it to a file getModeler().saveXML({ format: true }, function (err, xml) { if (!err) { - // Save the XML - console.log('Autosaved:', xml); - const timestamp = getTimestamp(); - saveXmlAsLocalFile(xml, `autosave_${timestamp}_${editorConfig.getFileName()}`); + let oldXml = getModeler().oldXml; + console.log(oldXml); + console.log(xml) + if (oldXml !== xml && oldXml !== undefined) { + // Save the XML + console.log('Autosaved:', xml); + getModeler().oldXml = xml; + const timestamp = getTimestamp(); + saveXmlAsLocalFile(xml, `autosave_${timestamp}_${editorConfig.getFileName()}`); + } } }); } diff --git a/components/bpmn-q/modeler-component/extensions/data-extension/rules/DataFlowRulesProvider.js b/components/bpmn-q/modeler-component/extensions/data-extension/rules/DataFlowRulesProvider.js index 24fbeffb..e4fe929f 100644 --- a/components/bpmn-q/modeler-component/extensions/data-extension/rules/DataFlowRulesProvider.js +++ b/components/bpmn-q/modeler-component/extensions/data-extension/rules/DataFlowRulesProvider.js @@ -91,6 +91,10 @@ export default class CustomRulesProvider extends BpmnRules { let editor = document.getElementById('editor'); let aceEditor = ace.edit(editor); let modeler = getModeler(); + modeler.oldXml = getModeler().xml; + if(modeler.xml.xml !== undefined) { + modeler.oldXml = getModeler().xml.xml; + } if (modeler) { modeler.saveXML({ format: true }).then(function (result) { if (result.xml !== undefined) { From 95fe33898df2e1493727a7dd8c964c5bc83f7215 Mon Sep 17 00:00:00 2001 From: LaviniaStiliadou Date: Mon, 21 Aug 2023 13:55:50 +0200 Subject: [PATCH 22/24] fix test --- .../bpmn-q/modeler-component/editor/util/IoUtilities.js | 2 -- .../data-extension/rules/DataFlowRulesProvider.js | 9 +++++---- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/components/bpmn-q/modeler-component/editor/util/IoUtilities.js b/components/bpmn-q/modeler-component/editor/util/IoUtilities.js index a17914cc..4b3de908 100644 --- a/components/bpmn-q/modeler-component/editor/util/IoUtilities.js +++ b/components/bpmn-q/modeler-component/editor/util/IoUtilities.js @@ -245,8 +245,6 @@ export function saveFile() { getModeler().saveXML({ format: true }, function (err, xml) { if (!err) { let oldXml = getModeler().oldXml; - console.log(oldXml); - console.log(xml) if (oldXml !== xml && oldXml !== undefined) { // Save the XML console.log('Autosaved:', xml); diff --git a/components/bpmn-q/modeler-component/extensions/data-extension/rules/DataFlowRulesProvider.js b/components/bpmn-q/modeler-component/extensions/data-extension/rules/DataFlowRulesProvider.js index e4fe929f..55037fc3 100644 --- a/components/bpmn-q/modeler-component/extensions/data-extension/rules/DataFlowRulesProvider.js +++ b/components/bpmn-q/modeler-component/extensions/data-extension/rules/DataFlowRulesProvider.js @@ -91,11 +91,12 @@ export default class CustomRulesProvider extends BpmnRules { let editor = document.getElementById('editor'); let aceEditor = ace.edit(editor); let modeler = getModeler(); - modeler.oldXml = getModeler().xml; - if(modeler.xml.xml !== undefined) { - modeler.oldXml = getModeler().xml.xml; - } if (modeler) { + if (modeler.xml !== undefined) { + modeler.oldXml = getModeler().xml; + if (getModeler().xml.xml !== undefined) + modeler.oldXml = getModeler().xml.xml; + } modeler.saveXML({ format: true }).then(function (result) { if (result.xml !== undefined) { result = result.xml; From 28f8eb98ffc8cf96c54ece731584e1bc023e57bd Mon Sep 17 00:00:00 2001 From: mbeisel Date: Mon, 21 Aug 2023 14:24:56 +0200 Subject: [PATCH 23/24] adjust autosave filename --- components/bpmn-q/modeler-component/editor/util/IoUtilities.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/bpmn-q/modeler-component/editor/util/IoUtilities.js b/components/bpmn-q/modeler-component/editor/util/IoUtilities.js index 4b3de908..425f3a36 100644 --- a/components/bpmn-q/modeler-component/editor/util/IoUtilities.js +++ b/components/bpmn-q/modeler-component/editor/util/IoUtilities.js @@ -250,7 +250,8 @@ export function saveFile() { console.log('Autosaved:', xml); getModeler().oldXml = xml; const timestamp = getTimestamp(); - saveXmlAsLocalFile(xml, `autosave_${timestamp}_${editorConfig.getFileName()}`); + const filename = `${editorConfig.getFileName().replace('.bpmn','')}_autosave_${timestamp}`; + saveXmlAsLocalFile(xml, filename); } } }); From 5334300c7870b539217b49b245313a5711f5c058 Mon Sep 17 00:00:00 2001 From: mbeisel Date: Mon, 21 Aug 2023 14:46:05 +0200 Subject: [PATCH 24/24] reference doc in config --- .../extensions/quantme/framework-config/config.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/bpmn-q/modeler-component/extensions/quantme/framework-config/config.js b/components/bpmn-q/modeler-component/extensions/quantme/framework-config/config.js index 10fba564..6bd1d91c 100644 --- a/components/bpmn-q/modeler-component/extensions/quantme/framework-config/config.js +++ b/components/bpmn-q/modeler-component/extensions/quantme/framework-config/config.js @@ -9,7 +9,8 @@ * SPDX-License-Identifier: Apache-2.0 */ -// takes either the environment variables or the default values definded in webpack.config +// takes either the environment variables or the default values defined in webpack.config +// TODO: On change ALWAYS UPDATE corresponding doc: doc/quantum-workflow-modeler/modeler-configuration.md const defaultConfig = { quantmeDataConfigurationsEndpoint: process.env.DATA_CONFIG, opentoscaEndpoint: process.env.OPENTOSCA_ENDPOINT,