distributionbasedclustering

HelikarLab · Aug 6, 2018 · 468be8d · 468be8d
1 parent 88958ed
commit 468be8d
Show file tree

Hide file tree

Showing 6 changed files with 170 additions and 1 deletion.
diff --git a/.../StatisticalPlatform/client/components/Dashboard/NavBar/Clustering/DensityClusterModal.js b/.../StatisticalPlatform/client/components/Dashboard/NavBar/Clustering/DensityClusterModal.js
@@ -0,0 +1,109 @@
+import React, {Component} from 'react';
+import {Button, Modal, Checkbox, FormGroup, ControlLabel, FormControl, FieldGroup} from 'react-bootstrap';
+import NumericInput from 'react-numeric-input';
+
+class DensityClusterModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showResults: false,
+      show: false
+    };
+  }
+
+  handleClose = () => {
+    this.setState({ show: false });
+  }
+
+  onClick = () => {
+       this.setState({ showResults: true });
+  }
+
+  handleClick = () => {
+    this.props.onClose({showDensityCluster: false});
+      this.props.onClick(
+        this,
+        this.first.value,
+        this.second.value,
+        this.minpts.value,
+        this.eps.value
+      );
+  }
+
+
+  render() {
+
+    const options_list = [];
+		let inst = null;
+    const bold_style = {'fontSize': '15', 'fontWeight': 'bold'};
+
+		if (!this.state.showResults) {
+			inst = <Button onClick={this.onClick}>i</Button>
+		}
+		else {
+			inst = <p style = {bold_style}>Description:</p>;
+		}
+
+		this.props.variables.forEach( (variable) => {
+			options_list.push(<option value={variable}>{variable}</option>);
+		});
+
+    return(
+      <div className="modal-container">
+        <Modal.Header >
+          <Modal.Title id="contained-modal-title">
+            Choose Data
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <form>
+            <FormGroup controlId="formControlsSelect">
+              <ControlLabel>Variable - X</ControlLabel>
+            <FormControl componentClass="select" placeholder="select" inputRef={ref => { this.first = ref; }}>
+                {options_list}
+              </FormControl>
+              <br/>
+              <ControlLabel>Variable - Y</ControlLabel>
+            <FormControl componentClass="select" placeholder="select" inputRef={ref => { this.second = ref; }}>
+                {options_list}
+              </FormControl>
+              <br/>
+            <ControlLabel>Minimum Points</ControlLabel>
+          <input type="number" min={ 0 } className="form-control" ref={ref => this.minpts = ref } />
+            <ControlLabel>Epsilon</ControlLabel>
+          <input type="number" min={ 0 } className="form-control" ref={ref => this.eps = ref } />
+            </FormGroup>
+          </form>
+          {inst}
+					{ this.state.showResults ? <DensityClusteringInstruction/> : null }
+        </Modal.Body>
+        <Modal.Footer>
+          <Button onClick={()=>{this.props.onClose({showDensityCluster: false})}}>Close</Button>
+          <Button bsStyle= "success"  onClick={this.handleClick} type="submit">Submit</Button>
+        </Modal.Footer>
+      </div>
+    );
+  }
+}
+
+
+class DensityClusteringInstruction extends Component {
+  render() {
+    const style = {'fontFamily': 'DROID SANS MONO'};
+    return(
+      <div id="results" className="search-results">
+      <p>{'Select two columns and  value i.e. number of clusters.'}</p>
+      <table style = {style}>
+        <tr>
+          <td>{'library(ggplot2)'}</td>
+        </tr>
+        <tr>
+          <td>{'ggplot(data, aes(var_x, var_y, color = Species)) + geom_point()'}</td>
+        </tr>
+      </table>
+      </div>
+    );
+  }
+}
+
+export default DensityClusterModal;
diff --git a/StatisticalPlatform/StatisticalPlatform/client/components/Dashboard/NavBar/MyBar.js b/StatisticalPlatform/StatisticalPlatform/client/components/Dashboard/NavBar/MyBar.js
@@ -18,6 +18,7 @@ import ComatrixModal from './Analyze/ComatrixModal'
 import TimeSeriesModal from './Analyze/TimeSeriesModal';
 import KMeansModal from './Clustering/KMeansModal';
 import DendogramModal from './Clustering/DendogramModal';
+import DensityClusterModal from './Clustering/DensityClusterModal';
 import ClassifyModal from './Classification/ClassifyModal';
 import DashboardModal from './Dashboard/DashboardModal';
 import FileField from './File/FileField';
@@ -183,6 +184,12 @@ class MyBar extends Component {
   this.props.onClick("show-table");
   }
 
+  plotDensityCluster = (plotType, child, var_x, var_y, minpts, eps) => {
+    this.props.onClick("show-table");
+    this.props.onClick("densitybasedclustering", plotType, child, var_x, var_y, minpts, eps);
+    this.props.onClick("show-table");
+  }
+
   closeModal = (obj) => {
     this.setState(obj)
   }
@@ -414,6 +421,17 @@ class MyBar extends Component {
                     onClick={this.plotD3Chart.bind(this, "plotDendogram")}
                     variables={this.props.variables ? this.props.variables : ['Car','Car2', 'Car3']}  />
               </Modal>
+
+              <MenuItem eventKey={5.3} onClick = {() => this.setState({showDensityCluster: true})}>Density Based </MenuItem>
+              <Modal
+                {...this.props}
+                show={this.state.showDensityCluster? this.state.showDensityCluster : false}
+                onHide={this.setState.bind(this,{showDensityCluster: false})}>
+                  <DensityClusterModal
+                    onClose={(val) => this.closeModal(val)}
+                    onClick={this.plotDensityCluster.bind(this, "plotDensityBasedClustering")}
+                    variables={this.props.variables ? this.props.variables : ['Car','Car2', 'Car3']}  />
+              </Modal>
             </NavDropdown>
 
             <NavDropdown eventKey={6} title="Classification" id="basic-nav-dropdown">

diff --git a/StatisticalPlatform/StatisticalPlatform/client/components/Dashboard/WholeThing.js b/StatisticalPlatform/StatisticalPlatform/client/components/Dashboard/WholeThing.js
@@ -442,6 +442,16 @@ handleClick (buttonType, functionName, propertyName, plotType) {
       this.setState({plot_type: plot_type, var_x: var_x});
       break;
 
+    case "densitybasedclustering":
+        plot_type = arguments[1];
+        var_x = arguments[3];
+        var_y = arguments[4];
+        let minpts = arguments[5];
+        let eps = arguments[6];
+        this.setState({multi: false, plot: true});
+        this.setState({plot_type: plot_type, var_x: var_x, var_y: var_y, minpts: minpts, eps: eps});
+        break;
+
     /*
      *	Display descriptive stats table
      */

diff --git a/StatisticalPlatform/StatisticalPlatform/static/css/login.css b/StatisticalPlatform/StatisticalPlatform/static/css/login.css
@@ -76,3 +76,7 @@
 .MainPage{
   color: #f40035;
 }
+
+#plotdiv {
+    height: 400px;
+}
diff --git a/StatisticalPlatform/StatisticalPlatform/static/js/nvd3_plots.js b/StatisticalPlatform/StatisticalPlatform/static/js/nvd3_plots.js
@@ -124,6 +124,34 @@ function makePlot(obj, state) {
 		});
 	}
 
+	if (type==="plotDensityBasedClustering") {
+		var var_x = state.var_x;
+		var var_y = state.var_y;
+		var minpts = state.minpts;
+		var eps = state.eps;
+		ocpu.seturl("http://localhost:5656/ocpu/apps/tejasavkhattar/testpackage/R");
+
+		var data = dataJSON, plotData = {};
+
+		plotData.var_x = var_x;
+		plotData.var_y = var_y;
+		plotData.minpts = minpts;
+		plotData.eps = eps;
+
+		var req = $("#plotdiv").rplot("densitybasedclustering", {
+		data : data,
+		var_x : var_x,
+		var_y : var_y,
+		eps : eps,
+		MinPts : minpts
+
+	})
+//optional: add custom callbacks
+		req.fail(function(){
+			alert("R returned an error: " + req.responseText);
+		});
+	}
+
 	if (type === "plotKMeans") {
 
 		var var_x = state.var_x, var_y = state.var_y, kvalue = state.kvalue;

diff --git a/StatisticalPlatform/webpack-stats.json b/StatisticalPlatform/webpack-stats.json
@@ -1 +1 @@
-{"status":"done","publicPath":"http://localhost:3000/assets/bundles/","chunks":{"main":[{"name":"main-3accb65f3987805f6c75.js","publicPath":"http://localhost:3000/assets/bundles/main-3accb65f3987805f6c75.js","path":"/home/tejasav/Desktop/StatisticalPlatform/StatisticalPlatform/StatisticalPlatform/static/js/bundle/main-3accb65f3987805f6c75.js"}]}}
+{"status":"done","publicPath":"http://localhost:3000/assets/bundles/","chunks":{"main":[{"name":"main-03019aa429c716151a74.js","publicPath":"http://localhost:3000/assets/bundles/main-03019aa429c716151a74.js","path":"/home/tejasav/Desktop/StatisticalPlatform/StatisticalPlatform/StatisticalPlatform/static/js/bundle/main-03019aa429c716151a74.js"},{"name":"main.ab1cbde6ee011df9e83a.hot-update.js","publicPath":"http://localhost:3000/assets/bundles/main.ab1cbde6ee011df9e83a.hot-update.js","path":"/home/tejasav/Desktop/StatisticalPlatform/StatisticalPlatform/StatisticalPlatform/static/js/bundle/main.ab1cbde6ee011df9e83a.hot-update.js"}]}}