@sis-cc/dotstatsuite-visions 8.1.0 → 8.3.0

package/es/HierarchicalFilter/HierarchicalFilter.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import Container from '@material-ui/core/Container';
 import PlaylistAddCheckIcon from '@material-ui/icons/PlaylistAddCheck';
-import { ExpansionPanel, Tag as InternalTag, VerticalButton, Spotlight, VirtualizedTree } from '../';
+import { ExpansionPanel, Tag as InternalTag, VerticalButton, Spotlight, VirtualizedTree, Tooltip } from '../';
 import { withExpansionTree } from '../VirtualizedTree/withExpansionTree';
 import { withSpotlight } from '../VirtualizedTree/withSpotlight';
 import { useStyles } from '../ScopeList/styles';
@@ -83,13 +83,22 @@ var HierarchicalFilter = function HierarchicalFilter(props) {
             action: setSpotlight
           }),
           R.is(Function, toggleBulk) && hasSpotlight && React.createElement(
-            VerticalButton,
+            Tooltip,
             {
-              'aria-label': R.prop('advancedSelection')(labels),
-              classes: { root: classes.bulkSelectionIcon },
-              onClick: onAdvancedToggle
+              title: R.prop('iconLabel')(labels),
+              key: id,
+              placement: 'bottom',
+              variant: 'light'
             },
-            React.createElement(PlaylistAddCheckIcon, { color: 'primary' })
+            React.createElement(
+              VerticalButton,
+              {
+                'aria-label': R.prop('advancedSelection')(labels),
+                classes: { root: classes.bulkSelectionIcon },
+                onClick: onAdvancedToggle
+              },
+              React.createElement(PlaylistAddCheckIcon, { color: 'primary' })
+            )
           )
         )
       ),

package/es/TableHtml5/TableHtml5.js

@@ -10,6 +10,8 @@ import SubHeader from './subHeader';
 import Section from './section';
 import Cell from './cell';
 import { defaultLabelAccessor } from './utils';
+import { useMemo } from 'react';
+import { useCallback } from 'react';
 
 /*
  *  Accessibility.
@@ -24,7 +26,8 @@ var useStyles = makeStyles(function (theme) {
     table: {
       borderCollapse: 'separate',
       borderLeft: 'thin solid ' + theme.palette.grey[500],
-      borderTop: 'thin solid ' + theme.palette.grey[500]
+      borderTop: 'thin solid ' + theme.palette.grey[500],
+      padding: '0px 0px'
     },
     stickyHeader: {
       position: 'sticky',
@@ -91,6 +94,8 @@ var TableHtml5 = function TableHtml5(_ref) {
   var headerRef = useRef(null);
   var subHeadCellsRef = useRef([]);
 
+  var labelAccessorhandler = useCallback(labelAccessor, []);
+
   useEffect(function () {
     setHeaderHeight(R.pathOr(0, ['current', 'clientHeight'], headerRef));
     setSubHeadCellsWidth(getCellsWidth(R.prop('current', subHeadCellsRef)));
@@ -111,6 +116,17 @@ var TableHtml5 = function TableHtml5(_ref) {
     };
   }, []);
 
+  var xLayoutData = R.pathOr([], [0, 1, 0, 'data'], sectionsData);
+  var xLayoutDataLength = R.length(xLayoutData);
+
+  var _useMemo = useMemo(function () {
+    var valuesHeaderData = getEnhancedValuesHeaderData(headerData);
+    var nbColumnsByRows = R.map(R.length)(valuesHeaderData);
+    return { valuesHeaderData: valuesHeaderData, nbColumnsByRows: nbColumnsByRows };
+  }, [headerData]),
+      valuesHeaderData = _useMemo.valuesHeaderData,
+      nbColumnsByRows = _useMemo.nbColumnsByRows;
+
   var isSingleObs = R.hasPath(['', '', '', 0], cells);
   if (isSingleObs) return React.createElement(Cell, _extends({
     HTMLRenderer: HTMLRenderer,
@@ -120,19 +136,9 @@ var TableHtml5 = function TableHtml5(_ref) {
     isOne: true
   }));
 
-  var xLayoutData = R.pathOr([], [0, 1, 0, 'data'], sectionsData);
-  var xLayoutDataLength = R.length(xLayoutData);
-  var valuesHeaderData = getEnhancedValuesHeaderData(headerData);
-  var nbColumnsByRows = R.map(R.length)(valuesHeaderData);
   return React.createElement(
     Table,
-    {
-      className: classes.table,
-      'aria-label': 'table',
-      size: 'small',
-      style: { padding: '0px 0px' },
-      'data-testid': testId
-    },
+    { className: classes.table, 'aria-label': 'table', size: 'small', 'data-testid': testId },
     React.createElement(
       'thead',
       { ref: headerRef, className: classes.stickyHeader },
@@ -142,7 +148,7 @@ var TableHtml5 = function TableHtml5(_ref) {
         xLayoutDataLength: xLayoutDataLength,
         subHeadCellsWidth: subHeadCellsWidth,
         HTMLRenderer: HTMLRenderer,
-        labelAccessor: labelAccessor
+        labelAccessor: labelAccessorhandler
       }),
       React.createElement(SubHeader, {
         headerData: headerData,
@@ -152,12 +158,12 @@ var TableHtml5 = function TableHtml5(_ref) {
         ref: subHeadCellsRef,
         subHeadCellsWidth: subHeadCellsWidth,
         HTMLRenderer: HTMLRenderer,
-        labelAccessor: labelAccessor
+        labelAccessor: labelAccessorhandler
       })
     ),
     mapIndexed(function (section, index) {
       return React.createElement(Section, {
-        key: index,
+        key: 'section-' + index,
         sectionIndex: index,
         headerHeight: headerHeight,
         nbColumnsByRows: nbColumnsByRows,
@@ -171,7 +177,7 @@ var TableHtml5 = function TableHtml5(_ref) {
         SideIcon: SideIcon,
         subHeadCellsWidth: subHeadCellsWidth,
         HTMLRenderer: HTMLRenderer,
-        labelAccessor: labelAccessor,
+        labelAccessor: labelAccessorhandler,
         isNoWrap: isNoWrap
       });
     }, sectionsData)

package/es/TableHtml5/section.js

@@ -14,6 +14,7 @@ import Cell from './cell';
 import { getLight, getIsRtl } from '../utils';
 import { getValue } from './utils';
 import Flags from './flags';
+import { memo } from 'react';
 
 var useStyles = makeStyles(function (theme) {
   return {
@@ -222,4 +223,4 @@ Section.propTypes = process.env.NODE_ENV !== "production" ? {
   isNoWrap: PropTypes.func
 } : {};
 
-export default Section;
+export default memo(Section);

package/lib/HierarchicalFilter/HierarchicalFilter.js

@@ -111,13 +111,22 @@ var HierarchicalFilter = function HierarchicalFilter(props) {
             action: setSpotlight
           }),
           R.is(Function, toggleBulk) && hasSpotlight && _react2.default.createElement(
-            _.VerticalButton,
+            _.Tooltip,
             {
-              'aria-label': R.prop('advancedSelection')(labels),
-              classes: { root: classes.bulkSelectionIcon },
-              onClick: onAdvancedToggle
+              title: R.prop('iconLabel')(labels),
+              key: id,
+              placement: 'bottom',
+              variant: 'light'
             },
-            _react2.default.createElement(_PlaylistAddCheck2.default, { color: 'primary' })
+            _react2.default.createElement(
+              _.VerticalButton,
+              {
+                'aria-label': R.prop('advancedSelection')(labels),
+                classes: { root: classes.bulkSelectionIcon },
+                onClick: onAdvancedToggle
+              },
+              _react2.default.createElement(_PlaylistAddCheck2.default, { color: 'primary' })
+            )
           )
         )
       ),

package/lib/TableHtml5/TableHtml5.js

@@ -58,7 +58,8 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     table: {
       borderCollapse: 'separate',
       borderLeft: 'thin solid ' + theme.palette.grey[500],
-      borderTop: 'thin solid ' + theme.palette.grey[500]
+      borderTop: 'thin solid ' + theme.palette.grey[500],
+      padding: '0px 0px'
     },
     stickyHeader: {
       position: 'sticky',
@@ -125,6 +126,8 @@ var TableHtml5 = function TableHtml5(_ref) {
   var headerRef = (0, _react.useRef)(null);
   var subHeadCellsRef = (0, _react.useRef)([]);
 
+  var labelAccessorhandler = (0, _react.useCallback)(labelAccessor, []);
+
   (0, _react.useEffect)(function () {
     setHeaderHeight(R.pathOr(0, ['current', 'clientHeight'], headerRef));
     setSubHeadCellsWidth(getCellsWidth(R.prop('current', subHeadCellsRef)));
@@ -145,6 +148,17 @@ var TableHtml5 = function TableHtml5(_ref) {
     };
   }, []);
 
+  var xLayoutData = R.pathOr([], [0, 1, 0, 'data'], sectionsData);
+  var xLayoutDataLength = R.length(xLayoutData);
+
+  var _useMemo = (0, _react.useMemo)(function () {
+    var valuesHeaderData = getEnhancedValuesHeaderData(headerData);
+    var nbColumnsByRows = R.map(R.length)(valuesHeaderData);
+    return { valuesHeaderData: valuesHeaderData, nbColumnsByRows: nbColumnsByRows };
+  }, [headerData]),
+      valuesHeaderData = _useMemo.valuesHeaderData,
+      nbColumnsByRows = _useMemo.nbColumnsByRows;
+
   var isSingleObs = R.hasPath(['', '', '', 0], cells);
   if (isSingleObs) return _react2.default.createElement(_cell2.default, _extends({
     HTMLRenderer: HTMLRenderer,
@@ -154,19 +168,9 @@ var TableHtml5 = function TableHtml5(_ref) {
     isOne: true
   }));
 
-  var xLayoutData = R.pathOr([], [0, 1, 0, 'data'], sectionsData);
-  var xLayoutDataLength = R.length(xLayoutData);
-  var valuesHeaderData = getEnhancedValuesHeaderData(headerData);
-  var nbColumnsByRows = R.map(R.length)(valuesHeaderData);
   return _react2.default.createElement(
     _Table2.default,
-    {
-      className: classes.table,
-      'aria-label': 'table',
-      size: 'small',
-      style: { padding: '0px 0px' },
-      'data-testid': testId
-    },
+    { className: classes.table, 'aria-label': 'table', size: 'small', 'data-testid': testId },
     _react2.default.createElement(
       'thead',
       { ref: headerRef, className: classes.stickyHeader },
@@ -176,7 +180,7 @@ var TableHtml5 = function TableHtml5(_ref) {
         xLayoutDataLength: xLayoutDataLength,
         subHeadCellsWidth: subHeadCellsWidth,
         HTMLRenderer: HTMLRenderer,
-        labelAccessor: labelAccessor
+        labelAccessor: labelAccessorhandler
       }),
       _react2.default.createElement(_subHeader2.default, {
         headerData: headerData,
@@ -186,12 +190,12 @@ var TableHtml5 = function TableHtml5(_ref) {
         ref: subHeadCellsRef,
         subHeadCellsWidth: subHeadCellsWidth,
         HTMLRenderer: HTMLRenderer,
-        labelAccessor: labelAccessor
+        labelAccessor: labelAccessorhandler
       })
     ),
     mapIndexed(function (section, index) {
       return _react2.default.createElement(_section2.default, {
-        key: index,
+        key: 'section-' + index,
         sectionIndex: index,
         headerHeight: headerHeight,
         nbColumnsByRows: nbColumnsByRows,
@@ -205,7 +209,7 @@ var TableHtml5 = function TableHtml5(_ref) {
         SideIcon: SideIcon,
         subHeadCellsWidth: subHeadCellsWidth,
         HTMLRenderer: HTMLRenderer,
-        labelAccessor: labelAccessor,
+        labelAccessor: labelAccessorhandler,
         isNoWrap: isNoWrap
       });
     }, sectionsData)

package/lib/TableHtml5/section.js

@@ -265,5 +265,5 @@ Section.propTypes = process.env.NODE_ENV !== "production" ? {
   isNoWrap: _propTypes2.default.func
 } : {};
 
-exports.default = Section;
+exports.default = (0, _react.memo)(Section);
 module.exports = exports['default'];

package/package.json

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