@sis-cc/dotstatsuite-visions 7.20.6 → 7.20.7

package/es/Dataflow/Dataflow.js

@@ -19,11 +19,14 @@ import ExpandMore from '@material-ui/icons/ExpandMore';
 import ExpandLess from '@material-ui/icons/ExpandLess';
 import Link from '@material-ui/core/Link';
 import Divider from '@material-ui/core/Divider';
+import Tooltip from '../Tooltip/Tooltip';
 import { withBlank } from '../utils';
+import { isLast } from '../Chips/utils';
 
 var useStyles = makeStyles(function (theme) {
   return {
     card: {
+      width: '100%',
       borderBottom: '1px solid ' + theme.palette.grey[700],
       padding: theme.spacing(0, 0, 2, 0),
       '& em': {
@@ -104,10 +107,11 @@ var useStyles = makeStyles(function (theme) {
       height: '100%'
     },
     container: {
-      display: 'flex'
+      display: 'flex',
+      justifyContent: 'space-between'
     },
     mainContent: {
-      flexGrow: 1,
+      width: '95%',
       margin: theme.spacing(0, 0.5)
     },
     mutedText: {
@@ -115,6 +119,12 @@ var useStyles = makeStyles(function (theme) {
     },
     unmutedText: {
       color: theme.palette.grey[800]
+    },
+    categories: {
+      maxWidth: '100%',
+      whiteSpace: 'noWrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
     }
   };
 });
@@ -172,6 +182,7 @@ var Dataflow = function Dataflow(_ref2) {
 
   var collapsedSize = R.min(height, 70);
   var needEllipse = collapsedSize >= 70;
+  var mapIndexed = R.addIndex(R.map);
 
   return React.createElement(
     Card,
@@ -287,21 +298,37 @@ var Dataflow = function Dataflow(_ref2) {
             React.createElement(Divider, { className: classes.divider }),
             R.map(function (_ref4) {
               var field = _ref4[0],
-                  categorie = _ref4[1];
+                  values = _ref4[1];
+
               return React.createElement(
                 Typography,
-                { variant: 'body2', key: field, color: 'textSecondary' },
+                {
+                  variant: 'body2',
+                  key: field,
+                  color: 'textSecondary',
+                  className: classes.categories
+                },
                 React.createElement(
                   'strong',
                   null,
                   field,
                   ':\xA0'
                 ),
-                ' ',
                 React.createElement(
                   'span',
                   null,
-                  R.join(', ')(categorie)
+                  mapIndexed(function (category, idx) {
+                    return R.is(Array)(category) ? React.createElement(
+                      Tooltip,
+                      { title: R.join(' > ', category) },
+                      React.createElement(
+                        'span',
+                        null,
+                        ' ',
+                        '... > ' + R.last(category) + (isLast(idx, values) ? '' : ', ')
+                      )
+                    ) : '' + R.identity(category) + (isLast(idx, values) ? '' : ', ');
+                  }, values)
                 )
               );
             })(categories),

package/lib/Dataflow/Dataflow.js

@@ -70,8 +70,14 @@ var _Divider = require('@material-ui/core/Divider');
 
 var _Divider2 = _interopRequireDefault(_Divider);
 
+var _Tooltip = require('../Tooltip/Tooltip');
+
+var _Tooltip2 = _interopRequireDefault(_Tooltip);
+
 var _utils = require('../utils');
 
+var _utils2 = require('../Chips/utils');
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -81,6 +87,7 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in ob
 var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     card: {
+      width: '100%',
       borderBottom: '1px solid ' + theme.palette.grey[700],
       padding: theme.spacing(0, 0, 2, 0),
       '& em': {
@@ -161,10 +168,11 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       height: '100%'
     },
     container: {
-      display: 'flex'
+      display: 'flex',
+      justifyContent: 'space-between'
     },
     mainContent: {
-      flexGrow: 1,
+      width: '95%',
       margin: theme.spacing(0, 0.5)
     },
     mutedText: {
@@ -172,6 +180,12 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     },
     unmutedText: {
       color: theme.palette.grey[800]
+    },
+    categories: {
+      maxWidth: '100%',
+      whiteSpace: 'noWrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
     }
   };
 });
@@ -229,6 +243,7 @@ var Dataflow = function Dataflow(_ref2) {
 
   var collapsedSize = R.min(height, 70);
   var needEllipse = collapsedSize >= 70;
+  var mapIndexed = R.addIndex(R.map);
 
   return _react2.default.createElement(
     _Card2.default,
@@ -344,21 +359,37 @@ var Dataflow = function Dataflow(_ref2) {
             _react2.default.createElement(_Divider2.default, { className: classes.divider }),
             R.map(function (_ref4) {
               var field = _ref4[0],
-                  categorie = _ref4[1];
+                  values = _ref4[1];
+
               return _react2.default.createElement(
                 _Typography2.default,
-                { variant: 'body2', key: field, color: 'textSecondary' },
+                {
+                  variant: 'body2',
+                  key: field,
+                  color: 'textSecondary',
+                  className: classes.categories
+                },
                 _react2.default.createElement(
                   'strong',
                   null,
                   field,
                   ':\xA0'
                 ),
-                ' ',
                 _react2.default.createElement(
                   'span',
                   null,
-                  R.join(', ')(categorie)
+                  mapIndexed(function (category, idx) {
+                    return R.is(Array)(category) ? _react2.default.createElement(
+                      _Tooltip2.default,
+                      { title: R.join(' > ', category) },
+                      _react2.default.createElement(
+                        'span',
+                        null,
+                        ' ',
+                        '... > ' + R.last(category) + ((0, _utils2.isLast)(idx, values) ? '' : ', ')
+                      )
+                    ) : '' + R.identity(category) + ((0, _utils2.isLast)(idx, values) ? '' : ', ');
+                  }, values)
                 )
               );
             })(categories),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sis-cc/dotstatsuite-visions",
-  "version": "7.20.6",
+  "version": "7.20.7",
   "description": "Library of visual components",
   "author": "OECD",
   "homepage": "https://visions-qa.siscc.org/#o",