feat: Integrate flamapy.conf

closes #33

Author: sebasruii

public/flamapy/flamapy.js

@@ -29,6 +29,7 @@ class Flamapy {
   await micropip.install("flamapy/uvlparser-2.0.1-py3-none-any.whl", deps=False)
   await micropip.install("flamapy/afmparser-1.0.3-py3-none-any.whl", deps=False)
   await micropip.install("flamapy/antlr4_python3_runtime-4.13.1-py3-none-any.whl", deps=False)
+  await micropip.install("flamapy/flamapy_configurator-2.0.1-py3-none-any.whl", deps=False)
   `);
     await pyodideInstance.runPythonAsync(await pythonFile.text());
     pyodideInstance.FS.mkdir("export");
@@ -122,4 +123,23 @@ class Flamapy {
       }
     }
   }
+
+  async startConfigurator() {
+    const result = await this.pyodide.runPythonAsync(`
+  start_configurator()`);
+    return JSON.parse(result);
+  }
+
+  async answerQuestion(answer) {
+    this.pyodide.globals.set("answer", answer);
+    const result = await this.pyodide.runPythonAsync(`
+  answer_question(answer)`);
+    return JSON.parse(result);
+  }
+
+  async undoAnswer() {
+    const result = await this.pyodide.runPythonAsync(`
+  undo_answer()`);
+    return JSON.parse(result);
+  }
 }

public/flamapy/flamapy_configurator-2.0.1-py3-none-any.whl

@@ -8,9 +8,12 @@
 from flamapy.core.discover import DiscoverMetamodels
 from flamapy.metamodels.fm_metamodel.transformations import GlencoeReader, AFMReader, FeatureIDEReader, JSONReader, XMLReader, UVLReader, GlencoeWriter
 from flamapy.metamodels.configuration_metamodel.models import Configuration
+from flamapy.metamodels.configurator_metamodel.transformation import FmToConfigurator
 from collections import defaultdict
 
 fm = None
+configurator = None
+
 
 # Custom error listener
 class CustomErrorListener(ErrorListener):
@@ -211,4 +214,30 @@ def execute_configurator_operation(name: str, conf):
     result = operation.get_result()
     if type(result) is list:
         return [str(conf) for conf in result]
-    return result
+    return result
+
+def start_configurator():
+    global configurator
+    configurator = FmToConfigurator(fm.fm_model).transform()
+    configurator.start()
+    
+    return json.dumps(configurator.get_current_status())
+
+def answer_question(answer):
+    valid = configurator.answer_question(answer)
+
+    result = dict()
+    result['valid'] = valid
+    if valid:
+        if configurator.next_question():
+            result['nextQuestion'] = configurator.get_current_status()
+        else:
+            result['configuration'] = configurator._get_configuration()
+    else:
+        result['contradiction'] = {'msg': 'The selected choice is incompatible with the model definition. Please choose another option.'}
+    
+    return json.dumps(result)
+
+def undo_answer():
+    configurator.previous_question()
+    return json.dumps(configurator.get_current_status())

public/flamapy/flamapy_ide.py

@@ -33,6 +33,12 @@ self.onmessage = async (event) => {
       results = await self.flamapy.getFeatures();
     } else if (action === "executeActionWithConf") {
       results = await self.flamapy.executeActionWithConf(data);
+    } else if (action === "startConfigurator") {
+      results = await self.flamapy.startConfigurator();
+    } else if (action === "answerQuestion") {
+      results = await self.flamapy.answerQuestion(data);
+    } else if (action === "undoAnswer") {
+      results = await self.flamapy.undoAnswer();
     }
 
     self.postMessage({ results, action });

public/webworker.js

@@ -0,0 +1,67 @@
+function Configuration({ configuration }) {
+  const categorizedConfig = {
+    selected: [],
+    deselected: [],
+    undecided: [],
+  };
+
+  Object.entries(configuration).forEach(([feature, status]) => {
+    if (status === true) {
+      categorizedConfig.selected.push(feature);
+    } else if (status === false) {
+      categorizedConfig.deselected.push(feature);
+    } else {
+      categorizedConfig.undecided.push(feature);
+    }
+  });
+
+  return (
+    <div className="bg-white w-full rounded-xl p-4 text-xl shadow-md overflow-auto">
+      <h2 className="text-2xl font-bold text-gray-800 mb-4">
+        Feature Configuration
+      </h2>
+      <div className="text-lg">
+        <div className="mb-2">
+          <h3 className="font-semibold text-green-600">Selected Features:</h3>
+          <ul className="list-disc list-inside text-black">
+            {categorizedConfig.selected.length > 0 ? (
+              categorizedConfig.selected.map((feature, index) => (
+                <li key={index}>{feature}</li>
+              ))
+            ) : (
+              <p className="text-gray-500">None</p>
+            )}
+          </ul>
+        </div>
+
+        <div className="mb-2">
+          <h3 className="font-semibold text-red-600">Deselected Features:</h3>
+          <ul className="list-disc list-inside text-black">
+            {categorizedConfig.deselected.length > 0 ? (
+              categorizedConfig.deselected.map((feature, index) => (
+                <li key={index}>{feature}</li>
+              ))
+            ) : (
+              <p className="text-gray-500">None</p>
+            )}
+          </ul>
+        </div>
+
+        <div>
+          <h3 className="font-semibold text-yellow-600">Undecided Features:</h3>
+          <ul className="list-disc list-inside text-black">
+            {categorizedConfig.undecided.length > 0 ? (
+              categorizedConfig.undecided.map((feature, index) => (
+                <li key={index}>{feature}</li>
+              ))
+            ) : (
+              <p className="text-gray-500">None</p>
+            )}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Configuration;

src/components/Configuration.jsx

@@ -0,0 +1,19 @@
+/* eslint-disable react/prop-types */
+function CustomButton({ active = true, onClick, children }) {
+  const baseClasses =
+    "w-max text-white py-2 px-4 m-2 rounded shadow-lg transition-colors duration-200";
+  const activeClasses = "bg-[#356C99] hover:bg-[#0D486C]";
+  const disabledClasses = "bg-gray-400 cursor-not-allowed";
+
+  return (
+    <button
+      className={`${baseClasses} ${active ? activeClasses : disabledClasses}`}
+      onClick={active ? onClick : undefined}
+      disabled={!active}
+    >
+      {children}
+    </button>
+  );
+}
+
+export default CustomButton;

src/components/CustomButton.jsx

@@ -1,35 +1,63 @@
 /* eslint-disable react/prop-types */
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
 
-const DropdownMenu = ({ options, buttonLabel, executeAction }) => {
+const DropdownMenu = ({
+  options,
+  buttonLabel,
+  executeAction,
+  className = "w-full bg-[#356C99] text-white py-2 px-4 rounded shadow-lg flex justify-between items-center",
+}) => {
   const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
 
   const handleToggle = () => {
-    setIsOpen(!isOpen);
+    setIsOpen((prev) => !prev);
   };
 
   const handleAction = async (action) => {
     await executeAction(action);
     setIsOpen(false);
   };
 
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
   return (
-    <div className="relative inline-block w-max">
+    <div ref={dropdownRef} className="relative inline-block w-max">
       <button
         onClick={handleToggle}
-        className="w-full bg-[#356C99] text-white py-2 px-4 rounded shadow-lg flex justify-between items-center"
+        className={className}
+        aria-haspopup="true"
+        aria-expanded={isOpen}
       >
         {buttonLabel}
-        <span className="ml-2">&#9660;</span> {/* Dropdown arrow */}
+        <span className="ml-2">&#9660;</span>
       </button>
+
       {isOpen && (
-        <div className="absolute w-full mt-1 bg-white border border-[#356C99] rounded-lg shadow-lg z-10">
+        <div
+          className="absolute w-full mt-1 bg-white border border-[#356C99] rounded-lg shadow-lg z-10"
+          role="menu"
+        >
           {options?.length ? (
             options.map((option) => (
               <div
                 key={option.label}
                 onClick={() => handleAction(option)}
-                className="w-full text-left py-2 px-4 cursor-pointer hover:bg-[#0D486C] text-[#356C99] hover:text-white"
+                tabIndex={0}
+                className="w-full text-left py-2 px-4 cursor-pointer hover:bg-[#0D486C] text-[#356C99] hover:text-white focus:outline-none focus:bg-[#0D486C] focus:text-white"
+                role="menuitem"
               >
                 {option.label}
               </div>