@urbanos/react-discovery-ui 2.1.44 → 2.1.45

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

@@ -1,100 +1,156 @@
 "use strict";
 
+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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 require("./dataset-dictionary.scss");
-var _reactTable = _interopRequireDefault(require("react-table"));
-require("react-table/react-table.css");
+var _reactTable = require("@tanstack/react-table");
 var _collapsableBox = _interopRequireDefault(require("../../components/collapsable-box"));
 var _tooltip = _interopRequireDefault(require("../tooltip"));
 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 _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 expanderWidth = 35;
 var expandedArrow = "\u25BE";
 var collapsedArrow = "\u25B8";
-var renderFieldNameCell = function renderFieldNameCell(schemaElement) {
-  return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-    text: schemaElement.value
-  });
-};
-var renderTypeCell = function renderTypeCell(schemaElement) {
-  return /*#__PURE__*/_react.default.createElement("div", null, schemaElement.value === 'list' ? "list of ".concat(schemaElement.original.itemType) : schemaElement.value);
-};
 var isMap = function isMap(schemaElement) {
   return schemaElement.type === 'map' || schemaElement.itemType === 'map';
 };
-var renderExpander = function renderExpander(_ref) {
-  var isExpanded = _ref.isExpanded,
-    schemaElement = _ref.original;
-  var content = '';
-  if (isMap(schemaElement)) {
-    content = isExpanded ? expandedArrow : collapsedArrow;
+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 : '');
   }
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "expander"
-  }, content);
-};
-var renderSubTable = function renderSubTable(_ref2) {
-  var schemaElement = _ref2.original;
-  return isMap(schemaElement) ? /*#__PURE__*/_react.default.createElement(SchemaTable, {
-    schema: schemaElement.subSchema,
-    parentFieldName: schemaElement.name,
-    style: {
-      marginLeft: "".concat(expanderWidth, "px")
-    }
-  }) : /*#__PURE__*/_react.default.createElement("span", null);
-};
-var columns = [{
-  Header: 'Field',
-  accessor: 'name',
-  headerClassName: 'table-header',
-  width: 240,
-  className: 'field-name-cell',
-  Cell: renderFieldNameCell
 }, {
-  Header: 'Type',
-  accessor: 'type',
-  headerClassName: 'table-header',
-  width: 120,
-  Cell: renderTypeCell
+  header: 'Field',
+  accessorKey: 'name',
+  meta: {
+    headerClassName: 'table-header',
+    className: 'field-name-cell'
+  },
+  size: 240,
+  cell: function cell(_ref2) {
+    var getValue = _ref2.getValue;
+    return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      text: getValue()
+    });
+  }
+}, {
+  header: 'Type',
+  accessorKey: 'type',
+  meta: {
+    headerClassName: 'table-header'
+  },
+  size: 120,
+  cell: function cell(_ref3) {
+    var getValue = _ref3.getValue,
+      row = _ref3.row;
+    return /*#__PURE__*/_react.default.createElement("div", null, getValue() === 'list' ? "list of ".concat(row.original.itemType) : getValue());
+  }
 }, {
-  Header: 'Description',
-  accessor: 'description',
-  headerClassName: 'table-header',
-  className: 'description-cell'
+  header: 'Description',
+  accessorKey: 'description',
+  meta: {
+    headerClassName: 'table-header',
+    className: 'description-cell'
+  }
 }];
 var isEmpty = function isEmpty(schema) {
   return !schema || schema.length < 1;
 };
-var SchemaTable = function SchemaTable(_ref3) {
-  var schema = _ref3.schema,
-    _ref3$parentFieldName = _ref3.parentFieldName,
-    parentFieldName = _ref3$parentFieldName === void 0 ? '' : _ref3$parentFieldName,
-    style = _ref3.style;
-  if (schema) {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "dataset-schema-table ".concat(parentFieldName)
-    }, /*#__PURE__*/_react.default.createElement(_reactTable.default, {
-      style: style,
-      data: schema,
-      columns: columns,
-      defaultPageSize: schema.length,
-      className: "-highlight",
-      showPagination: false,
-      sortable: true,
-      ExpanderComponent: renderExpander,
-      SubComponent: renderSubTable,
-      expanderDefaults: {
-        width: expanderWidth
-      }
-    }));
-  } else {
+var _SchemaTable = function SchemaTable(_ref4) {
+  var schema = _ref4.schema,
+    _ref4$parentFieldName = _ref4.parentFieldName,
+    parentFieldName = _ref4$parentFieldName === void 0 ? '' : _ref4$parentFieldName,
+    style = _ref4.style;
+  var _useState = (0, _react.useState)([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    sorting = _useState2[0],
+    setSorting = _useState2[1];
+  var _useState3 = (0, _react.useState)({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    expanded = _useState4[0],
+    setExpanded = _useState4[1];
+  var table = (0, _reactTable.useReactTable)({
+    data: schema,
+    columns: schemaColumns,
+    state: {
+      sorting: sorting,
+      expanded: expanded
+    },
+    onSortingChange: setSorting,
+    onExpandedChange: setExpanded,
+    getRowCanExpand: function getRowCanExpand(row) {
+      return isMap(row.original);
+    },
+    getCoreRowModel: (0, _reactTable.getCoreRowModel)(),
+    getSortedRowModel: (0, _reactTable.getSortedRowModel)(),
+    getExpandedRowModel: (0, _reactTable.getExpandedRowModel)()
+  });
+  if (!schema) {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "error"
     }, "Schema information not found. Contact the data curator.");
   }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "dataset-schema-table ".concat(parentFieldName),
+    style: style
+  }, /*#__PURE__*/_react.default.createElement("table", null, /*#__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) {
+      var _header$column$column;
+      return /*#__PURE__*/_react.default.createElement("th", {
+        key: header.id,
+        scope: "col",
+        className: ((_header$column$column = header.column.columnDef.meta) === null || _header$column$column === void 0 ? void 0 : _header$column$column.headerClassName) || '',
+        style: {
+          width: header.column.getSize() !== 150 ? "".concat(header.column.getSize(), "px") : undefined,
+          cursor: header.column.getCanSort() ? 'pointer' : undefined
+        },
+        onClick: header.column.getCanSort() ? header.column.getToggleSortingHandler() : undefined,
+        "aria-sort": header.column.getIsSorted() === 'asc' ? 'ascending' : header.column.getIsSorted() === 'desc' ? 'descending' : undefined
+      }, header.isPlaceholder ? null : (0, _reactTable.flexRender)(header.column.columnDef.header, header.getContext()), header.column.getIsSorted() === 'asc' ? ' ↑' : header.column.getIsSorted() === 'desc' ? ' ↓' : '');
+    }));
+  })), /*#__PURE__*/_react.default.createElement("tbody", null, table.getRowModel().rows.map(function (row) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+      key: row.id
+    }, /*#__PURE__*/_react.default.createElement("tr", null, row.getVisibleCells().map(function (cell) {
+      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
+      }, (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
+    }, /*#__PURE__*/_react.default.createElement(_SchemaTable, {
+      schema: row.original.subSchema,
+      parentFieldName: row.original.name,
+      style: {
+        marginLeft: "".concat(expanderWidth, "px")
+      }
+    }))));
+  }))));
 };
 var viewLink = function viewLink(datasetId) {
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -107,11 +163,11 @@ var viewLink = function viewLink(datasetId) {
     className: "view-text"
   }, "View as JSON")));
 };
-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 _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 title = 'Data Dictionary';
   if (isEmpty(schema)) {
     title = title + ' Unavailable';
@@ -121,7 +177,7 @@ var _default = exports.default = function _default(_ref4) {
   }, /*#__PURE__*/_react.default.createElement(_collapsableBox.default, {
     title: title,
     expanded: expanded
-  }, !isEmpty(schema) && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(SchemaTable, {
+  }, !isEmpty(schema) && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_SchemaTable, {
     schema: schema
   }), viewLink(datasetId))));
 };

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

@@ -18,8 +18,10 @@ dataset-dictionary {
   .dataset-schema-table {
     color: $almost-black;
 
-    .ReactTable {
-      border-width: 0
+    table {
+      border-width: 0;
+      border-collapse: collapse;
+      width: 100%;
     }
 
     .table-header {

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

@@ -1,7 +1,6 @@
 import { shallow, mount } from 'enzyme'
 import DatasetDictionary from './dataset-dictionary'
 import CollapsableBox from '../collapsable-box'
-import ReactTable from 'react-table'
 import Tooltip from '../tooltip'
 
 describe('dataset dictionary', () => {
@@ -14,7 +13,6 @@ describe('dataset dictionary', () => {
 
   describe('with a basic schema', () => {
     beforeEach(() => {
-      const matchMedia = jest.fn()
       Object.defineProperty(window, 'matchMedia', {
         writable: true,
         value: jest.fn().mockImplementation(query => ({
@@ -26,7 +24,7 @@ describe('dataset dictionary', () => {
 
     it('has the correct table headers', () => {
       const table = subject.find('.dataset-schema-table')
-      const headers = table.find('.rt-th')
+      const headers = table.find('th')
 
       expect(headers.length).toBe(4)
       expect(headers.at(1).text()).toBe('Field')
@@ -36,7 +34,7 @@ describe('dataset dictionary', () => {
 
     it('has the correct table values', () => {
       const table = subject.find('.dataset-schema-table')
-      const cells = table.find('.rt-td')
+      const cells = table.find('td')
 
       const expansionPlaceholder = ''
       const expectedCellValues = [
@@ -47,25 +45,18 @@ describe('dataset dictionary', () => {
       expectCorrectCellValues(expectedCellValues, cells)
     })
 
-    it('does not have pagination', () => {
-      const table = subject.find(ReactTable)
-      expect(table.props().showPagination).toBe(false)
+    it('does not have pagination controls', () => {
+      expect(subject.find('.pagination').length).toBe(0)
     })
 
-    it('has a page size to show the entire schema', () => {
-      const table = subject.find(ReactTable)
-      expect(table.props().defaultPageSize).toBe(Object.keys(basicSchema).length)
+    it('is sortable via column headers', () => {
+      const headers = subject.find('.dataset-schema-table th')
+      expect(headers.at(1).prop('onClick')).toBeTruthy()
     })
 
-    it('is sortable', () => {
-      const table = subject.find(ReactTable)
-      expect(table.props().sortable).toBe(true)
-    })
-
-    it('has no left margin', () => {
-      const table = subject.find(ReactTable)
-
-      expect(table.props().style.marginLeft).toBeFalsy()
+    it('has no left margin on the top-level table', () => {
+      const tableWrapper = subject.find('.dataset-schema-table').first()
+      expect(tableWrapper.prop('style')).toBeFalsy()
     })
   })
 
@@ -78,7 +69,7 @@ describe('dataset dictionary', () => {
       subject = mount(<DatasetDictionary schema={schemaWithList} expanded />)
 
       const table = subject.find('.dataset-schema-table')
-      const cells = table.find('.rt-td')
+      const cells = table.find('td')
 
       const typeIndex = 2
       expect(cells.at(typeIndex).text()).toBe(`list of ${schemaWithList[0].itemType}`)
@@ -112,7 +103,7 @@ describe('dataset dictionary', () => {
     beforeEach(() => {
       subject = mount(<DatasetDictionary schema={schemaWithMaps} expanded />)
       topLevelTable = subject.find('.dataset-schema-table')
-      topLevelCells = topLevelTable.find('.rt-td')
+      topLevelCells = topLevelTable.find('td')
     })
 
     it('has the correct table values', () => {
@@ -136,7 +127,7 @@ describe('dataset dictionary', () => {
         topLevelTable = subject.find('.dataset-schema-table')
 
         subTable = topLevelTable.find('.dataset-schema-table.mother')
-        subTableCells = subTable.find('.rt-td')
+        subTableCells = subTable.find('td')
       })
 
       it('toggles the direction of the arrow', () => {
@@ -159,7 +150,7 @@ describe('dataset dictionary', () => {
       })
 
       it('indents the sub table', () => {
-        expect(subTable.find(ReactTable).props().style.marginLeft).toBe('35px')
+        expect(subTable.prop('style').marginLeft).toBe('35px')
       })
 
       it('toggles the direction of the arrow again when collapsed', () => {
@@ -175,7 +166,7 @@ describe('dataset dictionary', () => {
           subTable = subject.find('.dataset-schema-table.mother')
 
           subSubTable = subTable.find('.dataset-schema-table.children')
-          subSubTableCells = subSubTable.find('.rt-td')
+          subSubTableCells = subSubTable.find('td')
         })
 
         it('renders another sub table for the list of maps with correct values', () => {
@@ -207,8 +198,8 @@ describe('dataset dictionary', () => {
     beforeEach(() => {
       subject = mount(<DatasetDictionary schema={schemaWithMaps} expanded />)
       topLevelTable = subject.find('.dataset-schema-table')
-      const topLevelCells = topLevelTable.find('.rt-td.rt-expandable')
-      topLevelCells.at(1).simulate('click')
+      const expanderCells = topLevelTable.find('td.expander-td')
+      expanderCells.at(1).simulate('click')
       topLevelTable = subject.find('.dataset-schema-table')
     })
 
@@ -276,7 +267,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 % 4 === 1) { // 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)