@urbanos/react-discovery-ui 2.1.43

package/lib/store/visualization-selectors.test.js

@@ -0,0 +1,195 @@
+import {
+  isVisualizationSaveable,
+  dereferencedChart,
+  visualizationAllowedActions
+} from './visualization-selectors'
+import { getVisualizationDataSources } from './query-selectors'
+import { cloneDeep } from 'lodash'
+
+describe('visualizationSaveable', () => {
+  describe('with visualization set to saving', () => {
+    let state
+    beforeEach(() => {
+      state = {
+        visualization: {
+          saving: true
+        }
+      }
+    })
+    describe('and no dataset available', () => {
+      beforeEach(() => {
+        state.datasetReducer = { dataset: null }
+      })
+
+      it('returns false even if query text is available', () => {
+        state.queryReducer = { queryText: 'select * from stuff' }
+
+        expect(isVisualizationSaveable(state)).toBe(false)
+      })
+    })
+
+    describe('and dataset available', () => {
+      beforeEach(() => {
+        state.datasetReducer = { dataset: { systemName: 'stuff' } }
+      })
+
+      it('returns false even if queryText is not set', () => {
+        state.queryReducer = { queryText: '' }
+
+        expect(isVisualizationSaveable(state)).toBe(false)
+      })
+    })
+  })
+
+  describe('with visualization set to loading', () => {
+    let state
+    beforeEach(() => {
+      state = {
+        visualization: {
+          loading: true
+        }
+      }
+    })
+    describe('and no dataset available', () => {
+      beforeEach(() => {
+        state.datasetReducer = { dataset: null }
+      })
+
+      it('returns false even if query text is available', () => {
+        state.queryReducer = { queryText: 'select * from stuff' }
+
+        expect(isVisualizationSaveable(state)).toBe(false)
+      })
+    })
+
+    describe('and dataset available', () => {
+      beforeEach(() => {
+        state.datasetReducer = { dataset: { systemName: 'stuff' } }
+      })
+
+      it('returns false even if queryText is not set', () => {
+        state.queryReducer = { queryText: '' }
+
+        expect(isVisualizationSaveable(state)).toBe(false)
+      })
+    })
+  })
+
+  describe('with no visualization loading or saving status set', () => {
+    let state
+    beforeEach(() => {
+      state = {
+        visualization: {
+          loading: false,
+          saving: false
+        }
+      }
+    })
+
+    describe('and no dataset available', () => {
+      beforeEach(() => {
+        state.datasetReducer = { dataset: null }
+      })
+
+      it('returns false if query text is empty', () => {
+        state.queryReducer = { queryText: '' }
+
+        expect(isVisualizationSaveable(state)).toBe(false)
+      })
+
+      it('returns false if query text is undefined', () => {
+        state.queryReducer = {}
+
+        expect(isVisualizationSaveable(state)).toBe(false)
+      })
+
+      it('returns true if query text is available', () => {
+        state.queryReducer = { queryText: 'select * from stuff' }
+
+        expect(isVisualizationSaveable(state)).toBe(true)
+      })
+    })
+
+    describe('and dataset available', () => {
+      beforeEach(() => {
+        state.datasetReducer = { dataset: { systemName: 'stuff' } }
+      })
+
+      it('returns true if queryText is not set', () => {
+        state.queryReducer = { queryText: '' }
+
+        expect(isVisualizationSaveable(state)).toBe(true)
+      })
+    })
+  })
+})
+
+describe('dererencedChart', () => {
+  const queryDataRow = {
+    bob: 'bob\'s bob',
+    thing: 'bob\'s thing'
+  }
+  const plotlyData = [
+    {
+      type: 'scatter',
+      mode: 'markers',
+      x: ['bob\'s bob'],
+      xsrc: 'bob',
+      meta: { columnNames: { x: 'bob', y: 'thing' } },
+      y: ['bob\'s thing'],
+      ysrc: 'thing'
+    }
+  ]
+
+  let state, result, preDerefDataSources
+
+  beforeEach(() => {
+    state = {
+      queryReducer: { queryData: [queryDataRow] },
+      visualization: {
+        chart: {
+          data: plotlyData,
+          frames: [{ some: 'stuff' }],
+          layout: { more: 'stuff' }
+        }
+      }
+    }
+
+    preDerefDataSources = cloneDeep(getVisualizationDataSources(state))
+
+    result = dereferencedChart(state)
+  })
+
+  it('returns plotly data with cleared data values', () => {
+    const firstPlotData = plotlyData[0]
+    const expected = { ...state.visualization.chart, ...{ data: [{ ...firstPlotData, ...{ x: null, y: null } }] } }
+
+    expect(result).toEqual(expected)
+  })
+
+  it('does not mutate data sources', () => {
+    expect(getVisualizationDataSources(state)).toEqual(preDerefDataSources)
+  })
+})
+
+describe('visualizationAllowedActions', () => {
+  it('returns actions associated with existing visualization if one is in store', () => {
+    const state = {
+      visualization: {
+        visualization: {
+          allowedActions: [{ name: 'xxxx' }, { name: 'yyyy' }]
+        }
+      }
+    }
+
+    expect(visualizationAllowedActions(state)).toEqual(['xxxx', 'yyyy'])
+  })
+
+  it('returns only a create action when no actions are present in the store', () => {
+    const state = {
+      visualization: { visualization: {} }
+    }
+
+    expect(visualizationAllowedActions(state)).toEqual(['create'])
+  })
+})

package/lib/styles/mixins.scss

@@ -0,0 +1,117 @@
+@import "./variables.scss";
+
+@mixin flex-row() {
+  flex-direction: row;
+  justify-content: center;
+}
+
+@mixin flex-column() {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+@mixin custom-element() {
+  display: block;
+}
+
+@mixin link() {
+  color: $almost-black;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+    color: $light-blue;
+  }
+}
+
+@mixin sub-link() {
+  color: $light-blue;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+    color: $almost-black;
+  }
+}
+
+@mixin button($background-color: $dark-blue) {
+  background-color: $background-color;
+  text-decoration: none;
+  border-width: 0px;
+
+  &:hover {
+    color: white;
+    background-color: $almost-black;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}
+
+@mixin page-with-left-bar() {
+  @include custom-element();
+  $padding: 2rem;
+
+  height: calc(100% - (#{$padding} * 2));
+  min-width: $break-min;
+
+  padding: $padding;
+
+  .left-section {
+    width: 19%;
+    display: block;
+    float: left;
+    margin-right: 1%;
+  }
+
+  .right-section {
+    width: 80%;
+    display: block;
+    float: left;
+    margin-bottom: 2em !important;
+  }
+
+  @media only screen and (max-width: 600px) {
+    padding: 4%;
+    min-width: 92%;
+    display: block;
+  }
+}
+
+@mixin header() {
+  font-size: 1.7rem;
+  line-height: 2rem;
+  font-weight: bold;
+}
+
+@mixin header-medium() {
+  @include header();
+  font-size: 1.5rem;
+}
+
+@mixin header-small() {
+  @include header();
+  font-size: 1.3rem;
+}
+
+@mixin default-loading-icon() {
+  width: 5rem;
+  margin: 5rem auto;
+}
+
+@mixin menu-item-popover() {
+  .tab-button {
+    outline: none;
+  }
+
+  .popover {
+    margin-right: 0.5rem;
+    padding: 1rem;
+    border-radius: 0px;
+
+    box-shadow: 0px 5px 5px -3px $box-shadow-grey, 0px 8px 10px 1px $box-shadow-grey, 0px 3px 14px 2px $box-shadow-grey;
+
+    min-width: 20rem;
+    /* popover does not deal well with this missing */
+  }
+}

package/lib/styles/variables.scss

@@ -0,0 +1,41 @@
+$black: #000000;
+$white: #ffffff;
+$almost-black: #333;
+$super-light-grey: #f7f7f7;
+$header-grey: #ebedf0;
+$light-grey: #d2d4d6;
+$medium-grey: #97999c;
+$dark-grey: #636466;
+$csv-green: #8fd400;
+$green: #71a702;
+$error-color: #B80000;
+$warning-background: #ffdbdd;
+$light-blue: #00aeef;
+$dark-blue: #0F64B3;
+
+$box-shadow-grey: rgba(0, 0, 0, 0.2);
+
+$super-light-gray: $super-light-grey;
+$light-gray: $light-grey;
+$medium-gray: $medium-grey;
+$dark-gray: $dark-grey;
+
+$column-width: 6.92rem;
+$break-max: 1110px;
+$break-min: 768px;
+$above-max-break: "only screen and (min-width: #{$break-max})";
+$below-min-break: "only screen and (max-width: #{$break-min})";
+
+:export {
+    almostBlack: $almost-black;
+    superLightGrey: $super-light-grey;
+    headerGrey: $header-grey;
+    lightGrey: $light-grey;
+    mediumGrey: $medium-grey;
+    darkGrey: $dark-grey;
+    csvGreen: $csv-green;
+    green: $green;
+    errorColor: $error-color;
+    lightBlue: $light-blue;
+    aboveMaxBreak: unquote($above-max-break);
+}

package/lib/utils/file-type-utils.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDefaultFormat = exports.containsFileType = void 0;
+var FORMAT_OVERRIDES = {
+  gtfs: 'json'
+};
+var containsFileType = exports.containsFileType = function containsFileType(dataset, fileType) {
+  return dataset.fileTypes && dataset.fileTypes.map(function (type) {
+    return type.toLowerCase();
+  }).includes(fileType);
+};
+var getDefaultFormat = exports.getDefaultFormat = function getDefaultFormat(dataset) {
+  var format = dataset.fileTypes && dataset.fileTypes.length > 0 ? dataset.fileTypes[0].toLowerCase() : 'json';
+  return FORMAT_OVERRIDES[format] || format;
+};

package/lib/utils/file-type-utils.test.js

@@ -0,0 +1,29 @@
+import { getDefaultFormat } from './file-type-utils'
+describe('datasetUrl', () => {
+  it('returns the first file type downcased', () => {
+    const dataset = {
+      id: 'dataset_id',
+      sourceType: 'ingest',
+      fileTypes: ['A-Positive', 'ONEGATIVE']
+    }
+
+    expect(getDefaultFormat(dataset)).toBe('a-positive')
+  })
+
+  it('returns json as the format instead of gtfs', () => {
+    const dataset = {
+      id: 'dataset_id',
+      fileTypes: ['gtfs']
+    }
+
+    expect(getDefaultFormat(dataset)).toBe('json')
+  })
+
+  it('returns json when no file types are present', () => {
+    const dataset = {
+      id: 'dataset_id',
+      fileTypes: []
+    }
+    expect(getDefaultFormat(dataset)).toBe('json')
+  })
+})

package/lib/utils/geojson-utils.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _lodash = _interopRequireDefault(require("lodash"));
+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 determineBBox = function determineBBox(geoJsonData) {
+  return geoJsonData.bbox ? geoJsonData.bbox : calculateBBox(geoJsonData);
+};
+var calculateBBox = function calculateBBox(geoJsonData) {
+  var initial = {
+    minLong: 1000,
+    minLat: 1000,
+    maxLong: -1000,
+    maxLat: -1000
+  };
+  var bounds = _lodash.default.chain(geoJsonData.features).map(flattenCoordinateLists).flatten().reduce(getNewBounds, initial).value();
+  return [bounds.minLong, bounds.minLat, bounds.maxLong, bounds.maxLat];
+};
+var flattenCoordinateLists = function flattenCoordinateLists(feature) {
+  switch (feature.geometry.type) {
+    case 'MultiLineString':
+      return _lodash.default.flatten(feature.geometry.coordinates);
+    case 'LineString':
+      return feature.geometry.coordinates;
+    default:
+      return [];
+  }
+};
+var getNewBounds = function getNewBounds(bounds, coordinate) {
+  var long = coordinate[0];
+  var lat = coordinate[1];
+  return {
+    minLat: Math.min(lat, bounds.minLat),
+    maxLat: Math.max(lat, bounds.maxLat),
+    minLong: Math.min(long, bounds.minLong),
+    maxLong: Math.max(long, bounds.maxLong)
+  };
+};
+var isValidBBox = function isValidBBox(boundingBox) {
+  if (!boundingBox || boundingBox.length != 4) {
+    return false;
+  }
+  var _boundingBox = _slicedToArray(boundingBox, 4),
+    minLong = _boundingBox[0],
+    minLat = _boundingBox[1],
+    maxLong = _boundingBox[2],
+    maxLat = _boundingBox[3];
+  if (boundingBox.some(function (x) {
+    return x === null;
+  })) {
+    return false;
+  }
+  if (minLong > maxLong || minLat > maxLat || minLong < -180 || minLong > 180 || minLat < -90 || minLat > 90 || maxLong < -180 || maxLong > 180 || maxLat < -90 || maxLat > 90) {
+    return false;
+  }
+  return true;
+};
+var _default = exports.default = {
+  determineBBox: determineBBox,
+  isValidBBox: isValidBBox
+};

package/lib/utils/geojson-utils.test.js

@@ -0,0 +1,129 @@
+import { GeoJsonUtils } from './'
+
+describe('determine bounding box', () => {
+  it('returns bbox when present on the dataset', () => {
+    const bbox = [5, 4, 3, 2]
+    const geoJsonData = { bbox: bbox }
+
+    const result = GeoJsonUtils.determineBBox(geoJsonData)
+
+    expect(result).toEqual(bbox)
+  })
+
+  describe('when bbox is not present on the dataset', () => {
+    it('calculates bbox for multi-line strings', () => {
+      const geoJsonData = {
+        features: [
+          {
+            geometry: {
+              type: 'MultiLineString',
+              coordinates: [[[1, 2], [3, 4]], [[5, 8]]]
+            }
+          },
+          {
+            geometry: {
+              type: 'MultiLineString',
+              coordinates: [[[7, 6]]]
+            }
+          }
+        ]
+      }
+
+      const result = GeoJsonUtils.determineBBox(geoJsonData)
+
+      expect(result).toEqual([1, 2, 7, 8])
+    })
+
+    it('calculates bbox for singe-line strings', () => {
+      const geoJsonData = {
+        features: [{
+          geometry: {
+            type: 'LineString',
+            coordinates: [[1, 2], [3, 8]]
+          }
+        }, {
+          geometry: {
+            type: 'LineString',
+            coordinates: [[7, 4], [5, 6]]
+          }
+        }]
+      }
+
+      const result = GeoJsonUtils.determineBBox(geoJsonData)
+
+      expect(result).toEqual([1, 2, 7, 8])
+    })
+
+    it('calculates bbox for a mix of single and multi-line strings', () => {
+      const geoJsonData = {
+        features: [
+          {
+            geometry: {
+              type: 'LineString',
+              coordinates: [[1, -6], [3, 8]]
+            }
+          },
+          {
+            geometry: {
+              type: 'MultiLineString',
+              coordinates: [[[7, 6], [-1, 2]], [[5, 4], [10, 12]]]
+            }
+          }
+        ]
+      }
+
+      const result = GeoJsonUtils.determineBBox(geoJsonData)
+
+      expect(result).toEqual([-1, -6, 10, 12])
+    })
+  })
+})
+
+describe('is valid bounding box', () => {
+  it('returns false if bounding box is not provided', () => {
+    expect(GeoJsonUtils.isValidBBox()).toBe(false)
+  })
+
+  it('returns false if bounding box does not have right number of values', () => {
+    expect(GeoJsonUtils.isValidBBox([-180, -90, 180])).toBe(false)
+    expect(GeoJsonUtils.isValidBBox([-180, -90, 180, 90, -180])).toBe(false)
+  })
+
+  it('returns false if minLong is out of range', () => {
+    expect(GeoJsonUtils.isValidBBox([-190, -90, 180, 90])).toBe(false)
+    expect(GeoJsonUtils.isValidBBox([190, -90, 180, 90])).toBe(false)
+  })
+
+  it('returns false if minLat is out of range', () => {
+    expect(GeoJsonUtils.isValidBBox([-180, -90.1, 180, 90])).toBe(false)
+    expect(GeoJsonUtils.isValidBBox([-180, 90.5, 180, 90])).toBe(false)
+  })
+
+  it('returns false if maxLong is out of range', () => {
+    expect(GeoJsonUtils.isValidBBox([-180, -90, -180.5, 90])).toBe(false)
+    expect(GeoJsonUtils.isValidBBox([-180, -90, 180.2, 90])).toBe(false)
+  })
+
+  it('returns false if maxLat is out of range', () => {
+    expect(GeoJsonUtils.isValidBBox([-180, -90, 180, -90.5])).toBe(false)
+    expect(GeoJsonUtils.isValidBBox([-180, -90, 180, 90.2])).toBe(false)
+  })
+
+  it('returns false if minLong and maxLong are reversed', () => {
+    expect(GeoJsonUtils.isValidBBox([0, -90, -1, 90])).toBe(false)
+  })
+
+  it('returns false if minLat and maxLat are reversed', () => {
+    expect(GeoJsonUtils.isValidBBox([-180, 1, 180, 0])).toBe(false)
+  })
+
+  it('returns false if any value of the array is null', () => {
+    expect(GeoJsonUtils.isValidBBox([null, null, null, null])).toBe(false)
+    expect(GeoJsonUtils.isValidBBox([null, -90, 180, 90])).toBe(false)
+    expect(GeoJsonUtils.isValidBBox([-180, -90, null, 90])).toBe(false)
+  })
+
+  it('returns true if all values are in range', () => {
+    expect(GeoJsonUtils.isValidBBox([-180, -90, 180, 90])).toBe(true)
+  })
+})