@sis-cc/dotstatsuite-visions 7.10.0 → 7.11.1

package/es/Dataflow/Dataflow.js

@@ -6,6 +6,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import cx from 'classnames';
+import useSize from '@react-hook/size';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Collapse from '@material-ui/core/Collapse';
@@ -86,20 +87,17 @@ var useStyles = makeStyles(function (theme) {
       margin: theme.spacing(0.5, 0.5)
     },
     fadeContent: {
-      maxHeight: 70,
       color: theme.palette.grey['A200'],
       position: 'relative',
       overflow: 'hidden'
     },
     fading: {
       position: 'absolute',
-      bottom: 0,
       left: 0,
-      width: '100%',
+      right: 0,
       height: 15,
-      textAlign: 'center',
       margin: 0,
-      padding: theme.spacing(0, 0.5, 0.5, 0.5),
+      padding: 0,
       backgroundImage: 'linear-gradient(to bottom, transparent, white)'
     },
     wrapper: {
@@ -161,6 +159,20 @@ var Dataflow = function Dataflow(_ref2) {
 
   var description = R.propOr('', 'description', body);
 
+  var target = React.useRef();
+
+  var _useSize = useSize(target),
+      height = _useSize[1];
+
+  var handleExpand = function handleExpand() {
+    setExpand(function (prev) {
+      return !prev;
+    });
+  };
+
+  //const collapsedSize = R.min(!isExpanded ? height : !collapsedSize ? height : collapsedSize, 70);
+  var collapsedSize = R.min(height, 70);
+
   return React.createElement(
     Card,
     { elevation: 0, square: true, className: classes.card, 'data-testid': '' + testId },
@@ -196,12 +208,13 @@ var Dataflow = function Dataflow(_ref2) {
           Collapse,
           {
             'in': isExpanded,
-            collapsedSize: 70,
+            collapsedSize: collapsedSize,
             classes: isExpanded ? undefined : { wrapper: classes.wrapper }
           },
           React.createElement(
             CardContent,
             {
+              ref: target,
               className: cx(classes.cardContent, (_cx = {}, _cx[classes.fadeContent] = !isExpanded, _cx))
             },
             React.createElement(
@@ -213,7 +226,7 @@ var Dataflow = function Dataflow(_ref2) {
               },
               React.createElement(HTMLRenderer, { html: description })
             ),
-            !isExpanded && React.createElement('div', { className: classes.fading })
+            !isExpanded && React.createElement('div', { className: classes.fading, style: { top: collapsedSize - 15 } })
           )
         ),
         R.not(R.empty(R.propOr('', 'highlightDescription')(body))) && React.createElement(
@@ -346,9 +359,7 @@ var Dataflow = function Dataflow(_ref2) {
               'data-testid': 'dataflow-expand-button-test-id',
               'aria-label': 'expand',
               onClick: function onClick() {
-                return setExpand(function (prev) {
-                  return !prev;
-                });
+                return handleExpand();
               },
               color: 'primary',
               size: 'small'

package/es/Dataflow/index.js

@@ -1,6 +1,4 @@
 /**
- * Dataflow
- *
  * Without onDownload the button download will disappear
  *
  * @demoReady

package/es/ScopeList/Item.js

@@ -54,7 +54,8 @@ var Item = function Item(_ref) {
       accessibility = _ref.accessibility,
       index = _ref.index,
       labelRenderer = _ref.labelRenderer,
-      HTMLRenderer = _ref.HTMLRenderer;
+      HTMLRenderer = _ref.HTMLRenderer,
+      hierarchicalId = _ref.hierarchicalId;
 
   var _React$useState = React.useState(false),
       isTooltipShown = _React$useState[0],
@@ -171,7 +172,7 @@ var Item = function Item(_ref) {
         className: classes.containerArrow,
         tabIndex: 0,
         onClick: function onClick() {
-          return changeList(id);
+          return changeList(hierarchicalId || id);
         },
         onKeyPress: function onKeyPress(e) {
           if (e.key === 'Enter') {
@@ -232,7 +233,8 @@ Item.propTypes = process.env.NODE_ENV !== "production" ? {
   accessibility: PropTypes.bool,
   index: PropTypes.number,
   labelRenderer: PropTypes.func,
-  HTMLRenderer: PropTypes.func
+  HTMLRenderer: PropTypes.func,
+  hierarchicalId: PropTypes.string
 } : {};
 
 export default Item;

package/es/ScopeList/with-scope-list.js

@@ -85,7 +85,7 @@ export var getPlaceholder = function getPlaceholder(_ref2) {
 //----------------------------------------------------------------------------------------------List
 export var withHasChild = function withHasChild(itemsByParentId) {
   return function (item) {
-    return R.assoc('hasChild', R.pipe(R.prop(item.id), R.isNil, R.not)(itemsByParentId))(item);
+    return R.assoc('hasChild', R.pipe(R.prop(item.hierarchicalId || item.id), R.isNil, R.not)(itemsByParentId))(item);
   };
 };
 export var getCurrentList = function getCurrentList(_ref3) {
@@ -110,7 +110,7 @@ export var getList = function getList(_ref4) {
       hasPath = _ref4.hasPath,
       displayAccessor = _ref4.displayAccessor;
 
-  var currentItemId = currentItem ? R.prop('id')(currentItem) : null;
+  var currentItemId = currentItem ? currentItem.hierarchicalId || currentItem.id : null;
   if (R.or(R.isEmpty(term), R.isNil(R.prop('defaultSpotlight')(topElementProps)))) {
     var itemsByParentIdDisplayed = getItemsIndexedByParentId(displayAccessor)(items);
     if (R.isNil(currentItemId)) return R.pipe(getMainList, R.map(function (item) {
@@ -270,7 +270,7 @@ export var withScopeList = function withScopeList(Component) {
         isMousePreSelection: false,
         applyToShiftSelected: R.identity
       }, _this.changeList = function (id) {
-        return _this.setState({ currentItem: R.prop(id)(_this.state.itemsById), term: '' });
+        return _this.setState({ currentItem: R.prop(id)(_this.state.itemsByHierarchicalId), term: '' });
       }, _this.changeSelection = function (panelId) {
         return function (id) {
           return function (event) {
@@ -416,6 +416,7 @@ export var withScopeList = function withScopeList(Component) {
             term = _this$state.term,
             itemsByParentId = _this$state.itemsByParentId,
             itemsById = _this$state.itemsById,
+            itemsByHierarchicalId = _this$state.itemsByHierarchicalId,
             shiftSelection = _this$state.shiftSelection,
             ctrlSelection = _this$state.ctrlSelection,
             mouseSelection = _this$state.mouseSelection,
@@ -426,6 +427,7 @@ export var withScopeList = function withScopeList(Component) {
           items: items,
           itemsByParentId: itemsByParentId,
           itemsById: itemsById,
+          itemsByHierarchicalId: itemsByHierarchicalId,
           topElementProps: topElementProps,
           currentItem: currentItem,
           term: term,
@@ -445,7 +447,7 @@ export var withScopeList = function withScopeList(Component) {
             isActivePanel: isActivePanel,
             currentItem: currentItem,
             items: items,
-            itemsById: itemsById,
+            itemsById: itemsByHierarchicalId,
             hasPath: hasPath
           }),
           action: _this.changeSpotlight,
@@ -480,6 +482,9 @@ export var withScopeList = function withScopeList(Component) {
   }(React.Component), _class.getDerivedStateFromProps = function (props, state) {
     return _extends({}, state, {
       itemsById: R.indexBy(R.prop('id'), props.items),
+      itemsByHierarchicalId: R.indexBy(function (item) {
+        return item.hierarchicalId || item.id;
+      }, props.items),
       itemsByParentId: getItemsIndexedByParentId(props.displayAccessor)(props.items) // only use for hasChild, same keys are overide
     });
   }, _temp2;

package/es/TableHtml5/section.js

@@ -94,21 +94,21 @@ var Section = function Section(_ref) {
       SideIcon: SideIcon,
       HTMLRenderer: HTMLRenderer
     }),
-    R.map(function (sectionbody) {
+    R.addIndex(R.map)(function (sectionbody, rowIndex) {
       var _cx2;
 
-      var rowId = sectionbody.key + '_' + sectionIndex;
+      var rowId = sectionbody.key + '_' + sectionIndex + '_' + rowIndex;
       var rowIds = R.pipe(R.map(function (index) {
         return sectionbody.key + '_' + sectionIndex + '_' + index;
       }), R.join(' '))(R.times(R.identity, R.length(R.prop('data', sectionbody))));
       return React.createElement(
         TableRow,
-        { key: sectionbody.key },
+        { key: rowId },
         mapIndexed(function (cell, index) {
           var _cx;
 
           var flags = R.path(['value', 'flags'], cell);
-          var id = rowId + '_' + index;
+          var id = rowIndex + '_' + rowId + '_' + index;
 
           // special space is used for hierarchy U+2007    
           var hierarchySpace = R.pipe(R.pathOr([], ['value', 'parents']), R.when(R.isNil, R.always([])), R.length,
@@ -165,9 +165,8 @@ var Section = function Section(_ref) {
 
           var intersectionCellId = rowId + '/' + columnIndex;
           var isActive = R.pipe(R.propOr({}, 'intersectionCellId'), R.equals(intersectionCellId))(activeCellIds);
-          return React.createElement(Cell, _extends({
-            key: intersectionCellId
-          }, R.pathOr({ value: '..' }, [item.key, currentSection, sectionbody.key, 0], cells), {
+          return React.createElement(Cell, _extends({}, R.pathOr({ value: '..' }, [item.key, currentSection, sectionbody.key, 0], cells), {
+            key: intersectionCellId,
             headers: rowIds + ' ' + columnIds + ' ' + currentSection,
             cellHandler: cellHandler,
             HTMLRenderer: HTMLRenderer,

package/lib/Dataflow/Dataflow.js

@@ -20,6 +20,10 @@ var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
+var _size = require('@react-hook/size');
+
+var _size2 = _interopRequireDefault(_size);
+
 var _styles = require('@material-ui/core/styles');
 
 var _Typography = require('@material-ui/core/Typography');
@@ -140,20 +144,17 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       margin: theme.spacing(0.5, 0.5)
     },
     fadeContent: {
-      maxHeight: 70,
       color: theme.palette.grey['A200'],
       position: 'relative',
       overflow: 'hidden'
     },
     fading: {
       position: 'absolute',
-      bottom: 0,
       left: 0,
-      width: '100%',
+      right: 0,
       height: 15,
-      textAlign: 'center',
       margin: 0,
-      padding: theme.spacing(0, 0.5, 0.5, 0.5),
+      padding: 0,
       backgroundImage: 'linear-gradient(to bottom, transparent, white)'
     },
     wrapper: {
@@ -215,6 +216,20 @@ var Dataflow = function Dataflow(_ref2) {
 
   var description = R.propOr('', 'description', body);
 
+  var target = _react2.default.useRef();
+
+  var _useSize = (0, _size2.default)(target),
+      height = _useSize[1];
+
+  var handleExpand = function handleExpand() {
+    setExpand(function (prev) {
+      return !prev;
+    });
+  };
+
+  //const collapsedSize = R.min(!isExpanded ? height : !collapsedSize ? height : collapsedSize, 70);
+  var collapsedSize = R.min(height, 70);
+
   return _react2.default.createElement(
     _Card2.default,
     { elevation: 0, square: true, className: classes.card, 'data-testid': '' + testId },
@@ -250,12 +265,13 @@ var Dataflow = function Dataflow(_ref2) {
           _Collapse2.default,
           {
             'in': isExpanded,
-            collapsedSize: 70,
+            collapsedSize: collapsedSize,
             classes: isExpanded ? undefined : { wrapper: classes.wrapper }
           },
           _react2.default.createElement(
             _CardContent2.default,
             {
+              ref: target,
               className: (0, _classnames2.default)(classes.cardContent, (_cx = {}, _cx[classes.fadeContent] = !isExpanded, _cx))
             },
             _react2.default.createElement(
@@ -267,7 +283,7 @@ var Dataflow = function Dataflow(_ref2) {
               },
               _react2.default.createElement(HTMLRenderer, { html: description })
             ),
-            !isExpanded && _react2.default.createElement('div', { className: classes.fading })
+            !isExpanded && _react2.default.createElement('div', { className: classes.fading, style: { top: collapsedSize - 15 } })
           )
         ),
         R.not(R.empty(R.propOr('', 'highlightDescription')(body))) && _react2.default.createElement(
@@ -400,9 +416,7 @@ var Dataflow = function Dataflow(_ref2) {
               'data-testid': 'dataflow-expand-button-test-id',
               'aria-label': 'expand',
               onClick: function onClick() {
-                return setExpand(function (prev) {
-                  return !prev;
-                });
+                return handleExpand();
               },
               color: 'primary',
               size: 'small'

package/lib/ScopeList/Item.js

@@ -92,7 +92,8 @@ var Item = function Item(_ref) {
       accessibility = _ref.accessibility,
       index = _ref.index,
       labelRenderer = _ref.labelRenderer,
-      HTMLRenderer = _ref.HTMLRenderer;
+      HTMLRenderer = _ref.HTMLRenderer,
+      hierarchicalId = _ref.hierarchicalId;
 
   var _React$useState = _react2.default.useState(false),
       isTooltipShown = _React$useState[0],
@@ -209,7 +210,7 @@ var Item = function Item(_ref) {
         className: classes.containerArrow,
         tabIndex: 0,
         onClick: function onClick() {
-          return changeList(id);
+          return changeList(hierarchicalId || id);
         },
         onKeyPress: function onKeyPress(e) {
           if (e.key === 'Enter') {
@@ -270,7 +271,8 @@ Item.propTypes = process.env.NODE_ENV !== "production" ? {
   accessibility: _propTypes2.default.bool,
   index: _propTypes2.default.number,
   labelRenderer: _propTypes2.default.func,
-  HTMLRenderer: _propTypes2.default.func
+  HTMLRenderer: _propTypes2.default.func,
+  hierarchicalId: _propTypes2.default.string
 } : {};
 
 exports.default = Item;

package/lib/ScopeList/with-scope-list.js

@@ -100,7 +100,7 @@ var getPlaceholder = exports.getPlaceholder = function getPlaceholder(_ref2) {
 //----------------------------------------------------------------------------------------------List
 var withHasChild = exports.withHasChild = function withHasChild(itemsByParentId) {
   return function (item) {
-    return R.assoc('hasChild', R.pipe(R.prop(item.id), R.isNil, R.not)(itemsByParentId))(item);
+    return R.assoc('hasChild', R.pipe(R.prop(item.hierarchicalId || item.id), R.isNil, R.not)(itemsByParentId))(item);
   };
 };
 var getCurrentList = exports.getCurrentList = function getCurrentList(_ref3) {
@@ -125,7 +125,7 @@ var getList = exports.getList = function getList(_ref4) {
       hasPath = _ref4.hasPath,
       displayAccessor = _ref4.displayAccessor;
 
-  var currentItemId = currentItem ? R.prop('id')(currentItem) : null;
+  var currentItemId = currentItem ? currentItem.hierarchicalId || currentItem.id : null;
   if (R.or(R.isEmpty(term), R.isNil(R.prop('defaultSpotlight')(topElementProps)))) {
     var itemsByParentIdDisplayed = getItemsIndexedByParentId(displayAccessor)(items);
     if (R.isNil(currentItemId)) return R.pipe(getMainList, R.map(function (item) {
@@ -285,7 +285,7 @@ var withScopeList = exports.withScopeList = function withScopeList(Component) {
         isMousePreSelection: false,
         applyToShiftSelected: R.identity
       }, _this.changeList = function (id) {
-        return _this.setState({ currentItem: R.prop(id)(_this.state.itemsById), term: '' });
+        return _this.setState({ currentItem: R.prop(id)(_this.state.itemsByHierarchicalId), term: '' });
       }, _this.changeSelection = function (panelId) {
         return function (id) {
           return function (event) {
@@ -431,6 +431,7 @@ var withScopeList = exports.withScopeList = function withScopeList(Component) {
             term = _this$state.term,
             itemsByParentId = _this$state.itemsByParentId,
             itemsById = _this$state.itemsById,
+            itemsByHierarchicalId = _this$state.itemsByHierarchicalId,
             shiftSelection = _this$state.shiftSelection,
             ctrlSelection = _this$state.ctrlSelection,
             mouseSelection = _this$state.mouseSelection,
@@ -441,6 +442,7 @@ var withScopeList = exports.withScopeList = function withScopeList(Component) {
           items: items,
           itemsByParentId: itemsByParentId,
           itemsById: itemsById,
+          itemsByHierarchicalId: itemsByHierarchicalId,
           topElementProps: topElementProps,
           currentItem: currentItem,
           term: term,
@@ -460,7 +462,7 @@ var withScopeList = exports.withScopeList = function withScopeList(Component) {
             isActivePanel: isActivePanel,
             currentItem: currentItem,
             items: items,
-            itemsById: itemsById,
+            itemsById: itemsByHierarchicalId,
             hasPath: hasPath
           }),
           action: _this.changeSpotlight,
@@ -495,6 +497,9 @@ var withScopeList = exports.withScopeList = function withScopeList(Component) {
   }(_react2.default.Component), _class.getDerivedStateFromProps = function (props, state) {
     return _extends({}, state, {
       itemsById: R.indexBy(R.prop('id'), props.items),
+      itemsByHierarchicalId: R.indexBy(function (item) {
+        return item.hierarchicalId || item.id;
+      }, props.items),
       itemsByParentId: getItemsIndexedByParentId(props.displayAccessor)(props.items) // only use for hasChild, same keys are overide
     });
   }, _temp2;

package/lib/TableHtml5/section.js

@@ -136,21 +136,21 @@ var Section = function Section(_ref) {
       SideIcon: SideIcon,
       HTMLRenderer: HTMLRenderer
     }),
-    R.map(function (sectionbody) {
+    R.addIndex(R.map)(function (sectionbody, rowIndex) {
       var _cx2;
 
-      var rowId = sectionbody.key + '_' + sectionIndex;
+      var rowId = sectionbody.key + '_' + sectionIndex + '_' + rowIndex;
       var rowIds = R.pipe(R.map(function (index) {
         return sectionbody.key + '_' + sectionIndex + '_' + index;
       }), R.join(' '))(R.times(R.identity, R.length(R.prop('data', sectionbody))));
       return _react2.default.createElement(
         _TableRow2.default,
-        { key: sectionbody.key },
+        { key: rowId },
         mapIndexed(function (cell, index) {
           var _cx;
 
           var flags = R.path(['value', 'flags'], cell);
-          var id = rowId + '_' + index;
+          var id = rowIndex + '_' + rowId + '_' + index;
 
           // special space is used for hierarchy U+2007    
           var hierarchySpace = R.pipe(R.pathOr([], ['value', 'parents']), R.when(R.isNil, R.always([])), R.length,
@@ -207,9 +207,8 @@ var Section = function Section(_ref) {
 
           var intersectionCellId = rowId + '/' + columnIndex;
           var isActive = R.pipe(R.propOr({}, 'intersectionCellId'), R.equals(intersectionCellId))(activeCellIds);
-          return _react2.default.createElement(_cell2.default, _extends({
-            key: intersectionCellId
-          }, R.pathOr({ value: '..' }, [item.key, currentSection, sectionbody.key, 0], cells), {
+          return _react2.default.createElement(_cell2.default, _extends({}, R.pathOr({ value: '..' }, [item.key, currentSection, sectionbody.key, 0], cells), {
+            key: intersectionCellId,
             headers: rowIds + ' ' + columnIds + ' ' + currentSection,
             cellHandler: cellHandler,
             HTMLRenderer: HTMLRenderer,

package/package.json

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