Graph data visualizations with D3.js libraries: GoogleMaps & TimeLine implementation

src/app/assets_webpack/assistant/javascripts/components/FillInScreen.js

@@ -5,6 +5,9 @@ export function getAvailableVerticalSpace(element) {
   const offsetTop = element.getBoundingClientRect().top + window.pageYOffset - document.documentElement.clientTop;
   return screenHeight - offsetTop;
 }
+export function getAvailableHorizontalSpace(element){
+    return element.offsetWidth - window.pageXOffset;
+}
 
 /**
  * Creates scrollable container that vertically fills in the remaining screen space

src/app/assets_webpack/assistant/javascripts/entries/googleMaps-coordinates.js

@@ -0,0 +1,4 @@
+import initEntry from '../misc/initEntry'
+import googleMapsCoordinatesRoutes from '../modules/visualizers/googleMaps/bundles/coordinates/applicationRoutes'
+
+initEntry(googleMapsCoordinatesRoutes);

src/app/assets_webpack/assistant/javascripts/entries/googleMaps-places.js

@@ -0,0 +1,4 @@
+import initEntry from '../misc/initEntry'
+import googleMapsPlacesRoutes from '../modules/visualizers/googleMaps/bundles/places/applicationRoutes'
+
+initEntry(googleMapsPlacesRoutes);

src/app/assets_webpack/assistant/javascripts/entries/googleMaps-quantified-places.js

@@ -0,0 +1,4 @@
+import initEntry from '../misc/initEntry'
+import googleMapsPlacesValuesRoutes from '../modules/visualizers/googleMaps/bundles/quantifiedPlaces/applicationRoutes'
+
+initEntry(googleMapsPlacesValuesRoutes);

src/app/assets_webpack/assistant/javascripts/entries/googleMaps-quantified-things.js

@@ -0,0 +1,4 @@
+import initEntry from '../misc/initEntry'
+import googleMapsThingsPlacesValuesRoutes from '../modules/visualizers/googleMaps/bundles/quantifiedThings/applicationRoutes'
+
+initEntry(googleMapsThingsPlacesValuesRoutes);

src/app/assets_webpack/assistant/javascripts/entries/googleMaps.js

@@ -1,4 +1,4 @@
-import createRoutes from '../modules/visualizers/googleMaps/applicationRoutes'
+import createRoutes from '../modules/visualizers/googleMaps/bundles/v1/applicationRoutes'
 import initEntry from '../misc/initEntry'
 
 initEntry(createRoutes);

src/app/assets_webpack/assistant/javascripts/entries/timeline-instants.js

@@ -0,0 +1,4 @@
+import initEntry from '../misc/initEntry'
+import timelineInstantsRoutes from '../modules/visualizers/timeline/bundles/instants/applicationRoutes'
+
+initEntry(timelineInstantsRoutes);

src/app/assets_webpack/assistant/javascripts/entries/timeline-intervals.js

@@ -0,0 +1,4 @@
+import initEntry from '../misc/initEntry'
+import timelineIntervalsRoutes from '../modules/visualizers/timeline/bundles/intervals/applicationRoutes'
+
+initEntry(timelineIntervalsRoutes);

src/app/assets_webpack/assistant/javascripts/entries/timeline-things-instants.js

@@ -0,0 +1,5 @@
+import initEntry from '../misc/initEntry'
+import timelineThingsInstantsRoutes from '../modules/visualizers/timeline/bundles/thingsInstants/applicationRoutes'
+
+initEntry(timelineThingsInstantsRoutes);
+

src/app/assets_webpack/assistant/javascripts/entries/timeline-things-intervals.js

@@ -0,0 +1,4 @@
+import initEntry from '../misc/initEntry'
+import timelineThingsIntervalsRoutes from '../modules/visualizers/timeline/bundles/thingsIntervals/applicationRoutes'
+
+initEntry(timelineThingsIntervalsRoutes);

src/app/assets_webpack/assistant/javascripts/entries/timeline-things-things-instants.js

@@ -0,0 +1,5 @@
+import initEntry from '../misc/initEntry'
+import timelineThingsThingsInstantsRoutes from '../modules/visualizers/timeline/bundles/thingsThingsInstants/applicationRoutes'
+
+initEntry(timelineThingsThingsInstantsRoutes);
+

src/app/assets_webpack/assistant/javascripts/entries/timeline-things-things-intervals.js

@@ -0,0 +1,4 @@
+import initEntry from '../misc/initEntry'
+import timelineThingsThingsIntervalsRoutes from '../modules/visualizers/timeline/bundles/thingsThingsIntervals/applicationRoutes'
+
+initEntry(timelineThingsThingsIntervalsRoutes);

src/app/assets_webpack/assistant/javascripts/modules/app/api.js

@@ -32,3 +32,8 @@ export async function getLabels(appId, resourceUris) {
   const result = await rest('commonVisualizer/getLabels/' + appId, { resourceUris });
   return result.data.labels;
 }
+
+export async function getComments(appId, resourceUris) {
+  const result = await rest('commonVisualizer/getComments/' + appId, { resourceUris });
+  return result.data.comments;
+}

src/app/assets_webpack/assistant/javascripts/modules/app/containers/Comment.js

@@ -0,0 +1,46 @@
+import React, { Component, PropTypes } from 'react'
+import { createStructuredSelector } from 'reselect'
+import { connect } from 'react-redux'
+import { Map } from 'immutable'
+import makePureRender from '../../../misc/makePureRender'
+import LocalizedValue from './LocalizedValue'
+import { isLocalizedValueEmpty } from '../misc/languageUtils'
+import { commentsSelector, getComments } from '../ducks/comments'
+
+class Comment extends Component {
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+    uri: PropTypes.string.isRequired,
+    comment: PropTypes.any,
+    availableComments: PropTypes.instanceOf(Map).isRequired
+  };
+
+  load() {
+    // Prop 'comment' might be a "custom comment" or passed down from wherever, we don't care,
+    // if it's missing, we will try to load a new one from the server.
+    const { dispatch, uri, comment, availableComments } = this.props;
+    if (isLocalizedValueEmpty(comment) && !availableComments.has(uri)) {
+      dispatch(getComments([uri]));
+    }
+  }
+
+  componentWillMount() {
+    this.load();
+  }
+
+  componentDidUpdate() {
+    this.load();
+  }
+
+  render() {
+    const { uri, comment, availableComments } = this.props;
+    const finalComment = isLocalizedValueEmpty(comment) ? availableComments.get(uri) : comment;
+    return <LocalizedValue localizedValue={finalComment} defaultValue={uri}/>
+  }
+}
+
+const selector = createStructuredSelector({
+  availableComments: commentsSelector
+});
+
+export default connect(selector)(makePureRender(Comment));

src/app/assets_webpack/assistant/javascripts/modules/app/containers/Label.js

@@ -15,7 +15,7 @@ class Label extends Component {
     availableLabels: PropTypes.instanceOf(Map).isRequired
   };
 
-  componentDidMount() {
+  load() {
     // Prop 'label' might be a "custom label" or passed down from wherever, we don't care,
     // if it's missing, we will try to load a new one from the server.
     const { dispatch, uri, label, availableLabels } = this.props;
@@ -24,10 +24,18 @@ class Label extends Component {
     }
   }
 
+  componentWillMount() {
+    this.load();
+  }
+
+  componentDidUpdate() {
+    this.load();
+  }
+
   render() {
     const { uri, label, availableLabels } = this.props;
     const finalLabel = isLocalizedValueEmpty(label) ? availableLabels.get(uri) : label;
-    return <LocalizedValue localizedValue={finalLabel} defaultValue={uri} />
+    return <LocalizedValue localizedValue={finalLabel} defaultValue={uri}/>
   }
 }
 

src/app/assets_webpack/assistant/javascripts/modules/app/containers/LimiterContainer.js

@@ -0,0 +1,74 @@
+import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { createStructuredSelector } from 'reselect'
+import { limit_default, limitSelector, setLimit, setLimitReset } from '../ducks/limit'
+import Button from '../../../components/Button'
+
+class LimiterContainer extends Component {
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+    limit: PropTypes.number.isRequired
+  };
+
+  componentWillUnmount() {
+    const {dispatch} = this.props;
+
+    dispatch(setLimitReset());
+  }
+
+  componentDidUpdate() {
+    const {limit} = this.props;
+    var elements = document.getElementsByName('limit');
+    if (elements.length > 0) {
+      elements[0].value = limit;
+    }
+  }
+
+  setLimit() {
+    const {dispatch} = this.props;
+
+    var elements = document.getElementsByName('limit');
+    if (elements.length > 0) {
+      const value = parseInt(elements[0].value);
+      dispatch(setLimit(value));
+    }
+  }
+
+  resetLimit() {
+    const {dispatch, limit} = this.props;
+    dispatch(setLimitReset());
+
+    var elements = document.getElementsByName('limit');
+    if (elements.length > 0) {
+      elements[0].value = limit_default;
+    }
+  };
+
+  render() {
+    const {limit} = this.props;
+
+    var resetEnabled = limit != limit_default;
+    return <div>
+      <table>
+        <tbody>
+        <tr>
+          <th>LIMIT</th>
+          <th><input type="value" name="limit" defaultValue={limit} onChange={() => this.setLimit()}/></th>
+          <th><Button raised={resetEnabled}
+                      onTouchTap={() => this.resetLimit()}
+                      disabled={!resetEnabled}
+                      label="RESET"
+          /></th>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+
+  }
+}
+
+const selector = createStructuredSelector({
+  limit: limitSelector
+});
+
+export default connect(selector)(LimiterContainer);

src/app/assets_webpack/assistant/javascripts/modules/app/containers/ObjectInfo.js

@@ -0,0 +1,70 @@
+import React, { Component, PropTypes } from 'react'
+import { createStructuredSelector } from 'reselect'
+import { connect } from 'react-redux'
+import { getLabels, labelsSelector } from '../ducks/labels'
+import { commentsSelector, getComments } from '../ducks/comments'
+import { Map as ImmutableMap } from 'immutable'
+import LocalizedValue from './LocalizedValue'
+import makePureRender from '../../../misc/makePureRender'
+
+// Shows all available info about an object.
+class ObjectInfo extends Component {
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+
+    header: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired,
+
+    availableLabels: PropTypes.instanceOf(ImmutableMap).isRequired,
+    availableComments: PropTypes.instanceOf(ImmutableMap).isRequired
+  };
+
+  load() {
+    const { dispatch, url, availableLabels, availableComments } = this.props;
+    if (!availableLabels.has(url)) {
+      dispatch(getLabels([url]));
+    }
+    if (!availableComments.has(url)) {
+      dispatch(getComments([url]));
+    }
+  }
+
+  componentWillMount() {
+    this.load();
+  }
+
+  componentDidUpdate() {
+    this.load();
+  }
+
+  render() {
+    const { header, url, availableComments, availableLabels } = this.props;
+
+    return <table>
+      <tbody>
+      <tr>
+        <td><b>{header}: </b></td>
+        <td>{url}</td>
+      </tr>
+      <tr>
+        <td>Label:</td>
+        <td>
+          <LocalizedValue localizedValue={availableLabels.get(url)} defaultValue="n/a"/>
+        </td>
+      </tr>
+      <tr>
+        <td>Comment:</td>
+        <td>
+          <LocalizedValue localizedValue={availableComments.get(url)} defaultValue="n/a"/>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+  }
+}
+const selector = createStructuredSelector({
+  availableLabels: labelsSelector,
+  availableComments: commentsSelector
+});
+
+export default connect(selector)(makePureRender(ObjectInfo));

src/app/assets_webpack/assistant/javascripts/modules/app/ducks/comments.js

@@ -0,0 +1,53 @@
+import { fromJS, Map as ImmutableMap } from 'immutable'
+import { createSelector } from 'reselect'
+import prefix from '../../core/prefix'
+import createAction from '../../../misc/createAction'
+import * as api from '../api'
+import withApplicationId from '../misc/withApplicationId'
+import { GET_APPLICATION_START } from './application'
+import moduleSelector from '../selector'
+
+// Actions
+
+export const GET_COMMENTS = prefix('GET_COMMENTS');
+export const GET_COMMENTS_START = prefix('GET_COMMENTS_START');
+export const GET_COMMENTS_ERROR = prefix('GET_COMMENTS_ERROR');
+export const GET_COMMENTS_SUCCESS = prefix('GET_COMMENTS_SUCCESS');
+
+let resourceUrisBuffer = [];
+
+export function getComments(resourceUris) {
+  return withApplicationId(id => dispatch => {
+    // Just like labels, use a buffer to cache uris and then make one big request.
+    resourceUrisBuffer = resourceUrisBuffer.concat(resourceUris);
+    setTimeout(() => {
+      if (resourceUrisBuffer.length > 0) {
+        const promise = api.getComments(id, resourceUrisBuffer);
+        dispatch(createAction(GET_COMMENTS, { promise }));
+        resourceUrisBuffer = [];
+      }
+    }, 200);
+  })
+}
+
+// Reducer
+
+const initialState = new ImmutableMap();
+export default function commentsReducer(state = initialState, action) {
+  switch (action.type) {
+    case GET_APPLICATION_START:
+      return initialState;
+
+    case GET_COMMENTS_SUCCESS:
+      return state.mergeDeep(fromJS(action.payload));
+  }
+  return state;
+}
+
+
+// Selectors
+
+export const commentsSelector = createSelector(
+  [moduleSelector],
+  parentState => parentState.comments
+);

src/app/assets_webpack/assistant/javascripts/modules/app/ducks/configuration.js

@@ -37,7 +37,8 @@ export const GET_CONFIGURATION_RESET = prefix('GET_CONFIGURATION_RESET');
 const commonConfigurationSelector = createSelector(
   [moduleSelector],
   state => ({
-    customLabels: state.customLabels.toJS()
+    customLabels: state.customLabels.toJS(),
+    limit: state.limit
   })
 );
 

src/app/assets_webpack/assistant/javascripts/modules/app/ducks/dirty.js

@@ -1,17 +1,20 @@
 import { GET_APPLICATION_START } from './application'
-import { SAVE_CONFIGURATION_START, SAVE_CONFIGURATION_ERROR, GET_CONFIGURATION_SUCCESS } from './configuration'
+import { GET_CONFIGURATION_SUCCESS, SAVE_CONFIGURATION_ERROR, SAVE_CONFIGURATION_START } from './configuration'
 import { UPDATE_CUSTOM_LABEL } from './customLabels'
+import { SET_LIMIT, SET_LIMIT_RESET } from './limit'
 
 export function createDirtyReducer(actions) {
   return function dirtyReducer(state = false, action) {
     // Custom actions provided by visualizer
-    if (actions.indexOf(action.type) !== -1)  {
+    if (actions.indexOf(action.type) !== -1) {
       return true;
     }
-    
+
     switch (action.type) {
       case UPDATE_CUSTOM_LABEL:
       case SAVE_CONFIGURATION_ERROR:
+      case SET_LIMIT:
+      case SET_LIMIT_RESET:
         return true;
 
       // We need to use the START event, not the SUCCESS, as the START event marks the snapshot