feat: compound style, desciption new switch en/fr

public/locales/en/translation.json

@@ -100,7 +100,8 @@
         "layout": "Layout",
         "title": "Settings",
         "spacingFactor": "Spacing factor",
-        "zoomLimits": "Min & max zoom"
+        "zoomLimits": "Min & max zoom",
+        "collapse": "Compound nodes collapsed (Right click to open)"
       },
       "elementData": {
         "dictKey": "Key",

public/locales/fr/translation.json

@@ -100,7 +100,8 @@
         "layout": "Agencement",
         "title": "Paramètres",
         "spacingFactor": "Espacement",
-        "zoomLimits": "Zoom min/max"
+        "zoomLimits": "Zoom min/max",
+        "collapse": "Nœuds composés réduits (Clic droit up pour l'ouvrir)"
       },
       "elementData": {
         "dictKey": "Clé",

src/views/Instance/Instance.js

@@ -93,6 +93,7 @@ const Instance = (props) => {
       title: t('commoncomponents.cytoviz.settings.title', 'Settings'),
       spacingFactor: t('commoncomponents.cytoviz.settings.spacingFactor', 'Spacing factor'),
       zoomLimits: t('commoncomponents.cytoviz.settings.zoomLimits', 'Min & max zoom'),
+      collapse: t('commoncomponents.cytoviz.settings.collapse', 'Compound nodes collapsed (Right click to open)'),
     },
     elementData: {
       dictKey: t('commoncomponents.cytoviz.elementData.dictKey', 'Key'),
@@ -118,6 +119,7 @@ const Instance = (props) => {
     maxZoom: 1,
     useCompactMode: true,
     spacingFactor: 1,
+    collapseAllCompounds: true,
   };
 
   let cytoVizPlaceholderMessage = null;

src/views/Instance/data.js

@@ -9,6 +9,8 @@ import {
   getDefaultSelectedEdgeStyle,
   getDefaultSelectedNodeStyle,
   getDefaultOutEdgeStyle,
+  getDefaultCompoundNodeStyle,
+  getDefaultCollapsedCompoundNodeStyle,
 } from './styleCytoViz';
 import { ORGANIZATION_ID, WORKSPACE_ID } from '../../config/GlobalConfiguration';
 import instanceViewData from '../../config/InstanceVisualization.js';
@@ -70,6 +72,14 @@ const _processGraphNodes = (processedData, nodesParentsDict, datasetContent, nod
       selector: `node.${nodesGroupName}:selected`,
       style: { ...getDefaultSelectedNodeStyle(theme), ...nodesGroupMetadata.style },
     });
+    processedData.stylesheet.push({
+      selector: `node.${nodesGroupName}:parent`,
+      style: { ...getDefaultCompoundNodeStyle(theme), ...nodesGroupMetadata.style },
+    });
+    processedData.stylesheet.push({
+      selector: `node.cy-expand-collapse-collapsed-node`,
+      style: { ...getDefaultCollapsedCompoundNodeStyle(theme) },
+    });
   });
 };
 

src/views/Instance/styleCytoViz.js

@@ -13,6 +13,8 @@ const EDGE_DEFAULT_COLOR = '#999999';
 const EDGE_SELECTED_COLOR = '#5b5b5b';
 const EDGE_SELECTED_WIDTH = 5;
 const EDGE_WIDTH = 2;
+// Compounds
+const COMPOUND_DEFAULT_BORDER_COLOR = '#999999';
 
 // Styles details
 export const getDefaultEdgeStyle = (theme) => ({
@@ -52,3 +54,14 @@ export const getDefaultSelectedNodeStyle = (theme) => ({
   height: NODE_SELECTED_ICON_SIZE,
   'background-blacken': -NODE_SELECTED_BLACKEN_RATIO,
 });
+
+export const getDefaultCompoundNodeStyle = (theme) => ({
+  'border-style': 'dashed',
+  'border-color': COMPOUND_DEFAULT_BORDER_COLOR,
+  'border-width': 3,
+});
+export const getDefaultCollapsedCompoundNodeStyle = (theme) => ({
+  ...getDefaultCompoundNodeStyle(theme),
+  shape: 'ellipse',
+  'border-style': 'solid',
+});