@sis-cc/dotstatsuite-visions 7.0.0 → 7.1.0

package/es/DataHeader/DataHeader.js

@@ -15,6 +15,7 @@ import Flags from './Flags';
 import TooltipHeader from './TooltipHeader';
 import { getReducedContent } from './utils';
 import { Tooltip, Warning as WarningIcon } from '../';
+import InfoIcon from '../InfoIcon/InfoIcon';
 
 var useStyles = makeStyles(function (theme) {
   return {
@@ -97,13 +98,33 @@ var useStyles = makeStyles(function (theme) {
   };
 });
 
-var DataHeader = function DataHeader(_ref4) {
-  var children = _ref4.children,
-      title = _ref4.title,
-      _ref4$subtitle = _ref4.subtitle,
-      subtitle = _ref4$subtitle === undefined ? [] : _ref4$subtitle,
-      uprs = _ref4.uprs,
-      disclaimer = _ref4.disclaimer;
+var SideIcon = function SideIcon(_ref4) {
+  var sideProps = _ref4.sideProps,
+      sideToggle = _ref4.sideToggle;
+
+  if (R.isNil(sideProps) || !R.is(Function, sideToggle)) {
+    return null;
+  }
+  var isSelected = R.propOr(false, 'isSelected', sideProps);
+  return React.createElement(InfoIcon, { onClick: function onClick() {
+      return sideToggle(sideProps);
+    }, isSelected: isSelected });
+};
+
+SideIcon.propTypes = process.env.NODE_ENV !== "production" ? {
+  sideProps: PropTypes.object,
+  sideToggle: PropTypes.func
+} : {};
+
+var DataHeader = function DataHeader(_ref5) {
+  var children = _ref5.children,
+      title = _ref5.title,
+      _ref5$subtitle = _ref5.subtitle,
+      subtitle = _ref5$subtitle === undefined ? [] : _ref5$subtitle,
+      uprs = _ref5.uprs,
+      disclaimer = _ref5.disclaimer,
+      sideProps = _ref5.sideProps,
+      sideToggle = _ref5.sideToggle;
 
   var target = React.useRef(null);
 
@@ -186,6 +207,7 @@ var DataHeader = function DataHeader(_ref4) {
     React.createElement(
       'div',
       { className: classes.children },
+      React.createElement(SideIcon, { sideProps: sideProps, sideToggle: sideToggle }),
       R.not(R.isEmpty(reducedContent)) && React.createElement(
         TooltipHeader,
         { classes: classes, content: reducedContent },
@@ -222,6 +244,8 @@ DataHeader.propTypes = process.env.NODE_ENV !== "production" ? {
     header: PropTypes.string,
     label: PropTypes.string
   }),
+  sideProps: PropTypes.object,
+  sideToggle: PropTypes.func,
   disclaimer: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   children: PropTypes.node
 } : {};

package/es/InfoIcon/InfoIcon.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core/styles';
+import MuiInfoIcon from '@material-ui/icons//Info';
+import IconButton from '@material-ui/core/IconButton';
+
+var useStyles = makeStyles(function (theme) {
+  return {
+    icon: {
+      color: function color(_ref) {
+        var isSelected = _ref.isSelected;
+        return isSelected ? theme.palette.highlight.hl1 : theme.palette.primary.main;
+      },
+      padding: 0
+    }
+  };
+});
+
+var InfoIcon = function InfoIcon(_ref2) {
+  var onClick = _ref2.onClick,
+      _ref2$isSelected = _ref2.isSelected,
+      isSelected = _ref2$isSelected === undefined ? false : _ref2$isSelected;
+
+  var classes = useStyles({ isSelected: isSelected });
+  return React.createElement(
+    IconButton,
+    { size: 'small', className: classes.icon, onClick: onClick, 'data-testid': 'ref-md-info' },
+    React.createElement(MuiInfoIcon, { fontSize: 'small' })
+  );
+};
+
+InfoIcon.propTypes = process.env.NODE_ENV !== "production" ? {
+  onClick: PropTypes.func.isRequired,
+  isSelected: PropTypes.bool
+} : {};
+
+export default InfoIcon;

package/es/TableHtml5/TableHtml5.js

@@ -70,6 +70,7 @@ var TableHtml5 = function TableHtml5(_ref) {
       activeCellIds = _ref.activeCellIds,
       activeCellHandler = _ref.activeCellHandler,
       sideToggle = _ref.sideToggle,
+      selectedSideCoord = _ref.selectedSideCoord,
       _ref$testId = _ref.testId,
       testId = _ref$testId === undefined ? 'vis-table' : _ref$testId;
 
@@ -136,6 +137,7 @@ var TableHtml5 = function TableHtml5(_ref) {
         xLayoutData: xLayoutData,
         activeCellIds: activeCellIds,
         sideToggle: sideToggle,
+        selectedSideCoord: selectedSideCoord,
         ref: subHeadCellsRef,
         subHeadCellsWidth: subHeadCellsWidth
       })
@@ -154,6 +156,7 @@ var TableHtml5 = function TableHtml5(_ref) {
         activeCellIds: activeCellIds,
         activeCellHandler: activeCellHandler,
         sideToggle: sideToggle,
+        selectedSideCoord: selectedSideCoord,
         subHeadCellsWidth: subHeadCellsWidth
       });
     }, sectionsData)
@@ -168,6 +171,7 @@ TableHtml5.propTypes = process.env.NODE_ENV !== "production" ? {
   activeCellHandler: PropTypes.func,
   activeCellIds: PropTypes.object,
   sideToggle: PropTypes.func,
+  selectedSideCoord: PropTypes.object,
   testId: PropTypes.string
 } : {};
 

package/es/TableHtml5/index.js

@@ -13,6 +13,7 @@
  *   cellHandler: PropTypes.func,
  *   activeCellHandler: PropTypes.func,
  *   activeCellIds: PropTypes.string,
+ *   selectedSideCoord: PropTypes.object,
  * };
  * @theme
  * {

package/es/TableHtml5/section.js

@@ -72,6 +72,7 @@ var Section = function Section(_ref) {
       sectionIndex = _ref.sectionIndex,
       nbColumnsByRows = _ref.nbColumnsByRows,
       sideToggle = _ref.sideToggle,
+      selectedSideCoord = _ref.selectedSideCoord,
       subHeadCellsWidth = _ref.subHeadCellsWidth;
 
   var classes = useStyles();
@@ -90,7 +91,8 @@ var Section = function Section(_ref) {
       currentSection: currentSection,
       xLayoutDataLength: xLayoutDataLength,
       headerHeight: headerHeight,
-      sideToggle: sideToggle
+      sideToggle: sideToggle,
+      selectedSideCoord: selectedSideCoord
     }),
     R.map(function (sectionbody) {
       var _cx2;
@@ -151,7 +153,11 @@ var Section = function Section(_ref) {
           React.createElement(
             'div',
             { className: classes.flagContainer },
-            React.createElement(SideIcon, { sideProps: R.prop('sideProps', sectionbody), sideToggle: sideToggle }),
+            React.createElement(SideIcon, {
+              sideProps: R.prop('sideProps', sectionbody),
+              sideToggle: sideToggle,
+              selectedSideCoord: selectedSideCoord
+            }),
             React.createElement(Flags, { flags: R.prop('flags', sectionbody) })
           )
         ),
@@ -197,6 +203,7 @@ Section.propTypes = process.env.NODE_ENV !== "production" ? {
   nbColumnsByRows: PropTypes.array,
   maxColumns: PropTypes.number,
   sideToggle: PropTypes.func,
+  selectedSideCoord: PropTypes.object,
   subHeadCellsWidth: PropTypes.arrayOf(PropTypes.number)
 } : {};
 

package/es/TableHtml5/sectionHeader.js

@@ -42,9 +42,6 @@ var useStyles = makeStyles(function (theme) {
     containerTextSection: {
       display: 'flex',
       alignItems: 'center'
-    },
-    flag: {
-      height: 0
     }
   };
 });
@@ -56,7 +53,8 @@ var SectionHeader = function SectionHeader(_ref) {
       currentSection = _ref.currentSection,
       xLayoutDataLength = _ref.xLayoutDataLength,
       headerHeight = _ref.headerHeight,
-      sideToggle = _ref.sideToggle;
+      sideToggle = _ref.sideToggle,
+      selectedSideCoord = _ref.selectedSideCoord;
 
   var classes = useStyles();
   if (R.compose(R.anyPass([R.isNil, R.isEmpty]), R.path([0, 'data']))(section)) return null;
@@ -110,8 +108,12 @@ var SectionHeader = function SectionHeader(_ref) {
         ),
         React.createElement(
           'div',
-          { className: classes.flag },
-          React.createElement(SideIcon, { sideProps: R.path([0, 'sideProps'], section), sideToggle: sideToggle }),
+          null,
+          React.createElement(SideIcon, {
+            sideProps: R.path([0, 'sideProps'], section),
+            sideToggle: sideToggle,
+            selectedSideCoord: selectedSideCoord
+          }),
           React.createElement(Flags, { flags: R.path([0, 'flags'], section) })
         )
       )
@@ -125,7 +127,8 @@ SectionHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   currentSection: PropTypes.string,
   xLayoutDataLength: PropTypes.number,
   headerHeight: PropTypes.number,
-  sideToggle: PropTypes.func
+  sideToggle: PropTypes.func,
+  selectedSideCoord: PropTypes.object
 } : {};
 
 export default SectionHeader;

package/es/TableHtml5/sideIcon.js

@@ -1,42 +1,24 @@
 import React from 'react';
 import * as R from 'ramda';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
-import InfoIcon from '@material-ui/icons//Info';
-import IconButton from '@material-ui/core/IconButton';
-
-var useStyles = makeStyles(function (theme) {
-  return {
-    icon: {
-      color: theme.palette.primary.main,
-      padding: 0
-    }
-  };
-});
+import InfoIcon from '../InfoIcon/InfoIcon';
 
 var SideIcon = function SideIcon(_ref) {
   var sideProps = _ref.sideProps,
-      sideToggle = _ref.sideToggle;
+      sideToggle = _ref.sideToggle,
+      selectedSideCoord = _ref.selectedSideCoord;
 
-  var classes = useStyles();
   if (R.isNil(sideProps) || !R.is(Function, sideToggle)) {
     return null;
   }
-  return React.createElement(
-    IconButton,
-    {
-      size: 'small',
-      className: classes.icon,
-      onClick: function onClick() {
-        return sideToggle(sideProps);
-      },
-      'data-testid': 'ref-md-info'
-    },
-    React.createElement(InfoIcon, { fontSize: 'small' })
-  );
+  var isSelected = R.equals(sideProps.coordinates, selectedSideCoord);
+  return React.createElement(InfoIcon, { onClick: function onClick() {
+      return sideToggle(sideProps);
+    }, isSelected: isSelected });
 };
 
 SideIcon.propTypes = process.env.NODE_ENV !== "production" ? {
+  selectedSideCoord: PropTypes.object,
   sideProps: PropTypes.object,
   sideToggle: PropTypes.func
 } : {};

package/es/TableHtml5/subHeader.js

@@ -52,7 +52,8 @@ var SubHeader = React.forwardRef(function (_ref, refs) {
       xLayoutData = _ref.xLayoutData,
       activeCellIds = _ref.activeCellIds,
       subHeadCellsWidth = _ref.subHeadCellsWidth,
-      sideToggle = _ref.sideToggle;
+      sideToggle = _ref.sideToggle,
+      selectedSideCoord = _ref.selectedSideCoord;
 
   var classes = useStyles();
   var theme = useTheme();
@@ -98,7 +99,11 @@ var SubHeader = React.forwardRef(function (_ref, refs) {
           key: index,
           className: cx(classes.fillerCell, (_cx = {}, _cx[classes.highlight] = R.prop(index)(activeCellIds), _cx))
         },
-        React.createElement(SideIcon, { sideProps: R.prop('sideProps', item), sideToggle: sideToggle }),
+        React.createElement(SideIcon, {
+          sideProps: R.prop('sideProps', item),
+          sideToggle: sideToggle,
+          selectedSideCoord: selectedSideCoord
+        }),
         React.createElement(Flags, { flags: R.prop('flags', item) })
       );
     }, headerData)
@@ -110,6 +115,7 @@ SubHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   headerData: PropTypes.array,
   xLayoutData: PropTypes.array,
   sideToggle: PropTypes.func,
+  selectedSideCoord: PropTypes.object,
   subHeadCellsWidth: PropTypes.arrayOf(PropTypes.number)
 } : {};
 

package/lib/DataHeader/DataHeader.js

@@ -52,6 +52,10 @@ var _utils = require('./utils');
 
 var _ = require('../');
 
+var _InfoIcon = require('../InfoIcon/InfoIcon');
+
+var _InfoIcon2 = _interopRequireDefault(_InfoIcon);
+
 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 }; }
@@ -137,13 +141,33 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
   };
 });
 
-var DataHeader = function DataHeader(_ref4) {
-  var children = _ref4.children,
-      title = _ref4.title,
-      _ref4$subtitle = _ref4.subtitle,
-      subtitle = _ref4$subtitle === undefined ? [] : _ref4$subtitle,
-      uprs = _ref4.uprs,
-      disclaimer = _ref4.disclaimer;
+var SideIcon = function SideIcon(_ref4) {
+  var sideProps = _ref4.sideProps,
+      sideToggle = _ref4.sideToggle;
+
+  if (R.isNil(sideProps) || !R.is(Function, sideToggle)) {
+    return null;
+  }
+  var isSelected = R.propOr(false, 'isSelected', sideProps);
+  return _react2.default.createElement(_InfoIcon2.default, { onClick: function onClick() {
+      return sideToggle(sideProps);
+    }, isSelected: isSelected });
+};
+
+SideIcon.propTypes = process.env.NODE_ENV !== "production" ? {
+  sideProps: _propTypes2.default.object,
+  sideToggle: _propTypes2.default.func
+} : {};
+
+var DataHeader = function DataHeader(_ref5) {
+  var children = _ref5.children,
+      title = _ref5.title,
+      _ref5$subtitle = _ref5.subtitle,
+      subtitle = _ref5$subtitle === undefined ? [] : _ref5$subtitle,
+      uprs = _ref5.uprs,
+      disclaimer = _ref5.disclaimer,
+      sideProps = _ref5.sideProps,
+      sideToggle = _ref5.sideToggle;
 
   var target = _react2.default.useRef(null);
 
@@ -226,6 +250,7 @@ var DataHeader = function DataHeader(_ref4) {
     _react2.default.createElement(
       'div',
       { className: classes.children },
+      _react2.default.createElement(SideIcon, { sideProps: sideProps, sideToggle: sideToggle }),
       R.not(R.isEmpty(reducedContent)) && _react2.default.createElement(
         _TooltipHeader2.default,
         { classes: classes, content: reducedContent },
@@ -262,6 +287,8 @@ DataHeader.propTypes = process.env.NODE_ENV !== "production" ? {
     header: _propTypes2.default.string,
     label: _propTypes2.default.string
   }),
+  sideProps: _propTypes2.default.object,
+  sideToggle: _propTypes2.default.func,
   disclaimer: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
   children: _propTypes2.default.node
 } : {};

package/lib/InfoIcon/InfoIcon.js

@@ -0,0 +1,56 @@
+'use strict';
+
+exports.__esModule = true;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _styles = require('@material-ui/core/styles');
+
+var _Info = require('@material-ui/icons//Info');
+
+var _Info2 = _interopRequireDefault(_Info);
+
+var _IconButton = require('@material-ui/core/IconButton');
+
+var _IconButton2 = _interopRequireDefault(_IconButton);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    icon: {
+      color: function color(_ref) {
+        var isSelected = _ref.isSelected;
+        return isSelected ? theme.palette.highlight.hl1 : theme.palette.primary.main;
+      },
+      padding: 0
+    }
+  };
+});
+
+var InfoIcon = function InfoIcon(_ref2) {
+  var onClick = _ref2.onClick,
+      _ref2$isSelected = _ref2.isSelected,
+      isSelected = _ref2$isSelected === undefined ? false : _ref2$isSelected;
+
+  var classes = useStyles({ isSelected: isSelected });
+  return _react2.default.createElement(
+    _IconButton2.default,
+    { size: 'small', className: classes.icon, onClick: onClick, 'data-testid': 'ref-md-info' },
+    _react2.default.createElement(_Info2.default, { fontSize: 'small' })
+  );
+};
+
+InfoIcon.propTypes = process.env.NODE_ENV !== "production" ? {
+  onClick: _propTypes2.default.func.isRequired,
+  isSelected: _propTypes2.default.bool
+} : {};
+
+exports.default = InfoIcon;
+module.exports = exports['default'];

package/lib/TableHtml5/TableHtml5.js

@@ -103,6 +103,7 @@ var TableHtml5 = function TableHtml5(_ref) {
       activeCellIds = _ref.activeCellIds,
       activeCellHandler = _ref.activeCellHandler,
       sideToggle = _ref.sideToggle,
+      selectedSideCoord = _ref.selectedSideCoord,
       _ref$testId = _ref.testId,
       testId = _ref$testId === undefined ? 'vis-table' : _ref$testId;
 
@@ -169,6 +170,7 @@ var TableHtml5 = function TableHtml5(_ref) {
         xLayoutData: xLayoutData,
         activeCellIds: activeCellIds,
         sideToggle: sideToggle,
+        selectedSideCoord: selectedSideCoord,
         ref: subHeadCellsRef,
         subHeadCellsWidth: subHeadCellsWidth
       })
@@ -187,6 +189,7 @@ var TableHtml5 = function TableHtml5(_ref) {
         activeCellIds: activeCellIds,
         activeCellHandler: activeCellHandler,
         sideToggle: sideToggle,
+        selectedSideCoord: selectedSideCoord,
         subHeadCellsWidth: subHeadCellsWidth
       });
     }, sectionsData)
@@ -201,6 +204,7 @@ TableHtml5.propTypes = process.env.NODE_ENV !== "production" ? {
   activeCellHandler: _propTypes2.default.func,
   activeCellIds: _propTypes2.default.object,
   sideToggle: _propTypes2.default.func,
+  selectedSideCoord: _propTypes2.default.object,
   testId: _propTypes2.default.string
 } : {};
 

package/lib/TableHtml5/section.js

@@ -117,6 +117,7 @@ var Section = function Section(_ref) {
       sectionIndex = _ref.sectionIndex,
       nbColumnsByRows = _ref.nbColumnsByRows,
       sideToggle = _ref.sideToggle,
+      selectedSideCoord = _ref.selectedSideCoord,
       subHeadCellsWidth = _ref.subHeadCellsWidth;
 
   var classes = useStyles();
@@ -135,7 +136,8 @@ var Section = function Section(_ref) {
       currentSection: currentSection,
       xLayoutDataLength: xLayoutDataLength,
       headerHeight: headerHeight,
-      sideToggle: sideToggle
+      sideToggle: sideToggle,
+      selectedSideCoord: selectedSideCoord
     }),
     R.map(function (sectionbody) {
       var _cx2;
@@ -196,7 +198,11 @@ var Section = function Section(_ref) {
           _react2.default.createElement(
             'div',
             { className: classes.flagContainer },
-            _react2.default.createElement(_sideIcon2.default, { sideProps: R.prop('sideProps', sectionbody), sideToggle: sideToggle }),
+            _react2.default.createElement(_sideIcon2.default, {
+              sideProps: R.prop('sideProps', sectionbody),
+              sideToggle: sideToggle,
+              selectedSideCoord: selectedSideCoord
+            }),
             _react2.default.createElement(_flags2.default, { flags: R.prop('flags', sectionbody) })
           )
         ),
@@ -242,6 +248,7 @@ Section.propTypes = process.env.NODE_ENV !== "production" ? {
   nbColumnsByRows: _propTypes2.default.array,
   maxColumns: _propTypes2.default.number,
   sideToggle: _propTypes2.default.func,
+  selectedSideCoord: _propTypes2.default.object,
   subHeadCellsWidth: _propTypes2.default.arrayOf(_propTypes2.default.number)
 } : {};
 

package/lib/TableHtml5/sectionHeader.js

@@ -78,9 +78,6 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     containerTextSection: {
       display: 'flex',
       alignItems: 'center'
-    },
-    flag: {
-      height: 0
     }
   };
 });
@@ -92,7 +89,8 @@ var SectionHeader = function SectionHeader(_ref) {
       currentSection = _ref.currentSection,
       xLayoutDataLength = _ref.xLayoutDataLength,
       headerHeight = _ref.headerHeight,
-      sideToggle = _ref.sideToggle;
+      sideToggle = _ref.sideToggle,
+      selectedSideCoord = _ref.selectedSideCoord;
 
   var classes = useStyles();
   if (R.compose(R.anyPass([R.isNil, R.isEmpty]), R.path([0, 'data']))(section)) return null;
@@ -146,8 +144,12 @@ var SectionHeader = function SectionHeader(_ref) {
         ),
         _react2.default.createElement(
           'div',
-          { className: classes.flag },
-          _react2.default.createElement(_sideIcon2.default, { sideProps: R.path([0, 'sideProps'], section), sideToggle: sideToggle }),
+          null,
+          _react2.default.createElement(_sideIcon2.default, {
+            sideProps: R.path([0, 'sideProps'], section),
+            sideToggle: sideToggle,
+            selectedSideCoord: selectedSideCoord
+          }),
           _react2.default.createElement(_flags2.default, { flags: R.path([0, 'flags'], section) })
         )
       )
@@ -161,7 +163,8 @@ SectionHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   currentSection: _propTypes2.default.string,
   xLayoutDataLength: _propTypes2.default.number,
   headerHeight: _propTypes2.default.number,
-  sideToggle: _propTypes2.default.func
+  sideToggle: _propTypes2.default.func,
+  selectedSideCoord: _propTypes2.default.object
 } : {};
 
 exports.default = SectionHeader;

package/lib/TableHtml5/sideIcon.js

@@ -14,52 +14,30 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _styles = require('@material-ui/core/styles');
+var _InfoIcon = require('../InfoIcon/InfoIcon');
 
-var _Info = require('@material-ui/icons//Info');
-
-var _Info2 = _interopRequireDefault(_Info);
-
-var _IconButton = require('@material-ui/core/IconButton');
-
-var _IconButton2 = _interopRequireDefault(_IconButton);
+var _InfoIcon2 = _interopRequireDefault(_InfoIcon);
 
 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 }; }
 
-var useStyles = (0, _styles.makeStyles)(function (theme) {
-  return {
-    icon: {
-      color: theme.palette.primary.main,
-      padding: 0
-    }
-  };
-});
-
 var SideIcon = function SideIcon(_ref) {
   var sideProps = _ref.sideProps,
-      sideToggle = _ref.sideToggle;
+      sideToggle = _ref.sideToggle,
+      selectedSideCoord = _ref.selectedSideCoord;
 
-  var classes = useStyles();
   if (R.isNil(sideProps) || !R.is(Function, sideToggle)) {
     return null;
   }
-  return _react2.default.createElement(
-    _IconButton2.default,
-    {
-      size: 'small',
-      className: classes.icon,
-      onClick: function onClick() {
-        return sideToggle(sideProps);
-      },
-      'data-testid': 'ref-md-info'
-    },
-    _react2.default.createElement(_Info2.default, { fontSize: 'small' })
-  );
+  var isSelected = R.equals(sideProps.coordinates, selectedSideCoord);
+  return _react2.default.createElement(_InfoIcon2.default, { onClick: function onClick() {
+      return sideToggle(sideProps);
+    }, isSelected: isSelected });
 };
 
 SideIcon.propTypes = process.env.NODE_ENV !== "production" ? {
+  selectedSideCoord: _propTypes2.default.object,
   sideProps: _propTypes2.default.object,
   sideToggle: _propTypes2.default.func
 } : {};

package/lib/TableHtml5/subHeader.js

@@ -88,7 +88,8 @@ var SubHeader = _react2.default.forwardRef(function (_ref, refs) {
       xLayoutData = _ref.xLayoutData,
       activeCellIds = _ref.activeCellIds,
       subHeadCellsWidth = _ref.subHeadCellsWidth,
-      sideToggle = _ref.sideToggle;
+      sideToggle = _ref.sideToggle,
+      selectedSideCoord = _ref.selectedSideCoord;
 
   var classes = useStyles();
   var theme = (0, _styles.useTheme)();
@@ -134,7 +135,11 @@ var SubHeader = _react2.default.forwardRef(function (_ref, refs) {
           key: index,
           className: (0, _classnames2.default)(classes.fillerCell, (_cx = {}, _cx[classes.highlight] = R.prop(index)(activeCellIds), _cx))
         },
-        _react2.default.createElement(_sideIcon2.default, { sideProps: R.prop('sideProps', item), sideToggle: sideToggle }),
+        _react2.default.createElement(_sideIcon2.default, {
+          sideProps: R.prop('sideProps', item),
+          sideToggle: sideToggle,
+          selectedSideCoord: selectedSideCoord
+        }),
         _react2.default.createElement(_flags2.default, { flags: R.prop('flags', item) })
       );
     }, headerData)
@@ -146,6 +151,7 @@ SubHeader.propTypes = process.env.NODE_ENV !== "production" ? {
   headerData: _propTypes2.default.array,
   xLayoutData: _propTypes2.default.array,
   sideToggle: _propTypes2.default.func,
+  selectedSideCoord: _propTypes2.default.object,
   subHeadCellsWidth: _propTypes2.default.arrayOf(_propTypes2.default.number)
 } : {};
 

package/package.json

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