-
- { console.log('clicked query') }}
- />
-
-
-
-
-
-
+const ExploreViewContainer = function () {
+ return (
+
+
+
+ { console.log('clicked query'); }}
+ />
+
+
+
+
+
- );
- }
-}
+
+ );
+};
+
+export default ExploreViewContainer;
diff --git a/caravel/assets/javascripts/explorev2/index.jsx b/caravel/assets/javascripts/explorev2/index.jsx
index 2ca33b10be5e6..53e8a64035f45 100644
--- a/caravel/assets/javascripts/explorev2/index.jsx
+++ b/caravel/assets/javascripts/explorev2/index.jsx
@@ -2,12 +2,28 @@ import React from 'react';
import ReactDOM from 'react-dom';
import ExploreViewContainer from './components/ExploreViewContainer';
+import { createStore } from 'redux';
+import { Provider } from 'react-redux';
+import { enhancer } from '../../utils/common';
+
+import { initialState } from './stores/store';
+
const exploreViewContainer = document.getElementById('js-explore-view-container');
const bootstrapData = exploreViewContainer.getAttribute('data-bootstrap');
+import { exploreReducer } from './reducers/exploreReducer';
+
+const bootstrappedState = Object.assign(initialState, {
+ datasources: bootstrapData.datasources,
+ viz: bootstrapData.viz,
+});
+const store = createStore(exploreReducer, bootstrappedState, enhancer);
+
ReactDOM.render(
-
,
+
+
+ ,
exploreViewContainer
);
diff --git a/caravel/assets/javascripts/explorev2/reducers/exploreReducer.js b/caravel/assets/javascripts/explorev2/reducers/exploreReducer.js
new file mode 100644
index 0000000000000..e7c0de6d49a8e
--- /dev/null
+++ b/caravel/assets/javascripts/explorev2/reducers/exploreReducer.js
@@ -0,0 +1,65 @@
+import * as actions from '../actions/exploreActions';
+import { addToArr, removeFromArr } from '../../../utils/reducerUtils';
+
+export const exploreReducer = function (state, action) {
+ const actionHandlers = {
+ [actions.SET_DATASOURCE]() {
+ return Object.assign({}, state, { datasourceId: action.datasourceId });
+ },
+ [actions.SET_VIZTYPE]() {
+ return Object.assign({}, state, { vizType: action.vizType });
+ },
+ [actions.SET_TIME_FILTER]() {
+ return Object.assign({}, state, { timeFilter: action.timeFilter });
+ },
+ [actions.SET_GROUPBY]() {
+ return Object.assign({}, state, { groupBy: action.groupBy });
+ },
+ [actions.ADD_COLUMN]() {
+ return Object.assign({}, state, { columns: [...state.columns, action.column] });
+ },
+ [actions.REMOVE_COLUMN]() {
+ const newColumns = [];
+ state.columns.forEach((c) => {
+ if (c !== action.column) {
+ newColumns.push(c);
+ }
+ });
+ return Object.assign({}, state, { columns: newColumns });
+ },
+ [actions.ADD_ORDERING]() {
+ return Object.assign({}, state, { orderings: [...state.orderings, action.ordering] });
+ },
+ [actions.REMOVE_ORDERING]() {
+ const newOrderings = [];
+ state.orderings.forEach((o) => {
+ if (o !== action.ordering) {
+ newOrderings.push(o);
+ }
+ });
+ return Object.assign({}, state, { orderings: newOrderings });
+ },
+ [actions.SET_TIME_STAMP]() {
+ return Object.assign({}, state, { timeStampFormat: action.timeStampFormat });
+ },
+ [actions.SET_ROW_LIMIT]() {
+ return Object.assign({}, state, { rowLimit: action.rowLimit });
+ },
+ [actions.TOGGLE_SEARCHBOX]() {
+ return Object.assign({}, state, { searchBox: action.searchBox });
+ },
+ [actions.SET_SQL]() {
+ return Object.assign({}, state, { SQL: action.sql });
+ },
+ [actions.ADD_FILTER]() {
+ return addToArr(state, 'filters', action.filter);
+ },
+ [actions.REMOVE_FILTER]() {
+ return removeFromArr(state, 'filters', action.filter);
+ },
+ };
+ if (action.type in actionHandlers) {
+ return actionHandlers[action.type]();
+ }
+ return state;
+};
diff --git a/caravel/assets/javascripts/explorev2/stores/store.js b/caravel/assets/javascripts/explorev2/stores/store.js
new file mode 100644
index 0000000000000..5dcfd2d387a9e
--- /dev/null
+++ b/caravel/assets/javascripts/explorev2/stores/store.js
@@ -0,0 +1,32 @@
+const defaultTimeFilter = {
+ timeColumn: null,
+ timeGrain: null,
+ since: null,
+ until: null,
+};
+
+const defaultGroupBy = {
+ groupByColumn: [],
+ metrics: [],
+};
+
+const defaultSql = {
+ where: '',
+ having: '',
+};
+
+export const initialState = {
+ datasources: null,
+ datasourceId: null,
+ viz: null,
+ vizType: null,
+ timeFilter: defaultTimeFilter,
+ groupBy: defaultGroupBy,
+ columns: [],
+ orderings: [],
+ timeStampFormat: null,
+ rowLimit: null,
+ searchBox: false,
+ SQL: defaultSql,
+ filters: [],
+};
diff --git a/caravel/assets/package.json b/caravel/assets/package.json
index 321def76482ad..ceea555445880 100644
--- a/caravel/assets/package.json
+++ b/caravel/assets/package.json
@@ -101,9 +101,9 @@
"eslint-plugin-jsx-a11y": "^2.0.1",
"eslint-plugin-react": "^5.2.2",
"exports-loader": "^0.6.3",
- "istanbul": "^1.0.0-alpha",
"file-loader": "^0.8.5",
"imports-loader": "^0.6.5",
+ "istanbul": "^1.0.0-alpha",
"jsdom": "^8.0.1",
"json-loader": "^0.5.4",
"less": "^2.6.1",
diff --git a/caravel/assets/spec/javascripts/explore/components/actions_spec.js b/caravel/assets/spec/javascripts/explore/components/actions_spec.js
new file mode 100644
index 0000000000000..eebfbb144142e
--- /dev/null
+++ b/caravel/assets/spec/javascripts/explore/components/actions_spec.js
@@ -0,0 +1,121 @@
+import { expect } from 'chai';
+import shortid from 'shortid';
+import * as actions from '../../../../javascripts/explorev2/actions/exploreActions';
+import { initialState } from '../../../../javascripts/explorev2/stores/store';
+import { exploreReducer } from '../../../../javascripts/explorev2/reducers/exploreReducer';
+
+describe('reducers', () => {
+
+ it('should return new state with datasource id', () => {
+ const newState = exploreReducer(initialState, actions.setDatasource(1));
+ expect(newState.datasourceId).to.equal(1);
+ });
+
+ it('should return new state with viz type', () => {
+ const newState = exploreReducer(initialState, actions.setVizType('bar'));
+ expect(newState.vizType).to.equal('bar');
+ });
+
+ it('should return new state with time filter', () => {
+ const newTimeFilter = {
+ timeColumn: 1,
+ timeGrain: 1,
+ since: 1,
+ until: 2,
+ };
+ const newState = exploreReducer(initialState, actions.setTimeFilter(newTimeFilter));
+ expect(newState.timeFilter).to.deep.equal(newTimeFilter);
+ });
+
+ it('should return new state with group by', () => {
+ const newGroupBy = {
+ groupByColumn: ['col1'],
+ metrics: ['sum_value'],
+ };
+ const newState = exploreReducer(initialState, actions.setGroupBy(newGroupBy));
+ expect(newState.groupBy).to.deep.equal(newGroupBy);
+ });
+
+ it('should return new state with added column', () => {
+ const newColumn = 'col';
+ const newState = exploreReducer(initialState, actions.addColumn(newColumn));
+ expect(newState.columns).to.deep.equal([newColumn]);
+ });
+
+ it('should return new state with removed column', () => {
+ const testState = { initialState, columns: ['col1', 'col2'] };
+ const remColumn = 'col1';
+ const newState = exploreReducer(testState, actions.removeColumn(remColumn));
+ expect(newState.columns).to.deep.equal(['col2']);
+ });
+
+ it('should return new state with added ordering', () => {
+ const newOrdering = 'ord';
+ const newState = exploreReducer(initialState, actions.addOrdering(newOrdering));
+ expect(newState.orderings).to.deep.equal(['ord']);
+ });
+
+ it('should return new state with removed ordering', () => {
+ const testState = { initialState, orderings: ['ord1', 'ord2'] };
+ const remOrdering = 'ord1';
+ const newState = exploreReducer(testState, actions.removeOrdering(remOrdering));
+ expect(newState.orderings).to.deep.equal(['ord2']);
+ });
+
+ it('should return new state with time stamp', () => {
+ const newState = exploreReducer(initialState, actions.setTimeStamp(1));
+ expect(newState.timeStampFormat).to.equal(1);
+ });
+
+ it('should return new state with row limit', () => {
+ const newState = exploreReducer(initialState, actions.setRowLimit(10));
+ expect(newState.rowLimit).to.equal(10);
+ });
+
+ it('should return new state with search box toggled', () => {
+ const newState = exploreReducer(initialState, actions.toggleSearchBox(true));
+ expect(newState.searchBox).to.equal(true);
+ });
+
+ it('should return new state with new sql', () => {
+ const newSql = {
+ where: 'where clause',
+ having: 'having clause',
+ };
+ const newState = exploreReducer(initialState, actions.setSQL(newSql));
+ expect(newState.SQL).to.equal(newSql);
+ });
+
+ it('should return new state with added filter', () => {
+ const newFilter = {
+ id: shortid.generate(),
+ eq: 'value',
+ op: 'in',
+ col: 'vals',
+ };
+ const newState = exploreReducer(initialState, actions.addFilter(newFilter));
+ expect(newState.filters).to.deep.equal([newFilter]);
+ });
+
+ it('should return new state with removed filter', () => {
+ const filter1 = {
+ id: shortid.generate(),
+ eq: 'value',
+ op: 'in',
+ col: 'vals1',
+ };
+ const filter2 = {
+ id: shortid.generate(),
+ eq: 'value',
+ op: 'not in',
+ col: 'vals2',
+ };
+ const testState = {
+ initialState,
+ filters: [filter1, filter2],
+ };
+ const newState = exploreReducer(testState, actions.removeFilter(filter1));
+ expect(newState.filters).to.deep.equal([filter2]);
+ });
+
+});
diff --git a/caravel/assets/utils/common.js b/caravel/assets/utils/common.js
index a6aa001e41d80..5e98b996bfb5a 100644
--- a/caravel/assets/utils/common.js
+++ b/caravel/assets/utils/common.js
@@ -1,4 +1,7 @@
/* eslint global-require: 0 */
+import persistState from 'redux-localstorage';
+import { compose } from 'redux';
+
const d3 = window.d3 || require('d3');
export const EARTH_CIRCUMFERENCE_KM = 40075.16;
@@ -26,3 +29,13 @@ export function rgbLuminance(r, g, b) {
// Formula: https://en.wikipedia.org/wiki/Relative_luminance
return (LUMINANCE_RED_WEIGHT * r) + (LUMINANCE_GREEN_WEIGHT * g) + (LUMINANCE_BLUE_WEIGHT * b);
}
+
+export function getDevEnhancer() {
+ let enhancer = compose(persistState());
+ if (process.env.NODE_ENV === 'dev') {
+ enhancer = compose(
+ persistState(), window.devToolsExtension && window.devToolsExtension()
+ );
+ }
+ return enhancer;
+}
diff --git a/caravel/assets/utils/reducerUtils.js b/caravel/assets/utils/reducerUtils.js
new file mode 100644
index 0000000000000..e233c2413b9a0
--- /dev/null
+++ b/caravel/assets/utils/reducerUtils.js
@@ -0,0 +1,53 @@
+import shortid from 'shortid';
+
+export function addToObject(state, arrKey, obj) {
+ const newObject = Object.assign({}, state[arrKey]);
+ const copiedObject = Object.assign({}, obj);
+
+ if (!copiedObject.id) {
+ copiedObject.id = shortid.generate();
+ }
+ newObject[copiedObject.id] = copiedObject;
+ return Object.assign({}, state, { [arrKey]: newObject });
+}
+
+export function alterInObject(state, arrKey, obj, alterations) {
+ const newObject = Object.assign({}, state[arrKey]);
+ newObject[obj.id] = (Object.assign({}, newObject[obj.id], alterations));
+ return Object.assign({}, state, { [arrKey]: newObject });
+}
+
+export function alterInArr(state, arrKey, obj, alterations) {
+ // Finds an item in an array in the state and replaces it with a
+ // new object with an altered property
+ const idKey = 'id';
+ const newArr = [];
+ state[arrKey].forEach((arrItem) => {
+ if (obj[idKey] === arrItem[idKey]) {
+ newArr.push(Object.assign({}, arrItem, alterations));
+ } else {
+ newArr.push(arrItem);
+ }
+ });
+ return Object.assign({}, state, { [arrKey]: newArr });
+}
+
+export function removeFromArr(state, arrKey, obj, idKey = 'id') {
+ const newArr = [];
+ state[arrKey].forEach((arrItem) => {
+ if (!(obj[idKey] === arrItem[idKey])) {
+ newArr.push(arrItem);
+ }
+ });
+ return Object.assign({}, state, { [arrKey]: newArr });
+}
+
+export function addToArr(state, arrKey, obj) {
+ const newObj = Object.assign({}, obj);
+ if (!newObj.id) {
+ newObj.id = shortid.generate();
+ }
+ const newState = {};
+ newState[arrKey] = [...state[arrKey], newObj];
+ return Object.assign({}, state, newState);
+}