Move state to react component

maxbendick · Jan 11, 2018 · c69f4ef · c69f4ef
1 parent a7beaf0
commit c69f4ef
Show file tree

Hide file tree

Showing 3 changed files with 132 additions and 91 deletions.
diff --git a/src/component.tsx b/src/component.tsx
@@ -1,18 +1,89 @@
 import * as React from 'react'
 import JSONTree from 'react-json-tree';
+import { executePython, readAllExamplesPythonCode } from './python'
 
-const Component = (props: {data: any}) => {
-
-  const { data } = props
-  const parsedData = JSON.parse(data)
-
-  return (
-    <div style={{overflow: 'auto'}}>
-      <JSONTree
-        data={parsedData}
-        />
-    </div>
-  )
+
+export type TFRecordProps = {
+}
+export type TFRecordState = {
+  path: string
+  data: any
 }
+export class TFRecordViewerComponent extends React.Component<TFRecordProps, TFRecordState> {
+
+  constructor(props: TFRecordProps) {
+    super(props)
+    this.state = {
+      path: '/home/max/projects/jupyterlab_tfrecord_viewer/sample_record.record',
+      data: null,
+    }
+  }
+
+  componentDidMount() {
+    executePython(readAllExamplesPythonCode,
+      res => {
+        // want to clean out all the binary
+        const cleaned = res.replace(/b\'(.|\n)*\'/g, '{binary...}')
+
+        this.setState({data: cleaned})
+      }
+    )
+  }
+
+  onRequestLoad = () => {
+    console.log('onRequestLoad')
+  }
+
+  handlePathChange = (event: any) => {
+    console.log('handlePathChange')
+    this.setState({path: event.target.value})
+  }
+
+  render() {
+
+    const { data } = this.state
+    const parsedData = JSON.parse(data)
+
+    return (
+      <div>
+
+        <hr/>
+        <input
+          style={{width: '50%'}} 
+          type="text" 
+          value={this.state.path}
+          onChange={this.handlePathChange} />
+
+        <button 
+          onClick={this.onRequestLoad}>
+          WHELP
+          </button>
+
+        <br/>
+
+        {
+          this.state.data
+            ? <JSONTree
+                data={parsedData}
+                />
+            : 'Loading data...'
+        }
+
+      </div>
+    )
+  }
+}
+
+export default TFRecordViewerComponent
+
+
+// let textInput = document.createElement('input')
+// textInput.value = '/home/max/projects/jupyterlab_tfrecord_viewer/sample_record.record'
+// textInput.style.cssText = 'width: calc(100% - 70px);'
+// widget.node.appendChild(textInput)
 
-export default Component
+// let button = document.createElement('button')
+// button.style.cssText = 'width: 60px;'
+// button.innerHTML = 'Load'
+// button.onclick = _mouseEvent => console.log('button clicked', textInput.value)
+// widget.node.appendChild(button)
diff --git a/src/index.ts b/src/index.ts
@@ -1,71 +1,12 @@
 import { Widget } from '@phosphor/widgets'
-import {
-  JupyterLab, JupyterLabPlugin 
-} from '@jupyterlab/application'
+import { JupyterLab, JupyterLabPlugin } from '@jupyterlab/application'
 import { ICommandPalette } from '@jupyterlab/apputils'
-import '../style/index.css'
-
 import * as React from 'react'
 import * as ReactDom from 'react-dom'
 
-import {
-  // KernelMessage,
-  Kernel,
-} from '@jupyterlab/services'
-
+import '../style/index.css'
 import Component from './component'
 
-/**
- * Thoughts on flow:
- * 
- * Could show metadata first.
- * Next, whether to use tf.train.Example
- * Next, how many you want
- */
-
-async function runReader(onResult: (s:  string) =>  any) {
-
-  const kernelSpecs = await Kernel.getSpecs()
-
-  const kernel = await Kernel.startNew({
-    name: kernelSpecs.default
-  })
-
-  const execution = kernel.requestExecute({code: `
-import tensorflow as tf
-from google.protobuf.json_format import MessageToJson
-
-try:
-    record_path = '/home/max/projects/jupyterlab_tfrecord_viewer/sample_record.record'
-
-    record_iterator = tf.python_io.tf_record_iterator(path=record_path)
-
-    all_features = []
-    for str_record in record_iterator:
-        example = tf.train.Example()
-        example.ParseFromString(str_record)
-        # features = str(example.features)
-        features = MessageToJson(example.features)
-        all_features.append(features)
-
-    print('[')
-    print(",\\n".join(all_features))
-    print(']')
-
-except:
-    print('Failed to read record')
-  `})
-
-  execution.done.then(() => {
-    // console.log('Future is fulfilled')
-  })
-  execution.onIOPub = msg => {
-    console.log('msg content', msg.content)  // Print rich output data.
-
-    if (msg.content.name === 'stdout')
-      onResult(msg.content.text as string)
-  }
-}
 
 const activate = (app: JupyterLab, palette: ICommandPalette) => {
   console.log('Extension jupyterlab_tfrecord_viewer is activated!')
@@ -77,27 +18,11 @@ const activate = (app: JupyterLab, palette: ICommandPalette) => {
   widget.title.closable = true
   widget.node.style.cssText = 'overflow: auto;'
 
-  let textInput = document.createElement('input')
-  textInput.value = '/home/max/projects/jupyterlab_tfrecord_viewer/sample_record.record'
-  textInput.style.cssText = 'width: calc(100% - 70px);'
-  widget.node.appendChild(textInput)
-
-  let button = document.createElement('button')
-  button.style.cssText = 'width: 60px;'
-  button.innerHTML = 'Load'
-  button.onclick = _mouseEvent => console.log('button clicked', textInput.value)
-  widget.node.appendChild(button)
-
   let reactContent = document.createElement('div')
   widget.node.appendChild(reactContent)
 
+  ReactDom.render(React.createElement(Component, {/*props*/}), reactContent)
 
-  runReader(res => {
-    // want to clean out all the binary
-    const cleaned = res.replace(/b\'(.|\n)*\'/g, '{binary...}')
-
-    ReactDom.render(React.createElement(Component, {data: cleaned}), reactContent)
-  })
 
   const command = 'jupyterlab_tfrecord_viewer:open'
   app.commands.addCommand(command, {

diff --git a/src/python.ts b/src/python.ts
@@ -0,0 +1,45 @@
+import { Kernel } from '@jupyterlab/services'
+
+
+export async function executePython(code: string, onResult: (s: string) => any) {
+  const kernelSpecs = await Kernel.getSpecs()
+  const kernel = await Kernel.startNew({
+    name: kernelSpecs.default
+  })
+  const execution = kernel.requestExecute({code})
+
+  execution.done.then(() => {
+  })
+  execution.onIOPub = msg => {
+    console.log('msg content', msg.content)
+
+    if (msg.content.name === 'stdout')
+      onResult(msg.content.text as string)
+  }
+}
+
+
+export const readAllExamplesPythonCode = `
+import tensorflow as tf
+from google.protobuf.json_format import MessageToJson
+
+try:
+    record_path = '/home/max/projects/jupyterlab_tfrecord_viewer/sample_record.record'
+
+    record_iterator = tf.python_io.tf_record_iterator(path=record_path)
+
+    all_features = []
+    for str_record in record_iterator:
+        example = tf.train.Example()
+        example.ParseFromString(str_record)
+        # features = str(example.features)
+        features = MessageToJson(example.features)
+        all_features.append(features)
+
+    print('[')
+    print(",\\n".join(all_features))
+    print(']')
+
+except:
+    print('Failed to read record')
+`