From ead831b29dd0fb5feaeb9ff89f5db7175fb2d686 Mon Sep 17 00:00:00 2001
From: Soaibuzzaman <soaib.safi@gmail.com>
Date: Sat, 17 Aug 2024 23:03:47 +0200
Subject: [PATCH] Fixed #9 - Alloy's subset singnature indication missing in
 instances

---
 frontend/src/assets/js/alloyUtils.js          | 37 ++++++++++++++++++-
 .../Playground/alloy/CytoscapeStylesheet.jsx  |  4 +-
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/frontend/src/assets/js/alloyUtils.js b/frontend/src/assets/js/alloyUtils.js
index bc1cb7e..a230db2 100644
--- a/frontend/src/assets/js/alloyUtils.js
+++ b/frontend/src/assets/js/alloyUtils.js
@@ -1,6 +1,7 @@
 export function getGraphData(alloyInstance) {
   const nodes = new Set();
   const edges = [];
+  const subsetSigs = new Set();
 
   function getAtomsFromSig(d) {
     function searchNestedDict(d) {
@@ -27,6 +28,21 @@ export function getGraphData(alloyInstance) {
       }
     }
     searchNestedDict(d);
+
+    // Handle Subset sigs. Issue #9
+    const varSigs = d
+      .filter(item => item.var === "yes" && item.atom)
+      .flatMap(item => {
+        const atoms = Array.isArray(item.atom) ? item.atom : [item.atom];
+        return atoms.map(atomItem => ({
+          atom: atomItem.label.replace('$', ''),  // Remove the $ symbol
+          label: item.label,
+        }));
+      });
+    varSigs.forEach(item => {
+      subsetSigs.add(item);
+    });
+
   }
 
   function processField(field) {
@@ -116,6 +132,25 @@ export function getGraphData(alloyInstance) {
 
   const nodeList = Array.from(nodes).map(node => ({ "data": { "id": node, "label": node } }));
   const elements = nodeList.concat(edges);
+
+  // Handle Subset sigs. Issue #9
+  const atomLabelMap = new Map();
+  subsetSigs.forEach(item => {
+    // Group labels by atom
+    if (atomLabelMap.has(item.atom)) {
+      atomLabelMap.get(item.atom).push(item.label);
+    } else {
+      atomLabelMap.set(item.atom, [item.label]);
+    }
+  });
+  elements.forEach(element => {
+    const id = element.data.id;
+    if (atomLabelMap.has(id)) {
+      const labels = atomLabelMap.get(id);
+      // Update the element's label by concatenating all related labels
+      element.data.label = `${id} (${labels.join(', ')})`;
+    }
+  });
   return elements;
 }
 
@@ -123,7 +158,7 @@ export function parseAlloyErrorMessage(error) {
   let message = '';
   if (error.includes('error') && error.includes('.als') && error.includes('line')) {
     message = error.replace(/ in .+\.als/, '');
-  }else if (error.includes('The required JNI library cannot be found')) {
+  } else if (error.includes('The required JNI library cannot be found')) {
     message = 'The required JNI library cannot be found.';
   } else {
     message = error;
diff --git a/frontend/src/components/Playground/alloy/CytoscapeStylesheet.jsx b/frontend/src/components/Playground/alloy/CytoscapeStylesheet.jsx
index 4f0494c..0d6de9f 100644
--- a/frontend/src/components/Playground/alloy/CytoscapeStylesheet.jsx
+++ b/frontend/src/components/Playground/alloy/CytoscapeStylesheet.jsx
@@ -31,7 +31,9 @@ const CytoscapeStylesheet = (uniqueRelationships) => {
         shape: 'roundrectangle',
         'text-valign': 'center',
         'text-halign': 'center',
-        label: 'data(label)',
+        'text-wrap': 'wrap',
+        'text-max-width': '80px', 
+        label: 'data(label)', 
       },
     },
     {