[v0.1.0] Release up to commit 4b914c8

This release includes the plugin files up to commit 4b914c889d423122acd7964b3ff620703d480a4b in the monorepository.

lib/components/BarSlider.js

@@ -0,0 +1,40 @@
+'use babel';
+
+import React from 'react';
+
+import Resizable from './Resizable';
+
+class BarSlider extends React.Component {
+  render() {
+    const {percentage, limitPercentage, onMouseEnter, onMouseLeave} = this.props;
+    const limitBarHeight = 100 - limitPercentage;
+    return (
+      <div
+        className="innpv-barslider"
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+      >
+        <div className="innpv-barslider-barwrap">
+          <Resizable
+            className="innpv-resizable-barslider"
+            heightPct={percentage}
+            handleResize={this.props.handleResize}
+          >
+            <div className="innpv-barslider-bar" />
+          </Resizable>
+          {limitBarHeight > 1e-3 ?
+            <div className="innpv-barslider-limit" style={{height: `${limitBarHeight}%`}} /> : null}
+        </div>
+      </div>
+    );
+  }
+}
+
+BarSlider.defaultProps = {
+  limitPercentage: 100,
+  handleResize: () => {},
+  onMouseEnter: () => {},
+  onMouseLeave: () => {},
+};
+
+export default BarSlider;

lib/components/ErrorMessage.js

@@ -0,0 +1,28 @@
+'use babel';
+
+import React from 'react';
+
+import PerfVisState from '../models/PerfVisState';
+
+export default class ErrorMessage extends React.Component {
+  _classes() {
+    const mainClass = 'innpv-error';
+    const {perfVisState} = this.props;
+    if (perfVisState === PerfVisState.MODIFIED ||
+        perfVisState === PerfVisState.ANALYZING) {
+      return mainClass + ' innpv-no-events';
+    }
+    return mainClass;
+  }
+
+  render() {
+    return (
+      <div className={this._classes()}>
+        <div className="innpv-error-inner">
+          <h1>Analysis Error</h1>
+          <p>{this.props.message}</p>
+        </div>
+      </div>
+    );
+  }
+}

lib/components/GetStarted.js

@@ -0,0 +1,122 @@
+'use babel';
+
+import React from 'react';
+
+import AppState from '../models/AppState';
+
+class GetStarted extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      optionsVisible: false,
+      host: 'localhost',
+      port: 60120,
+    };
+
+    this._handleConnectClick = this._handleConnectClick.bind(this);
+    this._handleInputChange = this._handleInputChange.bind(this);
+    this._handleOptionsClick = this._handleOptionsClick.bind(this);
+  }
+
+  _handleInputChange(event) {
+    const target = event.target;
+    const {name, value} = target;
+    this.setState({
+      [name]: value
+    });
+  }
+
+  _isPortValid(port) {
+    const portAsInt = parseInt(port, 10);
+    return !isNaN(portAsInt) && portAsInt > 0 && portAsInt <= 65535;
+  }
+
+  _allowConnectClick() {
+    return this.props.appState === AppState.OPENED &&
+      this.state.host != null &&
+      this.state.port != null &&
+      this.state.host.length > 0 &&
+      this._isPortValid(this.state.port);
+  }
+
+  _handleOptionsClick() {
+    this.setState({optionsVisible: !this.state.optionsVisible});
+  }
+
+  _handleConnectClick() {
+    const portAsInt = parseInt(this.state.port, 10);
+    this.props.handleClick({host: this.state.host, port: portAsInt});
+  }
+
+  _renderOptions() {
+    return (
+      <div className="innpv-get-started-options">
+        <div className="innpv-get-started-host-port-fields">
+          <div className="innpv-get-started-host">
+            <p>Host:</p>
+            <input
+              className="input-text native-key-bindings"
+              type="text"
+              name="host"
+              value={this.state.host}
+              onChange={this._handleInputChange}
+            />
+          </div>
+          <div className="innpv-get-started-port">
+            <p>Port:</p>
+            <input
+              className="input-text native-key-bindings"
+              type="text"
+              name="port"
+              value={this.state.port}
+              onChange={this._handleInputChange}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  _renderErrorMessage() {
+    const {errorMessage} = this.props;
+    if (errorMessage.length === 0) {
+      return null;
+    }
+    return <p className="text-error">{errorMessage}</p>;
+  }
+
+  render() {
+    return (
+      <div className="innpv-get-started">
+        <div className="innpv-get-started-text">
+          <h1>Skyline</h1>
+          <p>
+            To get started, launch a Skyline server inside your PyTorch project
+            and then hit Connect below.
+          </p>
+        </div>
+        {this._renderErrorMessage()}
+        <div className="innpv-get-started-buttons">
+          <button
+            className="btn btn-primary inline-block-tight icon icon-playback-play"
+            onClick={this._handleConnectClick}
+            disabled={!this._allowConnectClick()}
+          >
+            Connect
+          </button>
+          <button
+            className="btn inline-block-tight icon icon-gear"
+            onClick={this._handleOptionsClick}
+          />
+        </div>
+        {this.state.optionsVisible ? this._renderOptions() : null}
+      </div>
+    );
+  }
+}
+
+GetStarted.defaultProps = {
+  onClick: () => {},
+};
+
+export default GetStarted;

lib/components/Memory.js

@@ -0,0 +1,58 @@
+'use babel';
+
+import React from 'react';
+
+import Subheader from './Subheader';
+import BarSlider from './BarSlider';
+import NumericDisplay from './NumericDisplay';
+import BatchSizeStore from '../stores/batchsize_store';
+import INNPVStore from '../stores/innpv_store';
+import PerfVisState from '../models/PerfVisState';
+
+export default class Memory extends React.Component {
+  constructor(props) {
+    super(props);
+    this._handleResize = this._handleResize.bind(this);
+  }
+
+  _handleResize(deltaPct, basePct) {
+    // TODO: Add in memory predictions again
+    return;
+
+    BatchSizeStore.updateMemoryUsage(deltaPct, basePct);
+    INNPVStore.setPerfVisState(PerfVisState.SHOWING_PREDICTIONS);
+  }
+
+  render() {
+    const {model, handleSliderHoverEnter, handleSliderHoverExit} = this.props;
+    const notReady = model == null;
+
+    return (
+      <div className="innpv-memory innpv-subpanel">
+        <Subheader icon="database">Peak Memory Usage</Subheader>
+        <div className="innpv-subpanel-content">
+          <BarSlider
+            percentage={notReady ? 0 : model.displayPct}
+            handleResize={this._handleResize}
+            onMouseEnter={handleSliderHoverEnter}
+            onMouseLeave={handleSliderHoverExit}
+          />
+          <div className="innpv-subpanel-sidecontent">
+            <NumericDisplay
+              top="Peak Usage"
+              number={notReady ? '---' : model.peakUsageMb}
+              bottom="Megabytes"
+            />
+            <div className="innpv-separator" />
+            <NumericDisplay
+              top="Maximum Capacity"
+              number={notReady ? '---' : model.memoryCapacityMb}
+              bottom="Megabytes"
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+