@urbanos/react-discovery-ui 2.1.59 → 2.1.60

package/lib/ReactDiscoveryUI.js

@@ -43,7 +43,7 @@ var noMatch = function noMatch() {
   });
 };
 var DiscoveryUI = function DiscoveryUI() {
-  return /*#__PURE__*/_react.default.createElement("main-app-element", {
+  return /*#__PURE__*/_react.default.createElement("main", {
     class: "main-app-element"
   }, /*#__PURE__*/_react.default.createElement(_networkLoadingElement.default, null), /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Switch, null, /*#__PURE__*/_react.default.createElement(_protectedRoute.default, {
     exact: true,

package/lib/components/collapsable-box/collapsable-box.js

@@ -93,6 +93,8 @@ var _default = exports.default = /*#__PURE__*/function (_Component) {
       }, this.props.title), this.props.headerHtml), /*#__PURE__*/React.createElement(_detailToggleIcon.default, {
         expanded: this.state.expanded
       })), /*#__PURE__*/React.createElement(_reactCollapse.Collapse, {
+        "aria-hidden": !this.state.expanded,
+        hidden: !this.state.expanded,
         isOpened: this.state.expanded
       }, /*#__PURE__*/React.createElement("div", {
         id: this.contentId

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

@@ -12,6 +12,12 @@ var _no_image = _interopRequireDefault(require("../../assets/no_image.png"));
 var _utils = require("../../utils/");
 var _loadingElement = _interopRequireDefault(require("../../components/generic-elements/loading-element"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 var DataCard = function DataCard(props) {
   var maxDescriptionLength = 240;
   var fileTypes = function fileTypes(_fileTypes) {
@@ -23,6 +29,14 @@ var DataCard = function DataCard(props) {
     });
   };
   var dataset = props.dataset;
+  var _React$useState = React.useState('loading'),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    imageStatus = _React$useState2[0],
+    setImageStatus = _React$useState2[1];
+  var logoAltText = function logoAltText() {
+    if (imageStatus === 'fallback') return "No image available for ".concat(dataset.organization_title);
+    return "The logo for ".concat(dataset.organization_title);
+  };
   var truncatedDescription = truncateDescription(dataset.description, maxDescriptionLength);
   return /*#__PURE__*/React.createElement("data-card", null, /*#__PURE__*/React.createElement("div", {
     className: "logo"
@@ -32,7 +46,10 @@ var DataCard = function DataCard(props) {
     src: dataset.organization_image_url,
     fallbackImage: _no_image.default,
     initialImage: /*#__PURE__*/React.createElement(_loadingElement.default, null),
-    alt: "The logo for ".concat(dataset.organization_title)
+    alt: logoAltText(imageStatus, dataset),
+    onError: function onError(errorUrl) {
+      if (errorUrl === dataset.organization_image_url) setImageStatus('fallback');
+    }
   }))), /*#__PURE__*/React.createElement("div", {
     className: "details"
   }, /*#__PURE__*/React.createElement(_reactRouterDom.Link, {

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

@@ -240,6 +240,7 @@ var DataTable = function DataTable(_ref) {
   }))), /*#__PURE__*/_react.default.createElement("div", {
     className: "pagination"
   }, /*#__PURE__*/_react.default.createElement("button", {
+    "data-testid": "previous-page-button",
     onClick: function onClick() {
       return table.previousPage();
     },
@@ -248,8 +249,8 @@ var DataTable = function DataTable(_ref) {
   }, '<'), /*#__PURE__*/_react.default.createElement("span", null, "Page", ' ', /*#__PURE__*/_react.default.createElement("input", {
     id: "page-number-input",
     type: "number",
-    label: "Page number input",
     "data-testid": "page-number-input",
+    "aria-label": "page-number-input",
     value: table.getState().pagination.pageIndex + 1,
     onChange: function onChange(e) {
       var pageNum = e.target.value ? Number(e.target.value) - 1 : 0;

package/lib/components/dataset-api-doc/api-example.js

@@ -37,7 +37,8 @@ function renderParameters(params) {
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     className: "example-header"
   }, "Optional Parameters"), /*#__PURE__*/React.createElement("div", {
-    className: "example-parameters"
+    className: "example-parameters",
+    tabIndex: "0"
   }, /*#__PURE__*/React.createElement("table", {
     className: "example-table"
   }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Name"), /*#__PURE__*/React.createElement("th", null, "Default"), /*#__PURE__*/React.createElement("th", null, "Example"), /*#__PURE__*/React.createElement("th", null, "Description"))), /*#__PURE__*/React.createElement("tbody", null, params.map(renderParameter)))));

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

@@ -25,22 +25,7 @@ var isMap = function isMap(schemaElement) {
   return schemaElement.type === 'map' || schemaElement.itemType === 'map';
 };
 var schemaColumns = [{
-  id: 'expander',
-  header: function header() {
-    return null;
-  },
-  size: expanderWidth,
-  enableSorting: false,
-  cell: function cell(_ref) {
-    var row = _ref.row;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "expander",
-      style: {
-        cursor: isMap(row.original) ? 'pointer' : undefined
-      }
-    }, isMap(row.original) ? row.getIsExpanded() ? expandedArrow : collapsedArrow : '');
-  }
-}, {
+  id: 'field',
   header: 'Field',
   accessorKey: 'name',
   meta: {
@@ -48,25 +33,39 @@ var schemaColumns = [{
     className: 'field-name-cell'
   },
   size: 240,
-  cell: function cell(_ref2) {
-    var getValue = _ref2.getValue;
-    return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-      text: getValue()
-    });
+  cell: function cell(_ref) {
+    var getValue = _ref.getValue,
+      row = _ref.row;
+    var fieldName = getValue();
+    var rowIsMap = isMap(row.original);
+    var isExpanded = row.getIsExpanded();
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "field-cell-content"
+    }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      text: fieldName
+    }), rowIsMap && /*#__PURE__*/_react.default.createElement("button", {
+      type: "button",
+      className: "field-expander-button",
+      onClick: row.getToggleExpandedHandler(),
+      "aria-expanded": isExpanded,
+      "aria-label": "".concat(isExpanded ? 'Collapse' : 'Expand', " ").concat(fieldName)
+    }, isExpanded ? expandedArrow : collapsedArrow));
   }
 }, {
+  id: 'type',
   header: 'Type',
   accessorKey: 'type',
   meta: {
     headerClassName: 'table-header'
   },
   size: 120,
-  cell: function cell(_ref3) {
-    var getValue = _ref3.getValue,
-      row = _ref3.row;
+  cell: function cell(_ref2) {
+    var getValue = _ref2.getValue,
+      row = _ref2.row;
     return /*#__PURE__*/_react.default.createElement("div", null, getValue() === 'list' ? "list of ".concat(row.original.itemType) : getValue());
   }
 }, {
+  id: 'description',
   header: 'Description',
   accessorKey: 'description',
   meta: {
@@ -77,11 +76,11 @@ var schemaColumns = [{
 var isEmpty = function isEmpty(schema) {
   return !schema || schema.length < 1;
 };
-var _SchemaTable = function SchemaTable(_ref4) {
-  var schema = _ref4.schema,
-    _ref4$parentFieldName = _ref4.parentFieldName,
-    parentFieldName = _ref4$parentFieldName === void 0 ? '' : _ref4$parentFieldName,
-    style = _ref4.style;
+var _SchemaTable = function SchemaTable(_ref3) {
+  var schema = _ref3.schema,
+    _ref3$parentFieldName = _ref3.parentFieldName,
+    parentFieldName = _ref3$parentFieldName === void 0 ? '' : _ref3$parentFieldName,
+    style = _ref3.style;
   var _useState = (0, _react.useState)([]),
     _useState2 = _slicedToArray(_useState, 2),
     sorting = _useState2[0],
@@ -121,8 +120,9 @@ var _SchemaTable = function SchemaTable(_ref4) {
       var _header$column$column;
       return /*#__PURE__*/_react.default.createElement("th", {
         key: header.id,
+        "aria-label": header.id,
         scope: "col",
-        className: ((_header$column$column = header.column.columnDef.meta) === null || _header$column$column === void 0 ? void 0 : _header$column$column.headerClassName) || '',
+        className: ((_header$column$column = header.column.columnDef.meta) === null || _header$column$column === void 0 ? void 0 : _header$column$column.headerClassName) || 'table-header',
         style: {
           width: header.column.getSize() !== 150 ? "".concat(header.column.getSize(), "px") : undefined,
           cursor: header.column.getCanSort() ? 'pointer' : undefined
@@ -138,8 +138,7 @@ var _SchemaTable = function SchemaTable(_ref4) {
       var _cell$column$columnDe;
       return /*#__PURE__*/_react.default.createElement("td", {
         key: cell.id,
-        className: "".concat(cell.column.id === 'expander' ? 'expander-td' : '', " ").concat(((_cell$column$columnDe = cell.column.columnDef.meta) === null || _cell$column$columnDe === void 0 ? void 0 : _cell$column$columnDe.className) || ''),
-        onClick: cell.column.id === 'expander' && isMap(row.original) ? row.getToggleExpandedHandler() : undefined
+        className: ((_cell$column$columnDe = cell.column.columnDef.meta) === null || _cell$column$columnDe === void 0 ? void 0 : _cell$column$columnDe.className) || ''
       }, (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext()));
     })), row.getIsExpanded() && /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
       colSpan: schemaColumns.length
@@ -164,11 +163,11 @@ var viewLink = function viewLink(datasetId) {
     className: "view-text"
   }, "View as JSON")));
 };
-var _default = exports.default = function _default(_ref5) {
-  var schema = _ref5.schema,
-    datasetId = _ref5.datasetId,
-    _ref5$expanded = _ref5.expanded,
-    expanded = _ref5$expanded === void 0 ? true : _ref5$expanded;
+var _default = exports.default = function _default(_ref4) {
+  var schema = _ref4.schema,
+    datasetId = _ref4.datasetId,
+    _ref4$expanded = _ref4.expanded,
+    expanded = _ref4$expanded === void 0 ? true : _ref4$expanded;
   var title = 'Data Dictionary';
   if (isEmpty(schema)) {
     title = title + ' Unavailable';

package/lib/components/dataset-dictionary/dataset-dictionary.scss

@@ -8,6 +8,7 @@ dataset-dictionary {
 
     .view-text {
       font-size: 1.2rem;
+      color: $dark-blue;
     }
 
     a {
@@ -33,8 +34,26 @@ dataset-dictionary {
       white-space: unset;
     }
 
-    .expander {
-      text-align: center;
+    .field-cell-content {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .field-expander-button {
+      border: 0;
+      background: transparent;
+      padding: 0;
+      min-width: 1rem;
+      line-height: 1;
+      cursor: pointer;
+      color: $almost-black;
+      font-size: 1rem;
+    }
+
+    .field-expander-button:focus-visible {
+      outline: 2px solid $dark-blue;
+      outline-offset: 2px;
     }
   }
 

package/lib/components/dataset-dictionary/dataset-dictionary.test.js

@@ -26,20 +26,19 @@ describe('dataset dictionary', () => {
       const table = subject.find('.dataset-schema-table')
       const headers = table.find('th')
 
-      expect(headers.length).toBe(4)
-      expect(headers.at(1).text()).toBe('Field')
-      expect(headers.at(2).text()).toBe('Type')
-      expect(headers.at(3).text()).toBe('Description')
+      expect(headers.length).toBe(3)
+      expect(headers.at(0).text()).toBe('Field')
+      expect(headers.at(1).text()).toBe('Type')
+      expect(headers.at(2).text()).toBe('Description')
     })
 
     it('has the correct table values', () => {
       const table = subject.find('.dataset-schema-table')
       const cells = table.find('td')
 
-      const expansionPlaceholder = ''
       const expectedCellValues = [
-        expansionPlaceholder, 'name', 'string', 'the name',
-        expansionPlaceholder, 'age', 'integer', 'the age'
+        'name', 'string', 'the name',
+        'age', 'integer', 'the age'
       ]
       expect(cells.length).toBe(expectedCellValues.length)
       expectCorrectCellValues(expectedCellValues, cells)
@@ -51,7 +50,7 @@ describe('dataset dictionary', () => {
 
     it('is sortable via column headers', () => {
       const headers = subject.find('.dataset-schema-table th')
-      expect(headers.at(1).prop('onClick')).toBeTruthy()
+      expect(headers.at(0).prop('onClick')).toBeTruthy()
     })
 
     it('has no left margin on the top-level table', () => {
@@ -71,7 +70,7 @@ describe('dataset dictionary', () => {
       const table = subject.find('.dataset-schema-table')
       const cells = table.find('td')
 
-      const typeIndex = 2
+      const typeIndex = 1
       expect(cells.at(typeIndex).text()).toBe(`list of ${schemaWithList[0].itemType}`)
     })
   })
@@ -107,23 +106,20 @@ describe('dataset dictionary', () => {
     })
 
     it('has the correct table values', () => {
-      const expansionPlaceholder = ''
-      const expansionArrow = '▸'
       const expectedCellValues = [
-        expansionPlaceholder, 'name', 'string', 'the name',
-        expansionArrow, 'mother', 'map', 'the mother'
+        'name', 'string', 'the name',
+        'mother', 'map', 'the mother'
       ]
       expect(topLevelCells.length).toBe(expectedCellValues.length)
       expectCorrectCellValues(expectedCellValues, topLevelCells)
+      expect(topLevelTable.find('.field-expander-button').at(0).text()).toBe('▸')
     })
 
     describe('with the map type expanded', () => {
-      const expanderCellIndex = 4
-
       let subTable, subTableCells
 
       beforeEach(() => {
-        topLevelCells.at(expanderCellIndex).simulate('click')
+        topLevelTable.find('.field-expander-button').at(0).simulate('click')
         topLevelTable = subject.find('.dataset-schema-table')
 
         subTable = topLevelTable.find('.dataset-schema-table.mother')
@@ -131,7 +127,7 @@ describe('dataset dictionary', () => {
       })
 
       it('toggles the direction of the arrow', () => {
-        expect(topLevelCells.at(expanderCellIndex).text()).toBe('▾')
+        expect(topLevelTable.find('.field-expander-button').at(0).text()).toBe('▾')
       })
 
       it('renders a sub table for the map with correct values', () => {
@@ -139,14 +135,13 @@ describe('dataset dictionary', () => {
       })
 
       it('has the correct values in the sub table', () => {
-        const expansionPlaceholder = ''
-        const expansionArrow = '▸'
         const expectedCellValues = [
-          expansionPlaceholder, 'name', 'string', 'mother\'s name',
-          expansionArrow, 'children', 'list of map', 'the chillins'
+          'name', 'string', 'mother\'s name',
+          'children', 'list of map', 'the chillins'
         ]
         expect(subTableCells.length).toBe(expectedCellValues.length)
         expectCorrectCellValues(expectedCellValues, subTableCells)
+        expect(subTable.find('.field-expander-button').at(0).text()).toBe('▸')
       })
 
       it('indents the sub table', () => {
@@ -154,15 +149,15 @@ describe('dataset dictionary', () => {
       })
 
       it('toggles the direction of the arrow again when collapsed', () => {
-        topLevelCells.at(expanderCellIndex).simulate('click')
-        expect(topLevelCells.at(expanderCellIndex).text()).toBe('▸')
+        topLevelTable.find('.field-expander-button').at(0).simulate('click')
+        expect(subject.find('.dataset-schema-table').find('.field-expander-button').at(0).text()).toBe('▸')
       })
 
       describe('and the list of map type expanded', () => {
         let subSubTable, subSubTableCells
 
         beforeEach(() => {
-          subTableCells.at(expanderCellIndex).simulate('click')
+          subTable.find('.field-expander-button').at(0).simulate('click')
           subTable = subject.find('.dataset-schema-table.mother')
 
           subSubTable = subTable.find('.dataset-schema-table.children')
@@ -174,9 +169,8 @@ describe('dataset dictionary', () => {
         })
 
         it('has the correct values in the sub sub table', () => {
-          const expansionPlaceholder = ''
           const expectedCellValues = [
-            expansionPlaceholder, 'age', 'integer', 'the child\'s age'
+            'age', 'integer', 'the child\'s age'
           ]
           expect(subSubTableCells.length).toBe(expectedCellValues.length)
           expectCorrectCellValues(expectedCellValues, subSubTableCells)
@@ -198,8 +192,8 @@ describe('dataset dictionary', () => {
     beforeEach(() => {
       subject = mount(<DatasetDictionary schema={schemaWithMaps} expanded />)
       topLevelTable = subject.find('.dataset-schema-table')
-      const expanderCells = topLevelTable.find('td.expander-td')
-      expanderCells.at(1).simulate('click')
+      const expanderButtons = topLevelTable.find('.field-expander-button')
+      expanderButtons.at(0).simulate('click')
       topLevelTable = subject.find('.dataset-schema-table')
     })
 
@@ -267,7 +261,7 @@ describe('dataset dictionary', () => {
 
   const expectCorrectCellValues = (expectedCellValues, cells) => {
     expectedCellValues.forEach((expected, index) => {
-      if (index % 4 === 1) { // handle special rendering for field name tooltip
+      if (index % 3 === 0) { // handle special rendering for field name tooltip
         expect(cells.at(index).find(Tooltip).props().text).toBe(expected)
       } else {
         expect(cells.at(index).text()).toBe(expected)

package/lib/components/dataset-metadata/dataset-metadata.scss

@@ -30,6 +30,7 @@ dataset-metadata {
 
   a {
     @include sub-link();
+    color: $dark-blue;
   }
 
   td {

package/lib/components/dataset-quality/dataset-quality.scss

@@ -6,6 +6,7 @@ dataset-quality {
   .completeness-score {
     color: $csv-green;
     font-size: 2rem;
+    font-weight: bold;
   }
 
   .quality-header {

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

@@ -29,6 +29,7 @@ var DatasetRecommendations = function DatasetRecommendations(props) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "recommendation-content"
   }, recommendations.map(function (rec) {
+    var _rec$dataTitle;
     return /*#__PURE__*/React.createElement("div", {
       className: "recommended-dataset",
       key: rec.id
@@ -37,7 +38,7 @@ var DatasetRecommendations = function DatasetRecommendations(props) {
       href: _utils.RecommendationUtils.getDatasetUrl(rec),
       target: "_blank",
       rel: "noreferrer"
-    }, rec.dataTitle));
+    }, (_rec$dataTitle = rec.dataTitle) !== null && _rec$dataTitle !== void 0 ? _rec$dataTitle : rec.id));
   }))));
 };
 DatasetRecommendations.propTypes = {

package/lib/components/recommendation-list/recommendation-list.js

@@ -32,6 +32,7 @@ var RecommendationList = function RecommendationList(props) {
   };
   var recommendationItems = function recommendationItems() {
     return recommendations.map(function (recommendation) {
+      var _recommendation$dataT;
       return /*#__PURE__*/React.createElement("div", {
         key: recommendation.id
       }, /*#__PURE__*/React.createElement(_reactTooltip.default, {
@@ -60,7 +61,7 @@ var RecommendationList = function RecommendationList(props) {
         target: "_blank",
         className: "action",
         rel: "noreferrer"
-      }, recommendation.dataTitle)));
+      }, (_recommendation$dataT = recommendation.dataTitle) !== null && _recommendation$dataT !== void 0 ? _recommendation$dataT : recommendation.id)));
     });
   };
   return /*#__PURE__*/React.createElement("recommendation-list", null, /*#__PURE__*/React.createElement("div", {

package/lib/components/share/share.scss

@@ -59,7 +59,6 @@ share-zone {
         font-weight: bold;
         font-size: 0.9rem;
         height: 32px;
-        color: white;
         display: flex;
         padding: 6px;
     }

package/lib/components/visualization-save-menu-item/visualization-save-menu-item.scss

@@ -2,8 +2,6 @@
 @import "../../styles/variables.scss";
 
 visualization-save-menu-item {
-  height: 59%;
-
   .save-icon {
     margin-right: 0.5rem;
     display: block;
@@ -34,4 +32,4 @@ visualization-save-menu-item {
   }
 
   @include menu-item-popover();
-}
+}

package/lib/pages/dataset-detail-view/dataset-detail-view.scss

@@ -57,7 +57,7 @@ dataset-detail-view {
     border:none;
     padding:0px;
     margin:0;
-    color:#00aeef;
+    color:$dark-blue;
     border-radius:0 !important;
     display:block;
     float:left;
@@ -120,7 +120,8 @@ dataset-detail-view {
       border:none;
       padding:0px;
       margin:0;
-      color:#00aeef;
+      font-size:1.2rem;
+      color:$dark-blue;
     }
     dataset-details .keyword:after {
       content:","

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

@@ -128,9 +128,9 @@ var _default = exports.default = /*#__PURE__*/function (_Component) {
         onSelect: function onSelect(tabIndex) {
           return _this2.selectTab(tabIndex);
         }
-      }, /*#__PURE__*/_react.default.createElement(_reactTabs.TabList, {
-        className: "header"
       }, /*#__PURE__*/_react.default.createElement("span", {
+        className: "header"
+      }, /*#__PURE__*/_react.default.createElement(_reactTabs.TabList, {
         className: "tab-area header-tabs"
       }, /*#__PURE__*/_react.default.createElement(_reactTabs.Tab, {
         "data-testid": "dataset-details"
@@ -142,20 +142,35 @@ var _default = exports.default = /*#__PURE__*/function (_Component) {
         "data-testid": "visualize"
       }, "Visualize ", /*#__PURE__*/_react.default.createElement(_chartIcon.default, {
         className: "chartIcon"
-      })), this.isNotDatasetDetailsTab() && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("a", {
-        role: "link",
+      }))), this.isNotDatasetDetailsTab() && /*#__PURE__*/_react.default.createElement("span", {
+        className: "help-area"
+      }, /*#__PURE__*/_react.default.createElement("a", {
+        role: null,
         className: "helpLink primary-color",
         target: "_blank",
         href: "https://en.wikipedia.org/wiki/SQL_syntax",
         rel: "noreferrer"
       }, "SQL Help"), this.isVisualizationEnabled() && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "|"), /*#__PURE__*/_react.default.createElement("a", {
-        role: "link",
         id: "plotlyhelp",
         className: "helpLink primary-color",
         target: "_blank",
         href: "https://plotly.com/chart-studio-help/tutorials/#basic",
         rel: "noreferrer"
-      }, "Plot.ly Help")))), /*#__PURE__*/_react.default.createElement("div", {
+      }, "Plot.ly Help"))), this.isNotDatasetDetailsTab() && /*#__PURE__*/_react.default.createElement("span", {
+        className: "action-area"
+      }, /*#__PURE__*/_react.default.createElement(_visualizationListMenuItem.default, {
+        isAuthenticated: this.props.auth.isAuthenticated
+      }), /*#__PURE__*/_react.default.createElement(_visualizationSaveMenuItem.default, {
+        isSaveable: this.props.isSaveable,
+        handleTitleChange: this.handleTitleChange.bind(this),
+        handleSaveOrUpdate: this.handleSaveOrUpdate.bind(this),
+        linkUrl: this.generateVisualizationLink(),
+        isSaveFailure: this.props.isSaveFailure,
+        isSaveSuccess: this.props.isSaveSuccess,
+        title: this.state.localTitle,
+        allowedActions: this.props.allowedActions,
+        isAuthenticated: this.props.auth.isAuthenticated
+      })), /*#__PURE__*/_react.default.createElement("div", {
         className: "mobile-tab-menu"
       }, /*#__PURE__*/_react.default.createElement("button", {
         type: "button",
@@ -168,17 +183,15 @@ var _default = exports.default = /*#__PURE__*/function (_Component) {
             };
           });
         },
-        "aria-label": "Open tab menu",
+        "aria-controls": "mobile-tab-dropdown",
         "aria-expanded": this.state.isMobileMenuOpen
       }, "\u2630"), this.state.isMobileMenuOpen && /*#__PURE__*/_react.default.createElement("div", {
         className: "mobile-tab-dropdown"
       }, /*#__PURE__*/_react.default.createElement("button", {
-        type: "button",
         onClick: function onClick() {
           return _this2.selectTab(0);
         }
       }, "Dataset Details"), /*#__PURE__*/_react.default.createElement("button", {
-        type: "button",
         onClick: function onClick() {
           return _this2.selectTab(1);
         }
@@ -187,21 +200,7 @@ var _default = exports.default = /*#__PURE__*/function (_Component) {
         onClick: function onClick() {
           return _this2.selectTab(2);
         }
-      }, "Visualize"))), this.isNotDatasetDetailsTab() && /*#__PURE__*/_react.default.createElement("span", {
-        className: "action-area"
-      }, /*#__PURE__*/_react.default.createElement(_visualizationListMenuItem.default, {
-        isAuthenticated: this.props.auth.isAuthenticated
-      }), /*#__PURE__*/_react.default.createElement(_visualizationSaveMenuItem.default, {
-        isSaveable: this.props.isSaveable,
-        handleTitleChange: this.handleTitleChange.bind(this),
-        handleSaveOrUpdate: this.handleSaveOrUpdate.bind(this),
-        linkUrl: this.generateVisualizationLink(),
-        isSaveFailure: this.props.isSaveFailure,
-        isSaveSuccess: this.props.isSaveSuccess,
-        title: this.state.localTitle,
-        allowedActions: this.props.allowedActions,
-        isAuthenticated: this.props.auth.isAuthenticated
-      }))), /*#__PURE__*/_react.default.createElement(_reactTabs.TabPanel, {
+      }, "Visualize")))), /*#__PURE__*/_react.default.createElement(_reactTabs.TabPanel, {
         forceRender: true
       }, /*#__PURE__*/_react.default.createElement(_datasetDetailView.default, null)), /*#__PURE__*/_react.default.createElement(_reactTabs.TabPanel, null, /*#__PURE__*/_react.default.createElement(_queryView.default, {
         shouldAutoExecuteQuery: this.props.shouldAutoExecuteQuery

package/lib/pages/dataset-view/dataset-view.scss

@@ -24,6 +24,11 @@ dataset-view {
     font-size: 12px;
   }
 
+  .help-area {
+    display: flex;
+    align-items: center;
+  }
+
   .helpLink:first-of-type {
     border-left: 1px solid $light-grey;
     padding-left: 15px;
@@ -41,7 +46,7 @@ dataset-view {
     border: 0;
     position: relative;
     list-style: initial;
-    padding: 12px 24px;
+    padding: 0px 18px;
     cursor: pointer;
     color: $dark-grey;
   }
@@ -105,13 +110,10 @@ dataset-view {
       justify-content: space-between;
     }
 
-    .header-tabs {
+    .header-tabs, .action-area, .help-area {
         display: none !important; 
     }
 
-    .tab-area {
-      font-size: small;
-    }
     
     .react-tabs__tab {
       padding: 6px 12px;

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

@@ -38,8 +38,8 @@ var QueryView = function QueryView(props) {
     _useState2 = _slicedToArray(_useState, 2),
     page = _useState2[0],
     setPage = _useState2[1];
-  var onNextPageClicked = function onNextPageClicked(pageNumber) {
-    setPage(pageNumber);
+  var onNextPageClicked = function onNextPageClicked() {
+    setPage(page);
   };
   _react.default.useEffect(function () {
     if (shouldAutoExecuteQuery) {

package/lib/styles/variables.scss

@@ -6,7 +6,7 @@ $header-grey: #ebedf0;
 $light-grey: #d2d4d6;
 $medium-grey: #97999c;
 $dark-grey: #636466;
-$csv-green: #8fd400;
+$csv-green: #558000;
 $green: #71a702;
 $error-color: #B80000;
 $warning-background: #ffdbdd;
@@ -38,4 +38,4 @@ $below-min-break: "only screen and (max-width: #{$break-min})";
     errorColor: $error-color;
     lightBlue: $light-blue;
     aboveMaxBreak: unquote($above-max-break);
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@urbanos/react-discovery-ui",
-  "version": "2.1.59",
+  "version": "2.1.60",
   "description": "React component for dataset discovery UI",
   "main": "./lib/ReactDiscoveryUI.js",
   "repository": {
@@ -107,6 +107,7 @@
     "cypress": "^15.10.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.8",
+    "eslint": "^8.57.1",
     "eslint-utils": "^3.0.0",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.6.3",