@urbanos/react-discovery-ui 2.1.47 → 2.1.48

package/lib/components/data-view/data-view.js

@@ -14,11 +14,11 @@ var _reactTabs = require("react-tabs");
 var _lodash = _interopRequireDefault(require("lodash"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
 function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -34,7 +34,8 @@ var DataTable = function DataTable(_ref) {
   var data = _ref.data,
     columns = _ref.columns,
     page = _ref.page,
-    onNextPageClicked = _ref.onNextPageClicked;
+    onNextPageClicked = _ref.onNextPageClicked,
+    datasetName = _ref.datasetName;
   var _useState = (0, _react.useState)({
       pageIndex: page || 0,
       pageSize: 50
@@ -42,6 +43,14 @@ var DataTable = function DataTable(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     pagination = _useState2[0],
     setPagination = _useState2[1];
+  var _useState3 = (0, _react.useState)({
+      row: 0,
+      col: 0
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    focusedCell = _useState4[0],
+    setFocusedCell = _useState4[1];
+  var tableRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     setPagination(function (prev) {
       return _objectSpread(_objectSpread({}, prev), {}, {
@@ -65,37 +74,98 @@ var DataTable = function DataTable(_ref) {
     getCoreRowModel: (0, _reactTable.getCoreRowModel)(),
     getPaginationRowModel: (0, _reactTable.getPaginationRowModel)()
   });
+  var totalRows = table.getRowModel().rows.length + 1; // row 0 = header
+  var totalCols = columns.length;
+  var moveFocus = function moveFocus(newRow, newCol) {
+    var r = Math.max(0, Math.min(totalRows - 1, newRow));
+    var c = Math.max(0, Math.min(totalCols - 1, newCol));
+    setFocusedCell({
+      row: r,
+      col: c
+    });
+    var cell = tableRef.current && tableRef.current.querySelector("[data-row=\"".concat(r, "\"][data-col=\"").concat(c, "\"]"));
+    if (cell) cell.focus();
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    var row = focusedCell.row,
+      col = focusedCell.col;
+    var moves = {
+      ArrowUp: [row - 1, col],
+      ArrowDown: [row + 1, col],
+      ArrowLeft: [row, col - 1],
+      ArrowRight: [row, col + 1]
+    };
+    if (moves[e.key]) {
+      e.preventDefault();
+      moveFocus.apply(void 0, _toConsumableArray(moves[e.key]));
+    }
+  };
+  var tabIndex = function tabIndex(row, col) {
+    return focusedCell.row === row && focusedCell.col === col ? 0 : -1;
+  };
+  var onCellFocus = function onCellFocus(row, col) {
+    return setFocusedCell({
+      row: row,
+      col: col
+    });
+  };
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       height: '400px',
       overflow: 'auto'
     }
   }, /*#__PURE__*/_react.default.createElement("table", {
+    ref: tableRef,
     style: {
       minWidth: "".concat(columns.length * 120, "px")
-    }
-  }, /*#__PURE__*/_react.default.createElement("thead", null, table.getHeaderGroups().map(function (headerGroup) {
+    },
+    onKeyDown: handleKeyDown
+  }, /*#__PURE__*/_react.default.createElement("caption", null, datasetName ? "".concat(datasetName, " Dataset Preview") : 'Dataset Preview'), /*#__PURE__*/_react.default.createElement("thead", null, table.getHeaderGroups().map(function (headerGroup) {
     return /*#__PURE__*/_react.default.createElement("tr", {
       key: headerGroup.id
-    }, headerGroup.headers.map(function (header) {
+    }, headerGroup.headers.map(function (header, colIndex) {
       var _header$column$column;
       return /*#__PURE__*/_react.default.createElement("th", {
         key: header.id,
         scope: "col",
+        tabIndex: tabIndex(0, colIndex),
+        "data-row": 0,
+        "data-col": colIndex,
+        onFocus: function onFocus() {
+          return onCellFocus(0, colIndex);
+        },
         className: ((_header$column$column = header.column.columnDef.meta) === null || _header$column$column === void 0 ? void 0 : _header$column$column.headerClassName) || 'table-header'
       }, header.isPlaceholder ? null : (0, _reactTable.flexRender)(header.column.columnDef.header, header.getContext()));
     }));
   })), /*#__PURE__*/_react.default.createElement("tbody", null, table.getRowModel().rows.length === 0 ? /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
     colSpan: columns.length,
     className: "no-data-message"
-  }, "No rows found")) : table.getRowModel().rows.map(function (row, i) {
+  }, "No rows found")) : table.getRowModel().rows.map(function (row, rowIndex) {
+    var tableRow = rowIndex + 1;
     return /*#__PURE__*/_react.default.createElement("tr", {
       key: row.id,
-      className: i % 2 === 0 ? 'striped-row' : ''
-    }, row.getVisibleCells().map(function (cell) {
-      return /*#__PURE__*/_react.default.createElement("td", {
-        key: cell.id
-      }, (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext()));
+      className: rowIndex % 2 === 0 ? 'striped-row' : ''
+    }, row.getVisibleCells().map(function (cell, colIndex) {
+      var content = (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext());
+      return colIndex === 0 ? /*#__PURE__*/_react.default.createElement("th", {
+        key: cell.id,
+        scope: "row",
+        tabIndex: tabIndex(tableRow, colIndex),
+        "data-row": tableRow,
+        "data-col": colIndex,
+        onFocus: function onFocus() {
+          return onCellFocus(tableRow, colIndex);
+        },
+        className: "row-header"
+      }, content) : /*#__PURE__*/_react.default.createElement("td", {
+        key: cell.id,
+        tabIndex: tabIndex(tableRow, colIndex),
+        "data-row": tableRow,
+        "data-col": colIndex,
+        onFocus: function onFocus() {
+          return onCellFocus(tableRow, colIndex);
+        }
+      }, content);
     }));
   }))), /*#__PURE__*/_react.default.createElement("div", {
     className: "pagination"
@@ -190,10 +260,10 @@ var cleanseData = function cleanseData(data) {
   });
 };
 var _default = exports.default = function _default(props) {
-  var _useState3 = (0, _react.useState)(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    index = _useState4[0],
-    setIndex = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    index = _useState6[0],
+    setIndex = _useState6[1];
   var isGeojson = props.format === 'geojson';
   var cleanData = isGeojson ? undefined : props.data ? cleanseData(props.data) : props.data;
   var columns = (0, _react.useMemo)(function () {
@@ -231,7 +301,8 @@ var _default = exports.default = function _default(props) {
     data: cleanData,
     columns: columns,
     page: props.page,
-    onNextPageClicked: props.onNextPageClicked
+    onNextPageClicked: props.onNextPageClicked,
+    datasetName: props.datasetName
   }))), /*#__PURE__*/_react.default.createElement(_reactTabs.TabPanel, null, /*#__PURE__*/_react.default.createElement("div", {
     id: "data-view-raw"
   }, props.loading ? /*#__PURE__*/_react.default.createElement(_loadingElement.default, {

package/lib/components/data-view/data-view.scss

@@ -48,6 +48,11 @@
       text-align: left;
       font-weight: 800;
     }
+
+    tbody th.row-header {
+      font-weight: normal;
+      text-align: left;
+    }
   }
 
   #data-view-raw {

package/lib/components/data-view/data-view.test.js

@@ -33,14 +33,16 @@ describe('data view', () => {
     })
 
     test('should render table rows including data for column names with dots', () => {
-      const table_elements = subject.find('#data-view-table tbody td')
-      const expected = [
-        'Joe', 'Smith', 'true', 'Joe Smith',
-        'Jane', 'Doe', 'false', 'Jane Doe'
-      ]
-      const actual = table_elements.map((x) => x.text())
+      const rowHeaders = subject.find('#data-view-table tbody .row-header').map(x => x.text())
+      const dataCells = subject.find('#data-view-table tbody td').map(x => x.text())
+      const actual = [...rowHeaders, ...dataCells]
 
-      expect(actual).toContain(...expected)
+      expect(actual).toContain('Joe')
+      expect(actual).toContain('Smith')
+      expect(actual).toContain('true')
+      expect(actual).toContain('Jane')
+      expect(actual).toContain('Doe')
+      expect(actual).toContain('false')
     })
 
     test('should render two tabs', () => {
@@ -114,12 +116,10 @@ describe('data view', () => {
 
       const subject = mount(<DataView data={queryData} columns={columns} />)
 
-      const cells = subject.find('#data-view-table tbody td')
-      const actualValues = cells.map(c => c.text())
-      expect(actualValues).toEqual([
-        '{"value":1}', 'true', '[1]', '', '',
-        '{"value":2}', 'false', '[2,3]', '', ''
-      ])
+      const rowHeaders = subject.find('#data-view-table tbody .row-header').map(c => c.text())
+      const dataCells = subject.find('#data-view-table tbody td').map(c => c.text())
+      expect(rowHeaders).toEqual(['{"value":1}', '{"value":2}'])
+      expect(dataCells).toEqual(['true', '[1]', '', '', 'false', '[2,3]', '', ''])
       expect(subject.prop('data')).toEqual(queryData)
     })
 
@@ -139,11 +139,13 @@ describe('data view', () => {
       expect(headers).toContain('first.name')
       expect(headers).toContain('last.name')
 
-      const cells = subject.find('#data-view-table tbody td').map(c => c.text())
-      expect(cells).toContain('Mark')
-      expect(cells).toContain('Johnson')
-      expect(cells).toContain('George')
-      expect(cells).toContain('Lakoff')
+      const rowHeaders = subject.find('#data-view-table tbody .row-header').map(c => c.text())
+      const dataCells = subject.find('#data-view-table tbody td').map(c => c.text())
+      const allCells = [...rowHeaders, ...dataCells]
+      expect(allCells).toContain('Mark')
+      expect(allCells).toContain('Johnson')
+      expect(allCells).toContain('George')
+      expect(allCells).toContain('Lakoff')
     })
   })
 })

package/lib/components/dataset-preview/connector.js

@@ -11,9 +11,11 @@ var _selectors = require("../../store/selectors");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var mapStateToProps = function mapStateToProps(state, _ref) {
   var format = _ref.format;
+  var dataset = (0, _selectors.getDataSet)(state);
   return {
     datasetPreview: (0, _selectors.getDataSetPreview)(state, format),
-    previewLoading: state.presentation.previewLoading
+    previewLoading: state.presentation.previewLoading,
+    datasetName: dataset && dataset.title
   };
 };
 var mapDispatchToProps = function mapDispatchToProps(dispatch) {

package/lib/components/dataset-preview/dataset-preview.js

@@ -50,7 +50,8 @@ var _default = exports.default = /*#__PURE__*/function (_Component) {
         data: data,
         columns: columns,
         loading: this.props.previewLoading,
-        format: this.props.format
+        format: this.props.format,
+        datasetName: this.props.datasetName
       })));
     }
   }]);

package/lib/pages/query-view/connector.js

@@ -12,8 +12,10 @@ var _visualizationSelectors = require("../../store/visualization-selectors");
 var _selectors = require("../../store/selectors");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var mapStateToProps = function mapStateToProps(state) {
+  var dataset = (0, _selectors.getDataSet)(state);
   return {
     dataSources: (0, _querySelectors.getVisualizationDataSources)(state),
+    datasetName: dataset && dataset.title,
     recommendations: (0, _selectors.getDatasetRecommendations)(state),
     usedDatasets: (0, _visualizationSelectors.visualizationUsedDatasets)(state),
     datasetReferences: (0, _selectors.getDataSetReferences)(state),

package/lib/pages/query-view/query-view.js

@@ -21,6 +21,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 var QueryView = function QueryView(props) {
   var dataSources = props.dataSources,
+    datasetName = props.datasetName,
     recommendations = props.recommendations,
     usedDatasets = props.usedDatasets,
     datasetReferences = props.datasetReferences,
@@ -74,7 +75,8 @@ var QueryView = function QueryView(props) {
     data: queryData,
     page: page,
     columns: Object.keys(dataSources),
-    onNextPageClicked: onNextPageClicked
+    onNextPageClicked: onNextPageClicked,
+    datasetName: datasetName
   })));
 };
 var _default = exports.default = QueryView;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@urbanos/react-discovery-ui",
-  "version": "2.1.47",
+  "version": "2.1.48",
   "description": "React component for dataset discovery UI",
   "main": "./lib/ReactDiscoveryUI.js",
   "repository": {