Merge pull request #28 from skomputer/newButtons

Button rearrangement and new buttons
skomputer · Jul 13, 2016 · 24b93b6 · 24b93b6
2 parents 0d2eebe + 2103716
commit 24b93b6
Show file tree

Hide file tree

Showing 24 changed files with 22,372 additions and 8,557 deletions.
diff --git a/app/components/AddCaptionForm.jsx b/app/components/AddCaptionForm.jsx
@@ -5,25 +5,42 @@ import { HotKeys } from 'react-hotkeys';
 export default class AddCaptionForm extends BaseComponent {
   constructor(props) {
     super(props);
-    this.bindAll('_handleSubmit');
+    this.bindAll('_handleSubmit', '_handleScaleChange');
+
+    this.state = {
+      scaleValue: 1
+    };
   }
 
   render() {
-    const keyMap = { 
-      'esc': 'esc'
-    };
 
-    const keyHandlers = {
-      'esc': () => this.props.closeAddForm()
-    };
+    const scales = [
+      [null, "Scale"],
+      [1, "1x"],
+      [1.25, "1.25x"],
+      [1.5, "1.5x"],
+      [2, "2x"],
+      [2.5, "2.5x"],
+      [3, "3x"],
+      [4, "4x"],
+      [5, "5x"]
+    ];
 
     return (
-      <div id="addCaption" className="editForm">
-        <HotKeys keyMap={keyMap} handlers={keyHandlers}>  
-          <form onSubmit={this._handleSubmit}>
-            <input type="text" className="form-control input-sm" placeholder="add caption" ref="text" /><br />
-          </form>
-        </HotKeys>
+      <div id="addCaption" className="form-inline buttonGroup">
+        <form onSubmit={this._handleSubmit}>
+          <input type="text" className="form-control input-sm" title="add caption" placeholder="add caption" ref="text" />
+          &nbsp;<select 
+            title="text size for new caption"
+            value={this.state.scale} 
+            className="form-control input-sm" 
+            ref="scale" 
+            onChange={this._handleScaleChange}>
+            { scales.map((scale, i) =>
+              <option key={scale[1]} value={scale[0]}>{scale[1]}</option>
+            ) }
+            </select>
+        </form>
       </div>
     );
   }
@@ -33,14 +50,21 @@ export default class AddCaptionForm extends BaseComponent {
     setTimeout(() => this.refs.text.focus(), 50);
   }
 
+  _handleScaleChange() {
+    this.setState({scaleValue: this.refs.scale.value})
+  }
+
   _handleSubmit(e) {
     let text = this.refs.text.value.trim();
-    this.props.addCaption({ display: { text } });
+    let scale = this.state.scaleValue;
+
+    this.props.addCaption({ display: { text, scale  } });
     this._clear();
     e.preventDefault();
   }
 
   _clear() {
     this.refs.text.value = '';
+    this.refs.scale.value = 1;
   }
 }
diff --git a/app/components/AddConnectedNodesForm.jsx b/app/components/AddConnectedNodesForm.jsx
@@ -24,11 +24,12 @@ export default class AddConnectedNodesForm extends BaseComponent {
           <input 
             id="addConnectedNodesNum" 
             type="text" 
+            title="maximum number of nodes to add"
             className="form-control input-sm" 
             defaultValue="5" 
             ref="num" />
           { this._renderOptions() }
-          &nbsp;<button onClick={this._handleSubmit} className="btn btn-sm btn-default">Add Connections</button>
+          &nbsp;<button onClick={this._handleSubmit} title="search for given number of nodes" className="btn btn-sm btn-default">Add Connections</button>
         </HotKeys>
       </div>
     );
@@ -37,7 +38,7 @@ export default class AddConnectedNodesForm extends BaseComponent {
   _renderOptions() {
     let options = this.props.source.getConnectedNodesOptions;
     return options ? Object.keys(options).map(key => {
-      return (<select key={key} className="form-control input-sm" ref={key}>
+      return (<select key={key} title="type of connections to search for" className="form-control input-sm" ref={key}>
         { Object.keys(options[key]).map(val => {
           return <option key={val} value={val}>{options[key][val]}</option>
         }) }

diff --git a/app/components/AddNodeInput.jsx b/app/components/AddNodeInput.jsx
@@ -26,7 +26,7 @@ export default class AddNodeInput extends BaseComponent {
       <div id="addNodeInput">
         <HotKeys keyMap={keyMap} handlers={keyHandlers}>
           <form onSubmit={this._handleSubmit}>
-            <input type="text" className="form-control input-sm" placeholder="add node" ref="name" onChange={this._handleSearch} /><br />
+            <input type="text" className="form-control input-sm" title="add new node" placeholder="add node" ref="name" onChange={this._handleSearch} /><br />
             { this.props.source ? 
               <ul className="addNodeResults dropdown-menu" style={{ display: results.length > 0 ? "block" : "none" }} ref="results">
                 { results.map((node, i) =>

diff --git a/app/components/ChangeColorInput.jsx b/app/components/ChangeColorInput.jsx
@@ -28,7 +28,7 @@ export default class ChangeColorInput extends BaseComponent {
   }
 
   handleValueChange(color) {
-    this.onChange("#" + color.hex);
+    this.onChange(color.hex);
   }
 
   onChange(newColor) {

diff --git a/app/components/DeleteSelectedButton.jsx b/app/components/DeleteSelectedButton.jsx
@@ -0,0 +1,28 @@
+import React, { Component, PropTypes } from 'react';
+import BaseComponent from './BaseComponent';
+import { HotKeys } from 'react-hotkeys';
+import mapKeys from 'lodash/object/mapKeys';
+
+export default class DeleteSelectedButton extends BaseComponent {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const whichClass = this.props.currentForm === "UpdateNodeForm" ? "nodeDelete" : "edgeDelete";
+
+    return (
+      <div 
+        className = {"editForm form-inline " + whichClass}
+        id = "deleteSelected">
+        <button
+          className="btn btn-sm btn-default"
+          title="delete selected"
+          onClick = {this.props.doDelete}>
+          Delete Selected
+        </button>
+      </div>
+    );
+  }
+
+}
diff --git a/app/components/EditButtons.jsx b/app/components/EditButtons.jsx
@@ -15,9 +15,9 @@ export default class EditButtons extends Component {
           nodes={this.props.nodes}
           results={this.props.nodeResults}
           setNodeResults={this.props.setNodeResults} />
-        <button className="btn btn-sm btn-default" onClick={this.props.toggleAddEdgeForm}>add edge</button>
+        <button className="btn btn-sm btn-default" title="add adge between nodes" onClick={this.props.toggleAddEdgeForm}>add edge</button>
         { this.props.showInterlocksButton &&
-          <button id="addInterlocksButton" className="btn btn-sm btn-default" onClick={this.props.fetchInterlocks}>add interlocks</button>
+          <button id="addInterlocksButton" className="btn btn-sm btn-default" title="search for entities related to both of selected" onClick={this.props.fetchInterlocks}>add interlocks</button>
         }
       </div>
     );

diff --git a/app/components/EditTools.jsx b/app/components/EditTools.jsx
@@ -1,16 +1,24 @@
 import React, { Component, PropTypes } from 'react';
+import BaseComponent from './BaseComponent';
 import UndoButtons from './UndoButtons';
 import LayoutButtons from './LayoutButtons';
 import EditButtons from './EditButtons';
 import AddEdgeForm from './AddEdgeForm';
 import AddCaptionForm from './AddCaptionForm';
 import AddConnectedNodesForm from './AddConnectedNodesForm';
+import DeleteSelectedButton from './DeleteSelectedButton';
 import UpdateNodeForm from './UpdateNodeForm';
 import UpdateEdgeForm from './UpdateEdgeForm';
 import UpdateCaptionForm from './UpdateCaptionForm';
 import HelpScreen from './HelpScreen';
 
-export default class EditTools extends Component {
+export default class EditTools extends BaseComponent {
+
+  constructor(props) {
+    super(props);
+    this.bindAll('_handleDelete');
+
+  }
 
   render() {
     let { graphApi, source, data, graph, addForm, currentForm, helpScreen,
@@ -36,6 +44,14 @@ export default class EditTools extends Component {
             toggleAddEdgeForm={toggleAddEdgeForm}
             showInterlocksButton={this.props.showInterlocksButton}
             fetchInterlocks={this.props.fetchInterlocks} />
+          { currentForm == 'UpdateCaptionForm' && 
+          <UpdateCaptionForm 
+            updateCaption={updateCaption} 
+            data={data}
+            deselect={deselectAll} /> }
+          { currentForm != 'UpdateCaptionForm' && 
+             <AddCaptionForm 
+            addCaption={addCaption}  /> }
           <LayoutButtons 
             prune={prune} 
             circleLayout={circleLayout} 
@@ -56,36 +72,35 @@ export default class EditTools extends Component {
             nodes={graph.nodes}
             closeAddForm={closeAddForm} 
             data={data} /> }
-        { addForm == 'AddCaptionForm' && 
-          <AddCaptionForm 
-            addCaption={addCaption} 
-            closeAddForm={closeAddForm} /> }
         { currentForm == 'UpdateNodeForm' && 
-          <UpdateNodeForm 
-            updateNode={updateNode} 
-            data={data} 
-            deselect={deselectAll} /> }
+            <UpdateNodeForm 
+              updateNode={updateNode} 
+              data={data} 
+              deselect={deselectAll} /> }
         { currentForm == 'UpdateEdgeForm' && 
           <UpdateEdgeForm 
             updateEdge={updateEdge} 
             getGraph={getGraph} 
             data={data}
             deselect={deselectAll} /> }
-        { currentForm == 'UpdateCaptionForm' && 
-          <UpdateCaptionForm 
-            updateCaption={updateCaption} 
-            data={data}
-            deselect={deselectAll} /> }
         { currentForm == 'UpdateNodeForm' && source && source.getConnectedNodes && 
           <AddConnectedNodesForm
             data={data}
             source={source} 
             closeAddForm={closeAddForm} 
             graph={graph}
             addSurroundingNodes={addSurroundingNodes} 
-            addEdge={addEdge} /> }
+            addEdge={addEdge} /> }        
+          { (currentForm == 'UpdateNodeForm' || currentForm == 'UpdateEdgeForm') &&
+          <DeleteSelectedButton 
+            currentForm = {currentForm}
+            doDelete = {this._handleDelete} /> }
         { helpScreen && !this.props.hideHelp ? <HelpScreen source={source} /> : null }
       </div>
     );
   }
-}
+
+  _handleDelete() {
+    this.props.delete();
+  }
+}
diff --git a/app/components/Editor.jsx b/app/components/Editor.jsx
@@ -31,18 +31,17 @@ export default class Editor extends BaseComponent {
       'altO': ['alt+o', 'ctrl+o'],
       'altN': ['alt+n', 'ctrl+n'],
       'altE': ['alt+e', 'ctrl+e'],
-      'altC': ['alt+c', 'ctrl+c'],
       'altH': ['alt+h', 'ctrl+h'],
       'altR': ['alt+r', 'ctrl+r'],
-      'esc': 'esc'
+      'esc': 'esc',
+      'enter': 'enter'
     };
 
     const keyHandlers = {
       'altP': () => this.props.graphApi.prune(),
       'altO': () => this.props.graphApi.circleLayout(),
       'altN': () => this._focusAddNodeInput(),
       'altE': () => this._toggleAddEdgeForm(),
-      'altC': () => this._toggleAddCaptionForm(),
       'altH': () => this._toggleHelpScreen(),
       'altR': () => this._toggleAddConnectedNodesForm(),
       'esc': () => this._clearForms()
@@ -91,7 +90,8 @@ export default class Editor extends BaseComponent {
               addForm={addForm}
               currentForm={currentForm}
               showInterlocksButton={showInterlocksButton}
-              fetchInterlocks={fetchInterlocks} />
+              fetchInterlocks={fetchInterlocks}
+              delete={this.props.delete} />
           }       
         </HotKeys>
       </div>
@@ -165,10 +165,11 @@ export default class Editor extends BaseComponent {
   _clearForms() {
     this.props.toggleAddForm(null);
     this.props.graphApi.deselectAll();
+    console.log(this.refs);
     this.refs.editTools.refs.editButtons.refs.addNodeInput.clear();
   }
 
   _focusAddNodeInput() {
     this.refs.editTools.refs.editButtons.refs.addNodeInput.refs.name.focus();
   }
-}
+}
diff --git a/app/components/GraphAnnotationForm.jsx b/app/components/GraphAnnotationForm.jsx
@@ -26,6 +26,7 @@ export default class GraphAnnotationForm extends BaseComponent {
           id="oligrapherGraphAnnotationFormHeader"
           ref="header"
           name="header"
+          title="edit annotation title"
           className="form-control input-lg" 
           placeholder="annotation header"
           value={this.props.annotation.header}
@@ -34,10 +35,12 @@ export default class GraphAnnotationForm extends BaseComponent {
           id="oligrapherGraphAnnotationFormText"
           name="text"
           ref="text"
+          title="edit annotation body"
           text={this.props.annotation.text}
           options={editorOptions}
           onChange={this._handleTextChange} />
         <button 
+          title="remove selected annotation"
           className="btn btn-danger btn-sm" 
           onClick={this._handleRemove}>Remove</button>
       </div>

diff --git a/app/components/GraphAnnotationList.jsx b/app/components/GraphAnnotationList.jsx
@@ -28,6 +28,7 @@ export default class GraphAnnotationList extends BaseComponent {
         </ul>
         { this.props.isEditor ? 
           <button 
+            title="add annotation"
             id="oligrapherCreateGraphAnnotationButton"
             className="btn btn-sm btn-default" 
             onClick={this.props.create}>

diff --git a/app/components/GraphNavButtons.jsx b/app/components/GraphNavButtons.jsx
@@ -6,15 +6,18 @@ export default class GraphNavButtons extends Component {
     return (
       <div id="oligrapherNavButtons">
         <button 
+          title="previous annotation" 
           className="btn btn-lg btn-default" 
           onClick={this.props.prevClick} 
           disabled={!this.props.canClickPrev}>Prev</button>
-        <button 
+        <button
+          title="next annotation" 
           className="clickplz btn btn-lg btn-default" 
           onClick={this.props.nextClick} 
           disabled={!this.props.canClickNext}>Next</button>
         <div style={{ float: "right" }}>
           <button
+            title="show/hide annotations"
             id="oligrapherHideAnnotationsButton"
             className="btn btn-lg btn-default"
             onClick={this.props.swapAnnotations}>

diff --git a/app/components/LayoutButtons.jsx b/app/components/LayoutButtons.jsx
@@ -5,9 +5,9 @@ export default class LayoutButtons extends Component {
   render() {
     return (
       <div id="layoutButtons" className="btn-group buttonGroup">
-        <button className="btn btn-sm btn-default" onClick={this.props.prune}>prune</button>
-        <button className="btn btn-sm btn-default" onClick={this.props.circleLayout}>circle</button>
-        <button className="btn btn-sm btn-default" onClick={this.props.clearGraph}>clear</button>
+        <button className="btn btn-sm btn-default" title="remove unconnected nodes" onClick={this.props.prune}>prune</button>
+        <button className="btn btn-sm btn-default" title="arrange nodes in a circle" onClick={this.props.circleLayout}>circle</button>
+        <button className="btn btn-sm btn-default" title="delete everything" onClick={this.props.clearGraph}>clear</button>
       </div>
     );
   }

diff --git a/app/components/Root.jsx b/app/components/Root.jsx
@@ -171,6 +171,7 @@ class Root extends Component {
                 { graph &&
                   <Editor 
                     {...this.props}
+                    delete={() => dispatch(deleteSelection(selection))}
                     graphApi={graphApi}
                     isEditor={isEditor} 
                     showEditButton={false} 

diff --git a/app/components/SaveButton.jsx b/app/components/SaveButton.jsx
@@ -6,6 +6,7 @@ export default class SaveButton extends Component {
     return (
       <button 
         id="oligrapherSaveButton" 
+        title="save influence map to LittleSis"
           className="btn btn-lg btn-default"
           onClick={this.props.save}>
         Save