Merge pull request #31 from flamapy/develop

feat: Improve visualization component

Author: sebasruii

Makefile

@@ -0,0 +1,37 @@
+# Default output directory for wheels
+WHEELS_DIR = assets
+
+# Define the package (can be overridden in the command)
+PACKAGE ?=
+
+.PHONY: help
+help:
+	@echo "Makefile for managing Python dependencies"
+	@echo ""
+	@echo "Usage:"
+	@echo "  make dependencies PACKAGE=<package_name>  Download and build wheels for a package"
+	@echo "  make clean                                Remove all downloaded files in $(WHEELS_DIR)"
+	@echo "  make clean-tar                            Remove only source tarballs (.tar.gz, .zip)"
+	@echo "  make help                                 Show this help message"
+
+.PHONY: dependencies
+dependencies:
+	@mkdir -p $(WHEELS_DIR)
+	@echo "Downloading wheels and source distributions for $(PACKAGE)..."
+	@pip download --dest $(WHEELS_DIR) $(PACKAGE) || true
+	@echo "Checking for missing wheels..."
+	@pip install --no-cache-dir --find-links=$(WHEELS_DIR) $(PACKAGE) || true
+	@echo "Building missing wheels for $(PACKAGE)..."
+	@pip wheel --find-links=$(WHEELS_DIR) --wheel-dir $(WHEELS_DIR) $(PACKAGE) || true
+	@echo "All dependencies for $(PACKAGE) have been downloaded and built in $(WHEELS_DIR)"
+	@$(MAKE) clean-tar  # Automatically clean tar files after building
+
+.PHONY: clean
+clean:
+	@rm -rf $(WHEELS_DIR)
+	@echo "Cleaned up $(WHEELS_DIR)"
+
+.PHONY: clean-tar
+clean-tar:
+	@find $(WHEELS_DIR) -type f \( -name "*.tar.gz" -o -name "*.zip" \) -delete
+	@echo "Removed source distributions (.tar.gz, .zip) from $(WHEELS_DIR)"

public/flamapy/flamapy.js

@@ -18,8 +18,8 @@ class Flamapy {
     await pyodideInstance.runPythonAsync(`
   import micropip
   await micropip.install("flamapy/flamapy-2.0.1-py3-none-any.whl", deps=False)
-  await micropip.install("flamapy/flamapy_fw-2.0.1-py3-none-any.whl", deps=False)
-  await micropip.install("flamapy/flamapy_fm-2.0.1-py3-none-any.whl", deps=False)
+  await micropip.install("flamapy/flamapy_fw-2.0.2.dev0-py3-none-any.whl", deps=False)
+  await micropip.install("flamapy/flamapy_fm-2.0.2.dev0-py3-none-any.whl", deps=False)
   await micropip.install("flamapy/flamapy_sat-2.0.1-py3-none-any.whl", deps=False)
   await micropip.install("flamapy/flamapy_bdd-2.0.1-py3-none-any.whl", deps=False)
   await micropip.install("flamapy/dd-0.5.7-py3-none-any.whl", deps=False)

public/flamapy/flamapy_fm-2.0.2.dev0-py3-none-any.whl

@@ -162,9 +162,23 @@ def feature_tree(node):
     res['attributes']['isMandatory'] = node.is_mandatory()
     res['attributes']['isOptional'] = node.is_optional()
     res['attributes']['isAbstract'] = node.is_abstract
+    res['attributes']['isMultifeature'] = node.is_multifeature()
+    res['attributes']['featureCardinality'] = dict()
+    res['attributes']['featureCardinality']['min'] = node.feature_cardinality.min
+    res['attributes']['featureCardinality']['max'] = node.feature_cardinality.max
+    res['attributes']['isNumerical'] = node.is_numerical()
+    res['attributes']['isString'] = node.is_string()
+    res['attributes']['featureType'] = node.feature_type.value
+
     if node.get_children():
         res['attributes']['isAlternativeGroup'] = node.is_alternative_group()
         res['attributes']['isOrGroup'] = node.is_or_group()
+        res['attributes']['isCardinalityGroup'] = node.is_cardinality_group()
+        if node.is_cardinality_group():
+            res['attributes']['cardinalityGroup'] = dict()
+            cardinalityGroup = [relation for relation in node.get_relations() if relation.is_cardinal()]
+            res['attributes']['cardinalityGroup']['min'] = cardinalityGroup[0].card_min if cardinalityGroup else None
+            res['attributes']['cardinalityGroup']['max'] = cardinalityGroup[0].card_max if cardinalityGroup else None
         res['children'] = [feature_tree(child) for child in node.get_children()]
     return res
 

public/flamapy/flamapy_fw-2.0.2.dev0-py3-none-any.whl

@@ -1,6 +1,6 @@
 flamapy==2.0.1
-flamapy_fw==2.0.1
-flamapy_fm==2.0.1
+./public/flamapy/flamapy_fw-2.0.2.dev0-py3-none-any.whl
+./public/flamapy/flamapy_fm-2.0.2.dev0-py3-none-any.whl
 flamapy_sat==2.0.1
 flamapy_bdd==2.0.1
 pytest==8.3.3

public/flamapy/flamapy_ide.py

@@ -4,21 +4,35 @@ import Tree from "react-d3-tree";
 import { elementToSVG } from "dom-to-svg";
 
 // Function to draw an arc between the children
-const drawSemicircle = (rectWidth, rectHeight, isAlternative) => {
+const drawSemicircle = (rectWidth, rectHeight, isAlternative, isCardinalityGroup, card_min, card_max) => {
   const radius = rectWidth / 4;
   const startX = radius;
   const startY = rectHeight / 2;
   const endX = -radius;
   const endY = rectHeight / 2;
 
   return (
+    <g>
     <path
       d={`M ${startX},${startY} A ${radius},${radius} 0 0,1 ${endX},${endY}`}
       fill={isAlternative ? "none" : "gray"}
       stroke="black"
       strokeWidth="1"
       className="group"
     />
+    {isCardinalityGroup && (
+      <text
+        x="0"
+        y={endY + 15}
+        fill="white"
+        fontSize="12"
+        textAnchor="middle"
+        dominantBaseline="middle"
+      >
+        [{card_min}..{card_max}]
+      </text>
+    )}
+    </g>
   );
 };
 
@@ -40,9 +54,19 @@ const RenderRectSvgNode = ({ nodeDatum, toggleNode }) => {
   const isOptional = nodeDatum.attributes?.isOptional;
   const isAlternativeGroup = nodeDatum.attributes?.isAlternativeGroup;
   const isOrGroup = nodeDatum.attributes?.isOrGroup;
+  const isCardinalityGroup = nodeDatum.attributes?.isCardinalityGroup;
+  const cardinalityGroupMin = nodeDatum.attributes?.cardinalityGroup?.min;
+  const cardinalityGroupMax = nodeDatum.attributes?.cardinalityGroup?.max == -1 ? "*" : nodeDatum.attributes?.cardinalityGroup?.max;
   const isAbstract = nodeDatum.attributes?.isAbstract;
-
-  const nodeName = nodeDatum.name;
+  const isMultifeature = nodeDatum.attributes?.isMultifeature;
+  const featureCardinalityMin = nodeDatum.attributes?.featureCardinality.min;
+  const featureCardinalityMax = nodeDatum.attributes?.featureCardinality.max == -1 ? "*" : nodeDatum.attributes?.featureCardinality.max;
+  const featureCardinality = isMultifeature ? " [" + featureCardinalityMin + ".." + featureCardinalityMax + "]" : "";
+  const isNumerical = nodeDatum.attributes?.isNumerical;
+  const isString = nodeDatum.attributes?.isString;
+  const featureType = isNumerical || isString ? " : " + nodeDatum.attributes?.featureType : "";
+
+  const nodeName = nodeDatum.name + featureCardinality + featureType;
   const defaultFontSize = 20;
 
   const [fontSize, setFontSize] = useState(defaultFontSize);
@@ -81,7 +105,7 @@ const RenderRectSvgNode = ({ nodeDatum, toggleNode }) => {
         x="0"
         y="5"
         textAnchor="middle"
-        style={{ fontSize: `${fontSize}px`, fontWeight: "lighter" }}
+        style={{ fontSize: `${fontSize}px`, fontWeight: "lighter", fontStyle: isAbstract ? "italic" : "normal" }}
       >
         {nodeName}
       </text>
@@ -103,8 +127,8 @@ const RenderRectSvgNode = ({ nodeDatum, toggleNode }) => {
       )}
 
       {/* Render arc between children if it's an alternative group */}
-      {(isAlternativeGroup || isOrGroup) && (
-        <g>{drawSemicircle(rectWidth, rectHeight, isAlternativeGroup)}</g>
+      {(isAlternativeGroup || isOrGroup || isCardinalityGroup) && (
+        <g>{drawSemicircle(rectWidth, rectHeight, isAlternativeGroup, isCardinalityGroup, cardinalityGroupMin, cardinalityGroupMax)}</g>
       )}
     </g>
   );

requirements.txt

@@ -316,10 +316,10 @@ function EditorPage({ selectedFile }) {
   };
 
   return (
-    <div className="flex flex-col h-full w-full">
+    <div className="flex-1 overflow-hidden flex flex-col">
       {/* Top Section */}
 
-      <div className="flex flex-1 p-2 gap-2">
+      <div className="flex flex-row flex-grow p-2 gap-2 overflow-auto">
         {/* Left Side Panel */}
         <TreeView
           treeData={featureTree}