@urbanos/react-discovery-ui 2.1.43

package/lib/components/visualization-list-menu-item/visualization-list-menu-item.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _folderIcon = _interopRequireDefault(require("../generic-elements/folder-icon"));
+var _tabButton = _interopRequireDefault(require("../generic-elements/tab-button"));
+var _autoAnchoringPopover = _interopRequireDefault(require("../generic-elements/auto-anchoring-popover"));
+var _reactRouterDom = require("react-router-dom");
+var _auth0LoginZone = _interopRequireDefault(require("../auth0-login-zone"));
+require("./visualization-list-menu-item.scss");
+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 VisualizationListMenuItem = function VisualizationListMenuItem(_ref) {
+  var isAuthenticated = _ref.isAuthenticated;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    userNeedsLoginInfo = _useState2[0],
+    setUserNeedsLoginInfo = _useState2[1];
+  var showLoginPrompt = function showLoginPrompt() {
+    setUserNeedsLoginInfo(true);
+  };
+  var closeLoginPrompt = function closeLoginPrompt() {
+    setUserNeedsLoginInfo(false);
+  };
+  return /*#__PURE__*/React.createElement("visualization-list-menu-item", null, /*#__PURE__*/React.createElement(_tabButton.default, {
+    "data-testid": "visualization-list-menu-item",
+    className: "button-".concat(isAuthenticated ? 'enabled' : 'disabled', " ").concat(userNeedsLoginInfo && 'dialog-open'),
+    onClick: showLoginPrompt
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "visualization-list-menu-item-icon-holder",
+    title: "Saved Workspaces"
+  }, /*#__PURE__*/React.createElement(_folderIcon.default, {
+    className: "header-item link-".concat(isAuthenticated ? 'enabled' : 'disabled'),
+    accessibilityDesc: "Open Saved Workspaces"
+  }))), /*#__PURE__*/React.createElement(_autoAnchoringPopover.default, {
+    className: "login-prompt popover-anchor",
+    open: !isAuthenticated && userNeedsLoginInfo,
+    onClose: closeLoginPrompt,
+    classes: {
+      paper: 'popover',
+      root: 'popover-root'
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "You must log in to see your saved workspaces."), /*#__PURE__*/React.createElement(_auth0LoginZone.default, null))));
+};
+var _default = exports.default = VisualizationListMenuItem;

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

@@ -0,0 +1,21 @@
+@import "../../styles/variables.scss";
+@import "../../styles/mixins.scss";
+
+visualization-list-menu-item {
+  .folder-icon {
+    color: inherit;
+  }
+
+  .header-item {
+    color: inherit;
+  }
+
+  .dialog-open {
+    box-shadow: -5px 0 5px -5px $box-shadow-grey, 5px 0 5px -5px $box-shadow-grey;
+    background-color: white;
+    opacity: 1;
+    z-index: 1000;
+  }
+
+  @include menu-item-popover();
+}

package/lib/components/visualization-list-menu-item/visualization-list-menu-item.test.js

@@ -0,0 +1,42 @@
+import { shallow } from 'enzyme'
+import VisualizationListMenuItem from './visualization-list-menu-item'
+import Auth0LoginZone from '../auth0-login-zone'
+
+describe('visualization list menu item', () => {
+  let subject
+  describe('when user clicks the icon to see their saved visualizations', () => {
+    describe('and when the user is not logged in', () => {
+      beforeEach(() => {
+        subject = createSubject({ isAuthenticated: false })
+        subject.find('.button-disabled').simulate('click')
+        subject.find('.link-disabled').simulate('click')
+      })
+
+      it('displays a prompt for the user to log in', () => {
+        expect(subject.find('.login-prompt').props().open).toBeTruthy()
+        expect(subject.find(Auth0LoginZone)).toHaveLength(1)
+      })
+    })
+
+    describe('and when the user is logged in', () => {
+      beforeEach(() => {
+        subject = createSubject({ isAuthenticated: true })
+        subject.find('.button-enabled').simulate('click')
+      })
+
+      it('does not display a login prompt', () => {
+        expect(subject.find('.login-prompt').props().open).toBeFalsy()
+      })
+    })
+  })
+})
+
+const createSubject = (props = {}) => {
+  const defaultProps = {
+    isAuthenticated: false
+  }
+
+  const propsWithDefaults = Object.assign({}, defaultProps, props)
+
+  return shallow(<VisualizationListMenuItem {...propsWithDefaults} />)
+}

package/lib/components/visualization-save-menu-item/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _visualizationSaveMenuItem = _interopRequireDefault(require("./visualization-save-menu-item"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _visualizationSaveMenuItem.default;

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

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _autoAnchoringPopover = _interopRequireDefault(require("../../components/generic-elements/auto-anchoring-popover"));
+var _tabButton = _interopRequireDefault(require("../../components/generic-elements/tab-button"));
+var _Save = _interopRequireDefault(require("@material-ui/icons/Save"));
+var _saveIndicator = _interopRequireDefault(require("../../components/generic-elements/save-indicator"));
+var _auth0LoginZone = _interopRequireDefault(require("../auth0-login-zone"));
+var _lodash = require("lodash");
+require("./visualization-save-menu-item.scss");
+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 buttonActions = {
+  saveButton: ['create', 'update'],
+  saveCopyButton: ['create_copy']
+};
+var VisualizationSaveMenuItem = function VisualizationSaveMenuItem(props) {
+  var isSaveable = props.isSaveable,
+    title = props.title,
+    allowedActions = props.allowedActions,
+    handleTitleChange = props.handleTitleChange,
+    handleSaveOrUpdate = props.handleSaveOrUpdate,
+    isSaving = props.isSaving,
+    isSaveSuccess = props.isSaveSuccess,
+    isSaveFailure = props.isSaveFailure,
+    linkUrl = props.linkUrl,
+    isAuthenticated = props.isAuthenticated;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDialogOpen = _useState2[0],
+    setDialogOpen = _useState2[1];
+  var openDialog = function openDialog() {
+    setDialogOpen(true);
+  };
+  var closeDialog = function closeDialog() {
+    setDialogOpen(false);
+  };
+  var buttonDisabled = function buttonDisabled(buttonKey) {
+    var actionNotAllowed = (0, _lodash.intersection)(buttonActions[buttonKey], allowedActions).length == 0;
+    return !isAuthenticated || (0, _lodash.isEmpty)(title) || actionNotAllowed;
+  };
+  return /*#__PURE__*/React.createElement("visualization-save-menu-item", null, /*#__PURE__*/React.createElement(_tabButton.default, {
+    "data-testid": "save-icon",
+    disabled: !isSaveable,
+    className: "header-item save-icon ".concat(isDialogOpen && 'saving'),
+    onClick: openDialog
+  }, /*#__PURE__*/React.createElement("div", {
+    title: "Save Workspace"
+  }, /*#__PURE__*/React.createElement(_Save.default, null))), /*#__PURE__*/React.createElement(_autoAnchoringPopover.default, {
+    className: "save-prompt popover-anchor",
+    open: isDialogOpen,
+    onClose: closeDialog,
+    classes: {
+      paper: 'popover',
+      root: 'popover-root'
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("b", null, "Workspace Title: "), /*#__PURE__*/React.createElement("input", {
+    className: "title-input",
+    type: "text",
+    value: title || '',
+    onChange: handleTitleChange
+  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", {
+    className: "button-container"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
+    "data-testid": "save-button",
+    className: "save-button",
+    onClick: function onClick() {
+      handleSaveOrUpdate({});
+    },
+    disabled: buttonDisabled('saveButton')
+  }, "Save"), /*#__PURE__*/React.createElement("button", {
+    "data-testid": "save-copy-button",
+    className: "save-copy-button",
+    onClick: function onClick() {
+      handleSaveOrUpdate({
+        shouldCreateCopy: true
+      });
+    },
+    disabled: buttonDisabled('saveCopyButton')
+  }, "Save a Copy")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
+    "data-testid": "cancel-button",
+    onClick: closeDialog
+  }, "Cancel"))), /*#__PURE__*/React.createElement(_saveIndicator.default, {
+    saving: isSaving,
+    success: isSaveSuccess,
+    failure: isSaveFailure,
+    linkUrl: linkUrl
+  }), !isAuthenticated && /*#__PURE__*/React.createElement("div", {
+    className: "login-prompt"
+  }, /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement("span", null, "You must log in to save your workspace."), /*#__PURE__*/React.createElement(_auth0LoginZone.default, null)))));
+};
+var _default = exports.default = VisualizationSaveMenuItem;

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

@@ -0,0 +1,37 @@
+@import "../../styles/mixins.scss";
+@import "../../styles/variables.scss";
+
+visualization-save-menu-item {
+  height: 59%;
+
+  .save-icon {
+    margin-right: 0.5rem;
+    display: block;
+    position: relative;
+  }
+
+  .save-icon.saving {
+    box-shadow: -5px 0 5px -5px $box-shadow-grey, 5px 0 5px -5px $box-shadow-grey;
+    background-color: white;
+    opacity: 1;
+    z-index: 1000;
+  }
+
+  .title-input {
+    width: 12rem;
+  }
+
+  .button-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin: 1rem 0 0;
+  }
+
+  .save-copy-button {
+    margin-left: 0.5rem;
+  }
+
+  @include menu-item-popover();
+}

package/lib/components/visualization-save-menu-item/visualization-save-menu-item.test.js

@@ -0,0 +1,185 @@
+import { shallow } from 'enzyme'
+import SaveIndicator from '../generic-elements/save-indicator'
+import VisualizationSaveMenuItem from './visualization-save-menu-item'
+
+describe('visualization save menu item', () => {
+  let subject, saveHandler
+  const id = '123456'
+
+  describe('authenticated', () => {
+    beforeEach(() => {
+      saveHandler = jest.fn()
+    })
+
+    describe('when visualization save button is clicked to update a previously saved visualization', () => {
+      beforeEach(() => {
+        subject = createSubject({ isSaving: true })
+
+        subject.find('.save-icon').simulate('click')
+      })
+
+      it('displays the saving status popover', () => {
+        expect(subject.find('.save-prompt').props().open).toEqual(true)
+      })
+
+      it('sets the saving indicator', () => {
+        expect(subject.find(SaveIndicator).length).toBe(1)
+      })
+    })
+
+    describe('when visualization save icon is clicked to save a new visualization', () => {
+      beforeEach(() => {
+        subject = createSubject({ isSaving: false, handleSaveOrUpdate: saveHandler })
+
+        subject.find('.save-icon').simulate('click')
+      })
+
+      it('displays the title prompt popover', () => {
+        expect(subject.find('.save-prompt').props().open).toEqual(true)
+        expect(subject.find('.title-input').length).toEqual(1)
+        expect(subject.find('.save-button').length).toEqual(1)
+      })
+
+      it('disables the save buttons when no query title has been set', () => {
+        expect(subject.find('.save-button').props().disabled).toBeTruthy()
+        expect(subject.find('.save-copy-button').props().disabled).toBeTruthy()
+      })
+
+      it('calls back to save handler when save button is clicked', () => {
+        subject.find('.save-button').simulate('click')
+        expect(saveHandler).toHaveBeenCalled()
+        const arg = saveHandler.mock.calls[0][0]
+        expect(arg.shouldCreateCopy).toBeFalsy()
+      })
+
+      it('calls back to save handler with shouldCreateCopy flag when save-copy button is clicked', () => {
+        subject.find('.save-copy-button').simulate('click')
+        expect(saveHandler).toHaveBeenCalledWith({ shouldCreateCopy: true })
+      })
+    })
+
+    it('enables the save button when the query title has been set', () => {
+      subject = createSubject({ title: 'title' })
+
+      expect(subject.find('.save-button').props().disabled).toBeFalsy()
+    })
+
+    describe('allowed actions', () => {
+      it('enables no save buttons when no actions are allowed', () => {
+        subject = createSubject({ title: 'title', allowedActions: [] })
+
+        expect(subject.find('.save-copy-button').props().disabled).toBeTruthy()
+        expect(subject.find('.save-button').props().disabled).toBeTruthy()
+      })
+
+      it('enables only the "save copy" button when create_copy action is allowed', () => {
+        subject = createSubject({ title: 'title', allowedActions: ['create_copy'] })
+
+        expect(subject.find('.save-copy-button').props().disabled).toBeFalsy()
+        expect(subject.find('.save-button').props().disabled).toBeTruthy()
+      })
+
+      it('enables only the save button when update action is allowed', () => {
+        subject = createSubject({ title: 'title', allowedActions: ['update'] })
+
+        expect(subject.find('.save-copy-button').props().disabled).toBeTruthy()
+        expect(subject.find('.save-button').props().disabled).toBeFalsy()
+      })
+
+      it('enables only the save button when create action is allowed', () => {
+        subject = createSubject({ title: 'title', allowedActions: ['create'] })
+
+        expect(subject.find('.save-copy-button').props().disabled).toBeTruthy()
+        expect(subject.find('.save-button').props().disabled).toBeFalsy()
+      })
+    })
+
+    describe('when save succeeds', () => {
+      beforeEach(() => {
+        subject = createSubject({ isSaveSuccess: true, linkUrl: '/visualization/123456' })
+      })
+
+      it('indicates the save succeeded', () => {
+        expect(subject.find(SaveIndicator).props().success).toBe(true)
+        expect(subject.find(SaveIndicator).props().failure).toBe(false)
+        expect(subject.find(SaveIndicator).props().saving).toBe(false)
+      })
+
+      it('displays a generated link', () => {
+        expect(subject.find(SaveIndicator).props().linkUrl).toBe(`/visualization/${id}`)
+      })
+    })
+
+    describe('when save fails', () => {
+      beforeEach(() => {
+        subject = createSubject({ isSaveFailure: true })
+      })
+
+      it('indicates the save failed', () => {
+        expect(subject.find(SaveIndicator).props().failure).toBe(true)
+        expect(subject.find(SaveIndicator).props().success).toBe(false)
+        expect(subject.find(SaveIndicator).props().saving).toBe(false)
+      })
+    })
+
+    describe('when visualization is not able to be saved', () => {
+      beforeEach(() => {
+        subject = createSubject({ isSaveable: false })
+      })
+
+      it('disables the save button', () => {
+        expect(subject.find('.save-icon').props().disabled).toBeTruthy()
+      })
+    })
+
+    describe('when visualization is able to be saved', () => {
+      beforeEach(() => {
+        subject = createSubject({ isSaveable: true })
+      })
+
+      it('enables the save button', () => {
+        expect(subject.find('.save-icon').props().disabled).toBeFalsy()
+      })
+    })
+
+    it('does not show the login prompt', () => {
+      subject = createSubject({ isAuthenticated: true })
+
+      expect(subject.find('.login-prompt')).toHaveLength(0)
+    })
+  })
+
+  describe('NOT authenticated', () => {
+    beforeEach(() => {
+      subject = createSubject({ isAuthenticated: false, title: 'title' })
+    })
+
+    it('displays a prompt for the user to login', () => {
+      expect(subject.find('.login-prompt')).toHaveLength(1)
+    })
+
+    it('disables the save buttons even when otherwise saveable', () => {
+      expect(subject.find('.save-button').props().disabled).toBeTruthy()
+      expect(subject.find('.save-copy-button').props().disabled).toBeTruthy()
+    })
+  })
+})
+
+const createSubject = (props = {}) => {
+  const defaultProps = {
+    isSaveable: false,
+    title: undefined,
+    handleTitleChange: jest.fn(),
+    handleSaveOrUpdate: jest.fn(),
+    isSaving: false,
+    isSaveSuccess: false,
+    isSaveFailure: false,
+    linkUrl: undefined,
+    isAuthenticated: true,
+    allowedActions: ['create']
+  }
+
+  const propsWithDefaults = Object.assign({}, defaultProps, props)
+
+  return shallow(<VisualizationSaveMenuItem {...propsWithDefaults} />)
+}

package/lib/components/visualizations/geojson/connector.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactRedux = require("react-redux");
+var _geojsonVisualization = _interopRequireDefault(require("./geojson-visualization"));
+var _actions = require("../../../store/actions");
+var _selectors = require("../../../store/selectors");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var mapStateToProps = function mapStateToProps(state) {
+  return {
+    downloadedGeoJsonData: (0, _selectors.getDownloadedDataset)(state),
+    previewedGeoJsonData: (0, _selectors.getDataSetPreview)(state, 'geojson'),
+    downloadedDatasetError: (0, _selectors.getDownloadedDatasetError)(state)
+  };
+};
+var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+  return {
+    downloadDataset: function downloadDataset(datasetId, format) {
+      return dispatch((0, _actions.downloadDataset)(datasetId, format));
+    },
+    previewDataset: function previewDataset(datasetId, format) {
+      return dispatch((0, _actions.retrieveDatasetPreview)(datasetId, format));
+    }
+  };
+};
+var _default = exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_geojsonVisualization.default);

package/lib/components/visualizations/geojson/geojson-visualization.js

@@ -0,0 +1,151 @@
+"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 _reactLeaflet = require("react-leaflet");
+require("./geojson-visualization.scss");
+require("!style-loader!css-loader!leaflet/dist/leaflet.css");
+var _loadingElement = _interopRequireDefault(require("../../../components/generic-elements/loading-element"));
+var _utils = require("../../../utils");
+var _errorComponent = _interopRequireDefault(require("../../../components/generic-elements/error-component"));
+var _checkbox = _interopRequireDefault(require("../../../components/generic-elements/checkbox"));
+var _collapsableBox = _interopRequireDefault(require("../../../components/collapsable-box"));
+var _leaflet2 = _interopRequireDefault(require("leaflet"));
+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; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); } // this one weird trick to make leaflet markers show up correctly when webpacked
+delete _leaflet2.default.Icon.Default.prototype._getIconUrl;
+_leaflet2.default.Icon.Default.mergeOptions({
+  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
+  iconUrl: require('leaflet/dist/images/marker-icon.png'),
+  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
+});
+var ohioBBox = [-84.811309, 38.483320, -80.541532, 41.971108];
+var description = 'This only shows the first 50 features in the dataset, to view all features press the toggle below or download the dataset';
+var GeoJSONVisualization = exports.default = /*#__PURE__*/function (_React$Component) {
+  function GeoJSONVisualization(props) {
+    var _this;
+    _classCallCheck(this, GeoJSONVisualization);
+    _this = _callSuper(this, GeoJSONVisualization, [props]);
+    _this.state = {
+      showFullMap: false
+    };
+    return _this;
+  }
+  _inherits(GeoJSONVisualization, _React$Component);
+  return _createClass(GeoJSONVisualization, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.downloadDataset(this.props.datasetId, 'geojson');
+      this.props.previewDataset(this.props.datasetId, 'geojson');
+    }
+  }, {
+    key: "onMapToggleClick",
+    value: function onMapToggleClick() {
+      this.setState({
+        showFullMap: !this.state.showFullMap
+      });
+    }
+  }, {
+    key: "isMapToggleDisabled",
+    value: function isMapToggleDisabled() {
+      var downloaded = this.props.downloadedGeoJsonData;
+      var previewed = this.props.previewedGeoJsonData;
+      if (previewed && downloaded) {
+        return previewed.features.length === downloaded.features.length;
+      } else {
+        return true;
+      }
+    }
+  }, {
+    key: "formatBboxToLeafletBounds",
+    value: function formatBboxToLeafletBounds(bbox) {
+      var _bbox = _slicedToArray(bbox, 4),
+        xmin = _bbox[0],
+        ymin = _bbox[1],
+        xmax = _bbox[2],
+        ymax = _bbox[3];
+      return [[ymin, xmin], [ymax, xmax]];
+    }
+  }, {
+    key: "renderMap",
+    value: function renderMap(geoJsonData, source, isHidden) {
+      if (geoJsonData) {
+        var bBox = _utils.GeoJsonUtils.determineBBox(geoJsonData);
+        bBox = _utils.GeoJsonUtils.isValidBBox(bBox) ? bBox : ohioBBox;
+        return /*#__PURE__*/_react.default.createElement("div", {
+          "data-testid": "".concat(source, "-map"),
+          className: isHidden ? 'hidden' : '',
+          "test-id": "".concat(source, "-map")
+        }, /*#__PURE__*/_react.default.createElement(_reactLeaflet.Map, {
+          bounds: this.formatBboxToLeafletBounds(bBox)
+        }, /*#__PURE__*/_react.default.createElement(_reactLeaflet.TileLayer, {
+          url: window.STREETS_TILE_LAYER_URL,
+          className: "geo-json"
+        }), /*#__PURE__*/_react.default.createElement(_reactLeaflet.GeoJSON, {
+          data: geoJsonData,
+          className: "geo-json"
+        })));
+      }
+      return /*#__PURE__*/_react.default.createElement("div", null);
+    }
+  }, {
+    key: "renderMapOrLoading",
+    value: function renderMapOrLoading() {
+      var isLoading = !this.props.previewedGeoJsonData && !this.props.downloadedGeoJsonData;
+      if (isLoading) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: "map-placeholder"
+        }, /*#__PURE__*/_react.default.createElement(_loadingElement.default, {
+          className: "spinner"
+        }));
+      } else {
+        return /*#__PURE__*/_react.default.createElement("div", null, this.renderMap(this.props.previewedGeoJsonData, 'preview', this.state.showFullMap), this.renderMap(this.props.downloadedGeoJsonData, 'downloaded', !this.state.showFullMap));
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      if (this.props.downloadedDatasetError) {
+        return /*#__PURE__*/_react.default.createElement(_errorComponent.default, {
+          errorText: "Unable to load GeoJson Data"
+        });
+      }
+      return /*#__PURE__*/_react.default.createElement(_collapsableBox.default, {
+        class: "geo-json-visualization",
+        title: "Map Preview",
+        headerHtml: description,
+        expanded: true
+      }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_checkbox.default, {
+        id: "toggleFullDataset",
+        clickHandler: function clickHandler() {
+          return _this2.onMapToggleClick();
+        },
+        text: "Show Full Dataset",
+        selected: this.state.showFullMap,
+        disabled: this.isMapToggleDisabled()
+      }), this.renderMapOrLoading()));
+    }
+  }]);
+}(_react.default.Component);

package/lib/components/visualizations/geojson/geojson-visualization.scss

@@ -0,0 +1,24 @@
+@import "../../../styles/variables.scss";
+@import "../../../styles/mixins.scss";
+
+.leaflet-container,
+.map-placeholder {
+  height: 425px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.map-placeholder {
+  background-color: $light-gray;
+}
+
+.map-placeholder loading-element {
+  @include default-loading-icon();
+  margin-top: 0;
+  padding-top: 22%;
+}
+
+.hidden {
+  visibility: hidden;
+  height: 0;
+}