[v0.2.0] Release up to commit 3615458

This release includes the plugin files up to commit 3615458fcbc8db331c8424203ff8e59fdd6ad661 in the monorepository.
skylineprof · Jan 25, 2020 · 8088c73 · 8088c73
1 parent 8a7427b
commit 8088c73
Show file tree

Hide file tree

Showing 61 changed files with 2,388 additions and 921 deletions.
diff --git a/lib/components/Memory.js b/lib/components/Memory.js
@@ -1,12 +1,11 @@
 'use babel';
 
 import React from 'react';
+import {connect} from 'react-redux';
 
 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 {
@@ -17,10 +16,6 @@ export default class Memory extends React.Component {
 
   _handleResize(deltaPct, basePct) {
     // TODO: Add in memory predictions again
-    return;
-
-    BatchSizeStore.updateMemoryUsage(deltaPct, basePct);
-    INNPVStore.setPerfVisState(PerfVisState.SHOWING_PREDICTIONS);
   }
 
   render() {
@@ -56,3 +51,9 @@ export default class Memory extends React.Component {
   }
 }
 
+const mapStateToProps = (state, ownProps) => ({
+  model: state.memoryUsage,
+  ...ownProps,
+});
+
+export default connect(mapStateToProps)(Memory);
diff --git a/lib/components/MemoryBreakdown.js b/lib/components/MemoryBreakdown.js
@@ -1,9 +1,8 @@
 'use babel';
 
 import React from 'react';
+import {connect} from 'react-redux';
 
-import AnalysisStore from '../stores/analysis_store';
-import ProjectStore from '../stores/project_store';
 import PerfBarContainer from './generic/PerfBarContainer';
 import MemoryEntryLabel from '../models/MemoryEntryLabel';
 import PerfVisState from '../models/PerfVisState';
@@ -38,77 +37,18 @@ const COLORS_BY_LABEL = {
   ],
 }
 
-export default class MemoryPerfBarContainer extends React.Component {
+class MemoryBreakdown extends React.Component {
   constructor(props) {
     super(props);
-    const memoryBreakdown = AnalysisStore.getMemoryBreakdown();
-    this.state = {
-      memoryBreakdown,
-      textEditorMap: this._getTextEditorMap(memoryBreakdown),
-      expanded: null,
-    };
-
-    this._onLabelClick = this._onLabelClick.bind(this);
-    this._onAnalysisStoreUpdate = this._onAnalysisStoreUpdate.bind(this);
-    this._onProjectStoreUpdate = this._onProjectStoreUpdate.bind(this);
-  }
-
-  componentDidMount() {
-    AnalysisStore.addListener(this._onAnalysisStoreUpdate);
-    ProjectStore.addListener(this._onProjectStoreUpdate);
-  }
-
-  componentWillUnmount() {
-    AnalysisStore.removeListener(this._onAnalysisStoreUpdate);
-    ProjectStore.removeListener(this._onProjectStoreUpdate);
-  }
-
-  _onAnalysisStoreUpdate() {
-    const memoryBreakdown = AnalysisStore.getMemoryBreakdown();
-    this.setState({
-      memoryBreakdown,
-      textEditorMap: this._getTextEditorMap(memoryBreakdown),
-    });
-  }
-
-  _onProjectStoreUpdate() {
-    this.setState({
-      textEditorMap: this._getTextEditorMap(this.state.memoryBreakdown),
-    });
-  }
-
-  _getTextEditorMap(memoryBreakdown) {
-    const editorMap = new Map();
-    if (memoryBreakdown == null) {
-      return editorMap;
-    }
-
-    [MemoryEntryLabel.Weights, MemoryEntryLabel.Activations].forEach(label => {
-      memoryBreakdown.getEntriesByLabel(label).forEach(entry => {
-        if (entry.filePath == null || editorMap.has(entry.filePath)) {
-          return;
-        }
-        editorMap.set(entry.filePath, ProjectStore.getTextEditorsFor(entry.filePath));
-      });
-    });
-
-    return editorMap;
+    this._renderPerfBars = this._renderPerfBars.bind(this);
   }
 
   _getLabels() {
-    const {memoryBreakdown, expanded} = this.state;
+    const {memoryBreakdown} = this.props;
     if (memoryBreakdown == null) {
       return DEFAULT_MEMORY_LABELS;
     }
 
-    if (expanded != null) {
-      return DEFAULT_MEMORY_LABELS.map(({label, ...rest}) => ({
-        ...rest,
-        label,
-        percentage: expanded === label ? 100 : 0.001,
-      }));
-    }
-
     const peakUsageBytes = memoryBreakdown.getPeakUsageBytes();
     return DEFAULT_MEMORY_LABELS.map(({label, ...rest}) => ({
       ...rest,
@@ -117,24 +57,13 @@ export default class MemoryPerfBarContainer extends React.Component {
     }));
   }
 
-  _onLabelClick(label) {
-    const {expanded} = this.state;
-    if (expanded == null && label !== MemoryEntryLabel.Untracked) {
-      this.setState({expanded: label});
-    } else if (expanded === label) {
-      this.setState({expanded: null});
-    }
-  }
-
   _entryKey(entry, index) {
-    if (entry.filePath != null && entry.lineNumber != null) {
-      return `${entry.name}-${entry.filePath}-${entry.lineNumber}`;
-    }
+    // TODO: Use a stable identifier (presumably an id from the report database)
     return `${entry.name}-idx${index}`;
   }
 
-  _renderPerfBars() {
-    const {memoryBreakdown, expanded, textEditorMap} = this.state;
+  _renderPerfBars(expanded) {
+    const {editorsByPath, projectRoot, memoryBreakdown} = this.props;
     if (memoryBreakdown == null) {
       return null;
     }
@@ -158,12 +87,13 @@ export default class MemoryPerfBarContainer extends React.Component {
           displayPct = toPercentage(entry.sizeBytes, totalSizeBytes);
         }
 
-        const editors = entry.filePath != null ? textEditorMap.get(entry.filePath) : [];
+        const editors = entry.filePath != null ? editorsByPath.get(entry.filePath) : [];
 
         results.push(
           <MemoryPerfBar
             key={this._entryKey(entry, index)}
             memoryEntry={entry}
+            projectRoot={projectRoot}
             editors={editors}
             overallPct={overallPct}
             resizable={false}
@@ -179,18 +109,23 @@ export default class MemoryPerfBarContainer extends React.Component {
 
   render() {
     const {perfVisState} = this.props;
-    const {memoryBreakdown} = this.state;
     const disabled = perfVisState === PerfVisState.MODIFIED ||
       perfVisState === PerfVisState.ANALYZING;
 
     return (
       <PerfBarContainer
         disabled={disabled}
         labels={this._getLabels()}
-        onLabelClick={this._onLabelClick}
-      >
-        {this._renderPerfBars()}
-      </PerfBarContainer>
+        renderPerfBars={this._renderPerfBars}
+      />
     );
   }
 }
+
+const mapStateToProps = (state, ownProps) => ({
+  editorsByPath: state.editorsByPath,
+  memoryBreakdown: state.memoryBreakdown,
+  ...ownProps,
+});
+
+export default connect(mapStateToProps)(MemoryBreakdown);
diff --git a/lib/components/MemoryPerfBar.js b/lib/components/MemoryPerfBar.js
@@ -5,9 +5,11 @@ import React from 'react';
 
 import PerfBar from './generic/PerfBar';
 import UsageHighlight from './UsageHighlight';
-import ProjectStore from '../stores/project_store';
 import {toReadableByteSize} from '../utils';
 
+import Events from '../telemetry/events';
+import TelemetryClientContext from '../telemetry/react_context';
+
 class MemoryPerfBar extends React.Component {
   constructor(props) {
     super(props);
@@ -36,14 +38,18 @@ class MemoryPerfBar extends React.Component {
   }
 
   _onClick() {
-    const {memoryEntry} = this.props;
-    if (memoryEntry.filePath == null) {
+    const {memoryEntry, projectRoot} = this.props;
+    if (memoryEntry.filePath == null || projectRoot == null) {
       return;
     }
 
     // Atom uses 0-based line numbers, but INNPV uses 1-based line numbers
-    const absoluteFilePath = path.join(ProjectStore.getProjectRoot(), memoryEntry.filePath);
+    const absoluteFilePath = path.join(projectRoot, memoryEntry.filePath);
     atom.workspace.open(absoluteFilePath, {initialLine: memoryEntry.lineNumber - 1});
+    this.context.record(
+      Events.Interaction.CLICKED_MEMORY_ENTRY,
+      {label: memoryEntry.name},
+    );
   }
 
   render() {
@@ -64,4 +70,6 @@ MemoryPerfBar.defaultProps = {
   editors: [],
 };
 
+MemoryPerfBar.contextType = TelemetryClientContext;
+
 export default MemoryPerfBar;
diff --git a/lib/components/PerfHint.js b/lib/components/PerfHint.js
@@ -4,7 +4,6 @@ import React from 'react'
 import ReactDOM from 'react-dom';
 
 import SourceMarker from '../editor/marker';
-import INNPVStore from '../stores/innpv_store';
 import PerfHintState from '../models/PerfHintState';
 
 function Increase() {
@@ -26,7 +25,7 @@ function Decrease() {
 class PerfHint extends React.Component {
   constructor(props) {
     super(props);
-    this._marker = new SourceMarker(INNPVStore.getEditor());
+    this._marker = new SourceMarker(/* TODO: Reference to a TextEditor */);
     this._el = document.createElement('div');
   }
 

diff --git a/lib/components/PerfVis.js b/lib/components/PerfVis.js
@@ -1,57 +1,39 @@
 'use babel';
 
 import React from 'react';
+import {connect} from 'react-redux';
 
+import AppState from '../models/AppState';
 import GetStarted from './GetStarted';
 import PerfVisMainView from './PerfVisMainView';
 
-import AppState from '../models/AppState';
-import INNPVStore from '../stores/innpv_store';
-
-export default class PerfVis extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      appState: INNPVStore.getAppState(),
-      perfVisState: INNPVStore.getPerfVisState(),
-      errorMessage: INNPVStore.getErrorMessage(),
-    };
-    this._onStoreUpdate = this._onStoreUpdate.bind(this);
-  }
-
-  componentDidMount() {
-    INNPVStore.addListener(this._onStoreUpdate);
-  }
-
-  componentWillUnmount() {
-    INNPVStore.removeListener(this._onStoreUpdate);
-  }
-
-  _onStoreUpdate() {
-    this.setState({
-      appState: INNPVStore.getAppState(),
-      perfVisState: INNPVStore.getPerfVisState(),
-      errorMessage: INNPVStore.getErrorMessage(),
-    });
-  }
-
+class PerfVis extends React.Component {
   _renderContents() {
-    switch (this.state.appState) {
+    const {
+      appState,
+      perfVisState,
+      errorMessage,
+      projectRoot,
+      handleGetStartedClick,
+    } = this.props;
+
+    switch (appState) {
       case AppState.OPENED:
       case AppState.CONNECTING:
         return (
           <GetStarted
-            appState={this.state.appState}
-            handleClick={this.props.handleGetStartedClick}
-            errorMessage={this.state.errorMessage}
+            appState={appState}
+            handleClick={handleGetStartedClick}
+            errorMessage={errorMessage}
           />
         );
 
       case AppState.CONNECTED:
         return (
           <PerfVisMainView
-            perfVisState={this.state.perfVisState}
-            errorMessage={this.state.errorMessage}
+            perfVisState={perfVisState}
+            errorMessage={errorMessage}
+            projectRoot={projectRoot}
           />
         );
 
@@ -64,3 +46,13 @@ export default class PerfVis extends React.Component {
     return <div className="innpv-wrap">{this._renderContents()}</div>;
   }
 }
+
+const mapStateToProps = (state, ownProps) => ({
+  appState: state.appState,
+  perfVisState: state.perfVisState,
+  errorMessage: state.errorMessage,
+  projectRoot: state.projectRoot,
+  ...ownProps,
+});
+
+export default connect(mapStateToProps)(PerfVis);