bugfix/reset-graph-data along with other improvements (#89)

* extend-graph-navigation - initial extension of graph/graphcontainer comps to use redux store/action flow

* extend-graph-navigation - fix merge conflict, need to get upstream master in yet too

* extend-graph-navigation - add new entity related actions

* extend-graph-navigation - addl changes related to entity related reducer and initial state

* extend-graph-navigation - graph and graph container related changes

* extend-graph-navigation - updating tests so as to wrap GraphContainer with store provider

* extend-graph-navigation - adding use of splitter to graph container, modeled on recent changes to results/results list

* extend-graph-navigation - clean-up home component, re-center headers

* extend-graph-navigation - incorporating review feedback and some general clean-up

* extend-graph-navigation - merge fixes, updated alpha channel in logo png, refined relationships rendered

* extend-graph-navigation - get recursive navigation working with entity reucer; clean up a notifier test

* extend-graph-navigation - fixing broken test cases which somehow still ran locally

* fix-notifier-tests by changing from looking for an autogenerated CSS class to a node ID under our control
* also leaving a TODO comment for @ssmails

* bugfix/reset-graph-data - fix bug; add new logos and remove old; improve hierarchy with programatic levels

* reset-graph-data - whoops, forgot the friendly favicon

* reset-graph-data - match app color to new logo

app/src/actions/actionTypes.js

@@ -1,3 +1,5 @@
+//TODO:DM - this file feels overly anti-DRY... investigate if better way to track action type names or maybe just use strings directly
+
 export const SUBMIT_QUERY = 'SUBMIT_QUERY';
 export const REQUEST_QUERY = 'REQUEST_QUERY';
 export const RECEIVE_QUERY = 'RECEIVE_QUERY';
@@ -12,5 +14,6 @@ export const FETCH_ENTITIES = 'FETCH_ENTITIES';
 export const RECEIVE_ENTITY = 'RECEIVE_ENTITY';
 export const ADD_WATCH_QSL_QUERY = 'ADD_WATCH_QSL_QUERY';
 export const RECEIVE_QSL_RESP = 'RECEIVE_QSL_RESP';
+export const CLEAR_WATCHES = 'CLEAR_WATCHES';
 
 export const SHOW_NOTIFY = 'SHOW_NOTIFY';

app/src/actions/entityActions.js

@@ -45,4 +45,8 @@ export const fetchQslQuery = query => {
 export const receiveQslResp = results => ({
   type: types.RECEIVE_QSL_RESP,
   results
+});
+
+export const clearWatches = () => ({
+  type: types.CLEAR_WATCHES
 });

app/src/components/graph/GraphContainer.js

@@ -56,6 +56,8 @@ class GraphContainer extends Component {
   }
 
   componentWillUnmount() {
+    const { clearWatches } = this.props.entityActions;
+    clearWatches();
     clearInterval(this.intervalHandle);
   }
 

app/src/components/home/Home.js

@@ -8,7 +8,7 @@ import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
 
 import './Home.css';
-import logo from './map.png';
+import logo from './katlas-logo-blue-300px.png';
 import { ENTER_KEYCODE, ENTER_KEYSTR } from '../../config/appConfig';
 import * as queryActions from '../../actions/queryActions';
 import { validateQslQuery } from '../../utils/validate';

app/src/components/menuBar/MenuBar.js

@@ -7,7 +7,7 @@ import IconButton from '@material-ui/core/IconButton';
 import Typography from '@material-ui/core/Typography';
 import { withStyles } from '@material-ui/core/styles';
 
-import logo from './map.png';
+import logo from './katlas-logo-white-300px.png';
 
 const styles = theme => ({
   root: {

app/src/config/appConfig.js

@@ -5,7 +5,7 @@ export const NODE_DEFAULT_STR = 'default';
 export const NODE_DEFAULT_COLOR = '#2575E2';
 export const NODE_ICON_FONT = 'FontAwesome';
 export const NODE_ICON_FONT_SIZE = 40;
-export const NODE_LABEL_MAX_LENGTH = 40;
+export const NODE_LABEL_MAX_LENGTH = 30;
 export const NODE_LABEL_SPLIT_CHAR = '-';
 
 //Node icons to be displayed in ased on Node types used in app

app/src/config/visjsConfig.js

@@ -35,13 +35,14 @@ export const options = {
     improvedLayout: true,
     hierarchical: {
       enabled: true,
+      nodeSpacing: 150,
       blockShifting: true,
       edgeMinimization: true,
       sortMethod: 'hubsize',
       direction: 'UD'
     }
   },
   physics: {
-    enabled: true
+    enabled: false
   }
 };

app/src/index.js

@@ -31,7 +31,7 @@ let theme = createMuiTheme({
   palette: {
     primary: {
       light: '#63ccff',
-      main: '#326CE5',
+      main: '#144CB6',
       dark: '#2b333c',
     },
     secondary: {

app/src/reducers/entityReducer.js

@@ -4,7 +4,7 @@ import initialState from './initialState';
 import {
   SET_ROOT_UID, ADD_WATCH_UID, FETCH_ENTITY,
   FETCH_ENTITIES, RECEIVE_ENTITY, RECEIVE_QSL_RESP,
-  ADD_WATCH_QSL_QUERY
+  ADD_WATCH_QSL_QUERY, CLEAR_WATCHES
 } from '../actions/actionTypes';
 import { EdgeLabels } from '../config/appConfig';
 
@@ -67,6 +67,16 @@ export default function entity(state = initialState.entity, action) {
         newState.results = potentialResults;
       }
       return newState;
+    case CLEAR_WATCHES:
+      newState = {
+        ...state,
+        rootUid: '',
+        entitiesByUid: {},
+        qslQuery: '',
+        results: {},
+        isWaiting: false,
+      };
+      return newState;
     default:
       return state;
   }

app/src/utils/graph.js

@@ -31,7 +31,7 @@ let edges, nodes;
 let legendTypesObj = {};
 let legendStatusesObj = {};
 
-function parseDgraphData(data) {
+function parseDgraphData(data, level) {
   if (data === null || data === undefined ) {
     console.error("Empty data");
     return;
@@ -43,11 +43,14 @@ function parseDgraphData(data) {
       //Store entire block in map, so we can use to create edges later
       //Edges cannot be created here as we may not have got the uid still
       //As json from dgraph has randomized order and uid may be after Array elements
-      uidMap.set(uid, data);
+      uidMap.set(uid, {
+        data,
+        level
+      });
     }
     //if this key is a relationship type (as defined in EdgeLabels) recurse to get children nodes
     if (EdgeLabels.indexOf(key) > -1) {
-      _.forEach(val, (item) => parseDgraphData(item));
+      _.forEach(val, (item) => parseDgraphData(item, level + 1));
     }
   });
 }
@@ -94,7 +97,7 @@ function getVisFormatEdge(fromUid, toUid, relation) {
   };
 }
 
-function getVisFormatNode(uid, nodeName, nodeObjtype, nodeStatus) {
+function getVisFormatNode(uid, nodeName, nodeObjtype, nodeStatus, level) {
   let idParam = uid;
   let titleParam = "";
 
@@ -110,14 +113,15 @@ function getVisFormatNode(uid, nodeName, nodeObjtype, nodeStatus) {
   const color = NodeStatusColorMap.get(nodeStatus || NODE_DEFAULT_STR);
 
   const n = {
+    level,
     id: idParam,
-    uid: uid,
+    uid,
     label: nodeName,
     icon:{
       face: NODE_ICON_FONT,
       code: getNodeIcon(nodeObjtype),
       size: NODE_ICON_FONT_SIZE,
-      color: color,
+      color,
     },
     name: nodeName,
     title: titleParam,
@@ -129,7 +133,7 @@ function getVisFormatNode(uid, nodeName, nodeObjtype, nodeStatus) {
   };
   legendStatusesObj[nodeStatus] = {
     code: getNodeIcon(NODE_DEFAULT_STR),
-    color: color,
+    color,
   };
   return n;
 }
@@ -146,11 +150,11 @@ function validateJSONData(uid, nodeName, nodeObjtype) {
 export function getVisData(data) {
   let existingUids = {};
   clearVisData();
-  parseDgraphData(data);
+  parseDgraphData(data, 0);
 
-  for (const [uid, v] of uidMap.entries()) {
+  for (const [uid, val] of uidMap.entries()) {
     let nodeName = "", nodeObjtype = "", nodeStatus = "";
-    const block = v;
+    const { data: block, level } = val;
 
     for (const prop in block) {
       if (!block.hasOwnProperty(prop)) {
@@ -183,7 +187,7 @@ export function getVisData(data) {
       }
     }
     validateJSONData(uid, nodeName, nodeObjtype);
-    let n = getVisFormatNode(uid, nodeName, nodeObjtype, nodeStatus);
+    let n = getVisFormatNode(uid, nodeName, nodeObjtype, nodeStatus, level);
     if(!existingUids[n.uid]){
       nodes.push(n);
       existingUids[n.uid] = true;
@@ -222,18 +226,13 @@ export function colorMixer(rgbA, rgbB, amountToMix){
   return "rgb("+r+","+g+","+b+")";
 }
 
-//Function to split long label names. If too long, name is split by its middle
-//dash '-' char across 2 lines of text. If there are no '-' chars, name is not split
+//split long label names; if too long, split by its middle char across 2 lines
 function nameSplitter(name){
   let splitName = name;
   if (typeof name !== 'string') return name;
   if (name.length > NODE_LABEL_MAX_LENGTH){
-    let nnDashSplit = name.split(NODE_LABEL_SPLIT_CHAR);
-    if(nnDashSplit.length > 1){
-      splitName = nnDashSplit.slice(0, nnDashSplit.length/2).join(NODE_LABEL_SPLIT_CHAR) +
-        NODE_LABEL_SPLIT_CHAR + '\n' +
-        nnDashSplit.slice(nnDashSplit.length/2).join(NODE_LABEL_SPLIT_CHAR);
-    }
+    splitName = name.slice(0, name.length/2) + '\n' +
+      name.slice(name.length/2);
   }
   return splitName;
 }