Enable pattern selection (#108)

* Add linter script and fix errors

* Apply prettier

* Add workflow executing linters

* Add working directory for npm ci

* Remove unknown working-directory from linting action

* Update linting workflow

* Fix linting command

* Fix NOTICE file

* Fix licence years

* Fix name in Github workflow

* Enable unused variable linting rule

* Run prettier

* Enable unnecessary espace rule

* Add .eslintignore

* Adapt path to public folder

* Update ignore rules for linters

* Lint changes after merging master

* Start fixing Readme

* Lint changes from merge

* Lint master merge

* Lint changes after merge with origin/master

* Replace renderer with correct file

* Lint changes

* Lint changes

* Run linter

* Fix lint error

* Add badges to readme

* New diagram dialog (#89)

* dialog for new diagram, isExecutable to true

Co-Authored-By: LaviniaStiliadou <livia_16@live.de>

* fix lint

* adjust label for canceling dialog

---------

Co-authored-by: SharonNaemi <naemi_17@live.de>
Co-authored-by: mbeisel <beiselmn@gmail.com>

* Fix plugin handling (#87)

* fix plugin handling

* fix lint

* add plugin pattern

* scale image

* allow to select patterns

* store patterns correctly with each button

* allow drag & drop

* align buttons horizontally

* fix layout of button, add endpointurl

* open modal to select algorithmic patterns

* fix selecting patterns to algorithmic patterns

* fix warning when setting endpoint

* add error message when endpoint is incorrect

* update text

* remove unused classes, change icon

* fix selected patterns for modal

* modify selection modal

* change position

* add delete

* add message to select algorithm pattern

* fix edit

* fix selected content

* remove quantme from pattern plugin

* change adaptation to pattern selection

* remove files

* fix layout

* fix lint

* return result

* fix tests

* adjust + button position

* disable button if response is invalid

* Fix comment for PatternConfigTab

* Fix comments for config-manager.js

* Change button style

* Remove comment

* Remove unused methods

* Refactor http fetch function to general utility class

* remove comments

* Remove unused methods

* Add copyright statements

* Remove wrong comment

* change icon

* fix lint

* Small changes for pattern intro text

* Remove comma

* Inline variables

* Fix button naming

* Move pattern categories to constants

* Remove pattern.json

* Update default config

* Activate plugins for tests

---------

Co-authored-by: Benjamin Weder <benjamin.weder@iaas.uni-stuttgart.de>
Co-authored-by: SharonNaemi <naemi_17@live.de>
Co-authored-by: mbeisel <beiselmn@gmail.com>

components/bpmn-q/modeler-component/editor/plugin/PluginHandler.js

@@ -1,8 +1,9 @@
 import PlanQKPlugin from "../../extensions/planqk/PlanQKPlugin";
 import QuantMEPlugin from "../../extensions/quantme/QuantMEPlugin";
-import OpenTOSCAPlugin from "../../extensions/opentosca/OpenTOSCAPlugin";
 import DataFlowPlugin from "../../extensions/data-extension/DataFlowPlugin";
 import QHAnaPlugin from "../../extensions/qhana/QHAnaPlugin";
+import PatternPlugin from "../../extensions/pattern/PatternPlugin";
+import OpenTOSCAPlugin from "../../extensions/opentosca/OpenTOSCAPlugin";
 import { getAllConfigs } from "./PluginConfigHandler";
 import GeneralTab from "../config/GeneralTab";
 import GitHubTab from "../../extensions/quantme/configTabs/GitHubTab";
@@ -31,6 +32,10 @@ const PLUGINS = [
     plugin: PlanQKPlugin,
     dependencies: [],
   },
+  {
+    plugin: PatternPlugin,
+    dependencies: [],
+  },
   {
     plugin: OpenTOSCAPlugin,
     dependencies: [],
@@ -89,6 +94,8 @@ export function checkEnabledStatus(pluginName) {
       return process.env.ENABLE_QHANA_PLUGIN !== "false";
     case "quantme":
       return process.env.ENABLE_QUANTME_PLUGIN !== "false";
+    case "pattern":
+      return process.env.ENABLE_PATTERN_PLUGIN !== "false";
     case "opentosca":
       return process.env.ENABLE_OPENTOSCA_PLUGIN !== "false";
   }

components/bpmn-q/modeler-component/editor/resources/styling/camunda-styles/_modal.css

@@ -68,9 +68,7 @@ body,
   position: fixed;
   left: 0;
   right: 0;
-  width: 40%;
-  max-width: 750px;
-  min-width: 591px;
+  width: 70%;
   margin: 10vh auto 6vh;
   padding: 0;
   z-index: 1001;
@@ -149,3 +147,42 @@ body,
 .qwm-modal-dialog .close:focus {
   background-color: var(--silver-darken-87);
 }
+
+.centered-image {
+  max-width: 100%;
+  max-height: 100%;
+  display: block;
+}
+
+.pattern-card.selected {
+  background-color: hsl(205, 100%, 50%);
+  color: #fff;
+}
+
+.pattern-type-buttons button {
+  margin-right: 10px;
+}
+
+.dynamic-buttons-container {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+}
+
+.dynamic-buttons-container > div {
+  margin-right: 10px;
+}
+
+.dynamic-buttons-container button {
+}
+
+.selected-button {
+  background-color: hsl(205, 100%, 50%);
+  color: #fff;
+}
+
+button {
+  background-color: #f0f0f0;
+  color: #000;
+  outline: none;
+}

components/bpmn-q/modeler-component/editor/util/HttpUtilities.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2023 Institute of Architecture of Application Systems -
+ * University of Stuttgart
+ *
+ * This program and the accompanying materials are made available under the
+ * terms the Apache Software License 2.0
+ * which is available at https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Retrieves the Json data from the given endpoint.
+ *
+ * @param endpoint the endpoint to retrieve the data form
+ * @returns
+ */
+export async function fetchDataFromEndpoint(endpoint) {
+  try {
+    const response = await fetch(endpoint);
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Error fetching data:", error);
+    return {};
+  }
+}

components/bpmn-q/modeler-component/extensions/pattern/Constants.js

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2023 Institute of Architecture of Application Systems -
+ * University of Stuttgart
+ *
+ * This program and the accompanying materials are made available under the
+ * terms the Apache Software License 2.0
+ * which is available at https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+export const PATTERN_ALGORITHM = "algorithm";
+export const PATTERN_BEHAVIORAL = "behavioral";
+export const PATTERN_AUGMENTATION = "augmentation";

components/bpmn-q/modeler-component/extensions/pattern/PatternPlugin.js

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2023 Institute of Architecture of Application Systems -
+ * University of Stuttgart
+ *
+ * This program and the accompanying materials are made available under the
+ * terms the Apache Software License 2.0
+ * which is available at https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from "react";
+
+import PatternConfigTab from "./configTabs/PatternConfigTab";
+import patternStyles from "./styling/pattern.css";
+import PatternPluginButton from "./ui/PatternPluginButton";
+
+/**
+ * Plugin Object of the QuantME extension. Used to register the plugin in the plugin handler of the modeler.
+ */
+export default {
+  buttons: [<PatternPluginButton />],
+  configTabs: [
+    {
+      tabId: "PatternTab",
+      tabTitle: "Pattern Plugin",
+      configTab: PatternConfigTab,
+    },
+  ],
+  name: "pattern",
+  extensionModule: [],
+  styling: [patternStyles],
+};

components/bpmn-q/modeler-component/extensions/pattern/configTabs/PatternConfigTab.js

@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2023 Institute of Architecture of Application Systems -
+ * University of Stuttgart
+ *
+ * This program and the accompanying materials are made available under the
+ * terms the Apache Software License 2.0
+ * which is available at https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * SPDX-License-Identifier: Apache-2.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
+ * configuration entries for the pattern plugin.
+ *
+ * @return {JSX.Element} The tab as a React component
+ * @constructor
+ */
+export default function PatternAtlasConfigTab() {
+  const [patternAtlasEndpoint, setPatternAtlasEndpoint] = useState(
+    config.getPatternAtlasEndpoint()
+  );
+  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("patternAtlasEndpointChanged")) {
+    editorActions.register({
+      patternAtlasEndpointChanged: function (patternAtlasEndpoint) {
+        self.modeler.config.patternAtlasEndpoint = patternAtlasEndpoint;
+        eventBus.fire("config.updated", self.modeler.config);
+      },
+    });
+  }
+
+  // save changed config entries on close
+  PatternAtlasConfigTab.prototype.onClose = () => {
+    modeler.config.patternAtlasEndpoint = patternAtlasEndpoint;
+    config.setPatternAtlasEndpoint(patternAtlasEndpoint);
+  };
+
+  return (
+    <>
+      <h3>Pattern Plugin endpoint:</h3>
+      <table>
+        <tbody>
+          <tr className="spaceUnder">
+            <td align="right">Pattern Atlas Endpoint</td>
+            <td align="left">
+              <input
+                className="qwm-input"
+                type="string"
+                name="patternAtlasEndpoint"
+                value={patternAtlasEndpoint}
+                onChange={(event) =>
+                  setPatternAtlasEndpoint(event.target.value)
+                }
+              />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </>
+  );
+}
+
+PatternAtlasConfigTab.prototype.config = () => {
+  const modeler = getModeler();
+
+  modeler.config.patternAtlasEndpoint = config.getPatternAtlasEndpoint();
+};

components/bpmn-q/modeler-component/extensions/pattern/framework-config/config-manager.js

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2023 Institute of Architecture of Application Systems -
+ * University of Stuttgart
+ *
+ * This program and the accompanying materials are made available under the
+ * terms the Apache Software License 2.0
+ * which is available at https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import defaultConfig from "./config";
+import { getPluginConfig } from "../../../editor/plugin/PluginConfigHandler";
+
+let config = {};
+
+/**
+ * Get the endpoint of the connected Pattern Atlas
+ */
+export function getPatternAtlasEndpoint() {
+  if (config.patternAtlasEndpoint === undefined) {
+    setPatternAtlasEndpoint(
+      getPluginConfig("pattern").patternAtlasEndpoint ||
+        defaultConfig.patternAtlasEndpoint
+    );
+  }
+  return config.patternAtlasEndpoint;
+}
+
+/**
+ * Set the endpoint of the connected Pattern Atlas
+ */
+export function setPatternAtlasEndpoint(patternAtlasEndpoint) {
+  if (patternAtlasEndpoint !== null && patternAtlasEndpoint !== undefined) {
+    config.patternAtlasEndpoint = patternAtlasEndpoint;
+  }
+}
+/**
+ * Reset all saved endpoints and configuration values back to default or the value of the respective plugin config
+ * by setting this.comfig to an empty js object.
+ */
+export function resetConfig() {
+  config = {};
+}

components/bpmn-q/modeler-component/extensions/pattern/framework-config/config.js

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2023 Institute of Architecture of Application Systems -
+ * University of Stuttgart
+ *
+ * This program and the accompanying materials are made available under the
+ * terms the Apache Software License 2.0
+ * which is available at https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// takes either the environment variables or the default values defined in webpack.config
+const defaultConfig = {
+  patternAtlasEndpoint: process.env.PATTERN_ATLAS_ENDPOINT,
+};
+export default defaultConfig;

components/bpmn-q/modeler-component/extensions/pattern/framework-config/index.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2023 Institute of Architecture of Application Systems -
+ * University of Stuttgart
+ *
+ * This program and the accompanying materials are made available under the
+ * terms the Apache Software License 2.0
+ * which is available at https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import * as configManager from "./config-manager";
+
+const config = configManager;
+export default config;