From 9b10ac4e4685c1b9cac6eb9e283792881e30be7c Mon Sep 17 00:00:00 2001
From: Oskar Howe <oskar.howe@cosmotech.com>
Date: Thu, 11 Aug 2022 15:33:05 +0200
Subject: [PATCH] feat: compound style, desciption new switch en/fr, new
 setting: collapseAll

---
 public/locales/en/translation.json |  3 ++-
 public/locales/fr/translation.json |  3 ++-
 src/views/Instance/Instance.js     |  2 ++
 src/views/Instance/data.js         | 10 ++++++++++
 src/views/Instance/styleCytoViz.js | 13 +++++++++++++
 5 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 4bd2b800f..4587752a8 100644
--- a/public/locales/en/translation.json
+++ b/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",
diff --git a/public/locales/fr/translation.json b/public/locales/fr/translation.json
index 6da506249..39e040ccf 100644
--- a/public/locales/fr/translation.json
+++ b/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é",
diff --git a/src/views/Instance/Instance.js b/src/views/Instance/Instance.js
index 3d3595a03..8460c109f 100644
--- a/src/views/Instance/Instance.js
+++ b/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;
diff --git a/src/views/Instance/data.js b/src/views/Instance/data.js
index 765b65ad4..5ef8c7b41 100644
--- a/src/views/Instance/data.js
+++ b/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) },
+    });
   });
 };
 
diff --git a/src/views/Instance/styleCytoViz.js b/src/views/Instance/styleCytoViz.js
index 98c2bf48c..c65ae720f 100644
--- a/src/views/Instance/styleCytoViz.js
+++ b/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',
+});