@urbanos/react-discovery-ui 2.1.47 → 2.1.49

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

@@ -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,20 @@ 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 focusedCellRef = (0, _react.useRef)({
+    row: 0,
+    col: 0
+  });
+  var totalRowsRef = (0, _react.useRef)(1);
+  var totalColsRef = (0, _react.useRef)(columns.length);
+  var tableRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     setPagination(function (prev) {
       return _objectSpread(_objectSpread({}, prev), {}, {
@@ -65,37 +80,124 @@ var DataTable = function DataTable(_ref) {
     getCoreRowModel: (0, _reactTable.getCoreRowModel)(),
     getPaginationRowModel: (0, _reactTable.getPaginationRowModel)()
   });
+
+  // Keep refs current on every render so the native keydown handler always sees fresh values
+  totalRowsRef.current = table.getRowModel().rows.length + 1; // row 0 = header
+  totalColsRef.current = columns.length;
+
+  // Native keydown listener — fires before React's document-level delegation,
+  // so e.preventDefault() reliably cancels browser arrow-key scroll.
+  (0, _react.useEffect)(function () {
+    var tableEl = tableRef.current;
+    if (!tableEl) return;
+    var handleKeyDown = function handleKeyDown(e) {
+      var _focusedCellRef$curre = focusedCellRef.current,
+        row = _focusedCellRef$curre.row,
+        col = _focusedCellRef$curre.col;
+      var moves = {
+        ArrowUp: [row - 1, col],
+        ArrowDown: [row + 1, col],
+        ArrowLeft: [row, col - 1],
+        ArrowRight: [row, col + 1]
+      };
+      if (!moves[e.key]) return;
+      e.preventDefault();
+      var r = Math.max(0, Math.min(totalRowsRef.current - 1, moves[e.key][0]));
+      var c = Math.max(0, Math.min(totalColsRef.current - 1, moves[e.key][1]));
+      focusedCellRef.current = {
+        row: r,
+        col: c
+      };
+      setFocusedCell({
+        row: r,
+        col: c
+      });
+      var cell = tableEl.querySelector("[data-row=\"".concat(r, "\"][data-col=\"").concat(c, "\"]"));
+      if (cell) {
+        cell.focus({
+          preventScroll: true
+        });
+        cell.scrollIntoView({
+          block: 'nearest',
+          inline: 'nearest'
+        });
+      }
+    };
+    tableEl.addEventListener('keydown', handleKeyDown);
+    return function () {
+      return tableEl.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []); // empty deps — all values accessed via refs
+
+  var tabIndex = function tabIndex(row, col) {
+    return focusedCell.row === row && focusedCell.col === col ? 0 : -1;
+  };
+  var onCellFocus = function onCellFocus(row, col) {
+    focusedCellRef.current = {
+      row: row,
+      col: col
+    };
+    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) {
+  }, /*#__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 +292,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 +333,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.49",
   "description": "React component for dataset discovery UI",
   "main": "./lib/ReactDiscoveryUI.js",
   "repository": {