add links to pattern (#120)

* add links to pattern * Change link color to blue --------- Co-authored-by: Benjamin Weder <benjamin.weder@iaas.uni-stuttgart.de>
PlanQK · Nov 15, 2023 · 902f6b1 · 902f6b1
1 parent 5194d47
commit 902f6b1
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 4 deletions.
diff --git a/components/bpmn-q/modeler-component/extensions/pattern/configTabs/PatternConfigTab.js b/components/bpmn-q/modeler-component/extensions/pattern/configTabs/PatternConfigTab.js
@@ -24,6 +24,9 @@ export default function PatternAtlasConfigTab() {
   const [patternAtlasEndpoint, setPatternAtlasEndpoint] = useState(
     config.getPatternAtlasEndpoint()
   );
+  const [patternAtlasUIEndpoint, setPatternAtlasUIEndpoint] = useState(
+    config.getPatternAtlasUIEndpoint()
+  );
   const modeler = getModeler();
 
   const editorActions = modeler.get("editorActions");
@@ -39,10 +42,21 @@ export default function PatternAtlasConfigTab() {
     });
   }
 
+  if (!editorActions._actions.hasOwnProperty("patternAtlasUIEndpointChanged")) {
+    editorActions.register({
+      patternAtlasUIEndpointChanged: function (patternAtlasUIEndpoint) {
+        self.modeler.config.patternAtlasUIEndpoint = patternAtlasUIEndpoint;
+        eventBus.fire("config.updated", self.modeler.config);
+      },
+    });
+  }
+
   // save changed config entries on close
   PatternAtlasConfigTab.prototype.onClose = () => {
     modeler.config.patternAtlasEndpoint = patternAtlasEndpoint;
+    modeler.config.patternAtlasUIEndpoint = patternAtlasUIEndpoint;
     config.setPatternAtlasEndpoint(patternAtlasEndpoint);
+    config.setPatternAtlasUIEndpoint(patternAtlasUIEndpoint);
   };
 
   return (
@@ -64,6 +78,20 @@ export default function PatternAtlasConfigTab() {
               />
             </td>
           </tr>
+          <tr className="spaceUnder">
+            <td align="right">Pattern Atlas UI Endpoint</td>
+            <td align="left">
+              <input
+                className="qwm-input"
+                type="string"
+                name="patternAtlasUIEndpoint"
+                value={patternAtlasUIEndpoint}
+                onChange={(event) =>
+                  setPatternAtlasUIEndpoint(event.target.value)
+                }
+              />
+            </td>
+          </tr>
         </tbody>
       </table>
     </>
@@ -74,4 +102,5 @@ PatternAtlasConfigTab.prototype.config = () => {
   const modeler = getModeler();
 
   modeler.config.patternAtlasEndpoint = config.getPatternAtlasEndpoint();
+  modeler.config.patternAtlasUIEndpoint = config.getPatternAtlasUIEndpoint();
 };
diff --git a/components/bpmn-q/modeler-component/extensions/pattern/framework-config/config-manager.js b/components/bpmn-q/modeler-component/extensions/pattern/framework-config/config-manager.js
@@ -35,6 +35,28 @@ export function setPatternAtlasEndpoint(patternAtlasEndpoint) {
     config.patternAtlasEndpoint = patternAtlasEndpoint;
   }
 }
+
+/**
+ * Get the endpoint of the connected Pattern Atlas UI
+ */
+export function getPatternAtlasUIEndpoint() {
+  if (config.patternAtlasUIEndpoint === undefined) {
+    setPatternAtlasUIEndpoint(
+      getPluginConfig("pattern").patternAtlasUIEndpoint ||
+        defaultConfig.patternAtlasUIEndpoint
+    );
+  }
+  return config.patternAtlasUIEndpoint;
+}
+
+/**
+ * Set the endpoint of the connected Pattern Atlas UI
+ */
+export function setPatternAtlasUIEndpoint(patternAtlasUIEndpoint) {
+  if (patternAtlasUIEndpoint !== null && patternAtlasUIEndpoint !== undefined) {
+    config.patternAtlasUIEndpoint = patternAtlasUIEndpoint;
+  }
+}
 /**
  * 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.

diff --git a/components/bpmn-q/modeler-component/extensions/pattern/framework-config/config.js b/components/bpmn-q/modeler-component/extensions/pattern/framework-config/config.js
@@ -12,5 +12,6 @@
 // takes either the environment variables or the default values defined in webpack.config
 const defaultConfig = {
   patternAtlasEndpoint: process.env.PATTERN_ATLAS_ENDPOINT,
+  patternAtlasUIEndpoint: process.env.PATTERN_ATLAS_UI_ENDPOINT,
 };
 export default defaultConfig;
diff --git a/components/bpmn-q/modeler-component/extensions/pattern/styling/pattern.css b/components/bpmn-q/modeler-component/extensions/pattern/styling/pattern.css
@@ -56,6 +56,11 @@
   width: 100%;
 }
 
+.pattern-links {
+  color: blue;
+  text-decoration: underline;
+}
+
 .qwm-action {
   min-width: 10px;
   height: 35px;

diff --git a/.../bpmn-q/modeler-component/extensions/pattern/ui/pattern-selection/PatternOverviewModal.js b/.../bpmn-q/modeler-component/extensions/pattern/ui/pattern-selection/PatternOverviewModal.js
@@ -32,7 +32,6 @@ export default function PatternOverviewModal({ onClose, responseData }) {
   const closeAlgorithmicPatternModal = () => {
     setAlgorithmicPatternModalOpen(false);
   };
-
   const selectAlgorithmicPattern = useCallback(
     (selectedPattern) => {
       if (editRow !== null) {

diff --git a/...bpmn-q/modeler-component/extensions/pattern/ui/pattern-selection/PatternSelectionModal.js b/...bpmn-q/modeler-component/extensions/pattern/ui/pattern-selection/PatternSelectionModal.js
@@ -16,6 +16,7 @@ import {
   PATTERN_ALGORITHM,
   PATTERN_AUGMENTATION,
 } from "../../Constants";
+import { getModeler } from "../../../../editor/ModelerHandler";
 
 const Title = Modal.Title || (({ children }) => <h4>{children}</h4>);
 const Body = Modal.Body || (({ children }) => <div>{children}</div>);
@@ -97,6 +98,7 @@ export default function PatternSelectionModal({
     (pattern) => pattern.tags && pattern.tags.includes(PATTERN_AUGMENTATION)
   );
 
+  const patternAtlasUIEndpoint = getModeler().config.patternAtlasUIEndpoint;
   return (
     <Modal onClose={onClose}>
       <Title>Patterns</Title>
@@ -121,7 +123,22 @@ export default function PatternSelectionModal({
             <tbody>
               {algorithmPatterns.map((pattern) => (
                 <tr key={pattern.id}>
-                  <td>{pattern.name}</td>
+                  <td>
+                    <a
+                      className="pattern-links"
+                      href={
+                        patternAtlasUIEndpoint +
+                        "/pattern-languages/" +
+                        pattern.patternLanguageId +
+                        "/" +
+                        pattern.id
+                      }
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {pattern.name}
+                    </a>
+                  </td>
                   <td>
                     <img
                       src={pattern.iconUrl}
@@ -162,7 +179,22 @@ export default function PatternSelectionModal({
             <tbody>
               {behavioralPatterns.map((pattern) => (
                 <tr key={pattern.id}>
-                  <td>{pattern.name}</td>
+                  <td>
+                    <a
+                      className="pattern-links"
+                      href={
+                        patternAtlasUIEndpoint +
+                        "/pattern-languages/" +
+                        pattern.patternLanguageId +
+                        "/" +
+                        pattern.id
+                      }
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {pattern.name}
+                    </a>
+                  </td>
                   <td>
                     <img
                       src={pattern.iconUrl}
@@ -202,7 +234,22 @@ export default function PatternSelectionModal({
             <tbody>
               {augmentationPatterns.map((pattern) => (
                 <tr key={pattern.id}>
-                  <td>{pattern.name}</td>
+                  <td>
+                    <a
+                      className="pattern-links"
+                      href={
+                        patternAtlasUIEndpoint +
+                        "/pattern-languages/" +
+                        pattern.patternLanguageId +
+                        "/" +
+                        pattern.id
+                      }
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {pattern.name}
+                    </a>
+                  </td>
                   <td>
                     <img
                       src={pattern.iconUrl}

diff --git a/components/bpmn-q/webpack.config.js b/components/bpmn-q/webpack.config.js
@@ -21,6 +21,7 @@ let defaultConfig = {
   NISQ_ANALYZER_ENDPOINT: "http://localhost:8098/nisq-analyzer",
   PATTERN_ATLAS_ENDPOINT:
     "http://localhost:1977/patternatlas/patternLanguages/af7780d5-1f97-4536-8da7-4194b093ab1d",
+  PATTERN_ATLAS_UI_ENDPOINT: "http://localhost:1978",
   PROVENANCE_COLLECTION: "false",
   QHANA_GET_PLUGIN_URL: "http://localhost:5006/api/plugins/",
   QHANA_LIST_PLUGINS_URL: "http://localhost:5006/api/plugins/?item-count=100",