working on instruments

frontend/components/Connection.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 import gql from 'graphql-tag'
-import { Mutation } from 'react-apollo'
+import { Mutation, Query } from 'react-apollo'
 import { INTERFACE_LIST } from './InterfaceList'
 
 const StyledConnection = styled.div`
@@ -25,6 +25,19 @@ const CONNECTION_COMMAND = gql`
   }
 `
 
+const CONNECTION_QUERY = gql`
+  query CONNECTION_QUERY($id: ID!) {
+    connection(id: $id) {
+      workerInfo {
+        pid
+        killed
+        exitCode
+        signalCode
+      }
+    }
+  }
+`
+
 class Connection extends React.Component {
   state = {
     command: ''
@@ -36,11 +49,12 @@ class Connection extends React.Component {
 
   render() {
     const { id, device, interfaceName } = this.props.data
+    console.log(id, device, interfaceName)
     return (
       <Mutation
         mutation={CONNECTION_COMMAND}
         variables={{
-          connectionId: this.props.data.id,
+          connectionId: id,
           type: 'ask',
           string: this.state.command
         }}
@@ -56,6 +70,21 @@ class Connection extends React.Component {
             <button type='submit' onClick={connectionCommand} disabled={loading}>Send</button>
             <textarea id='response' value={data && data.connectionCommand} readOnly={true} />
             <textarea id='error' value={error} readOnly={true} />
+            <Query query={CONNECTION_QUERY} variables={{ id }}>
+              {({ data, error, loading }) => {
+                if (loading) return null
+                if (error) return null
+                console.log(data)
+                const { connection: { workerInfo } } = data
+                return (
+                  <>
+                    <p>pid: {workerInfo.pid}</p>
+                    <p>killed: {workerInfo.killed ? 'yes' : 'no'}</p>
+
+                  </>
+                )
+              }}
+            </Query>
           </StyledConnection>
         )}
       </Mutation>

frontend/components/Header.js

@@ -81,6 +81,9 @@ const Header = props => {
         <Link href='/projects'>
           <a>Projects</a>
         </Link>
+        <Link href='/instruments'>
+          <a>Instruments</a>
+        </Link>
         <Link href='/user'>
           <a>{user ? user.name : 'User'}</a>
         </Link>

frontend/components/Instrument.js

@@ -1,14 +1,34 @@
 import gql from 'graphql-tag'
 import { Query, Mutation } from 'react-apollo'
 import InstrumentSubsystem from './InstrumentSubsystem'
+import Gallery from './Gallery'
 
-const CREATE_INSTRUMENT = gql`
-  mutation CREATE_INSTRUMENT($name: String!, $description: String!, $interfaces: [String]!) {
-    createInstrument(name: $name, description: $description, interfaces: $interfaces) {
-      id
-    }
-  }
-`
+const instrumentSubsystems = [{
+  name: 'Source',
+  description: 'The commands in the SOURce subsystem are used to control the output of the power supply.',
+  commands: [{
+    id: '1',
+    tag: 'Apply',
+    name: 'Apply voltage and current',
+    description: 'This command sets voltage and current levels on a specified channel with a single command message.',
+    instrument: null,
+    readString: null,
+    writeString: '[SOURce:]APPLy {CH1|CH2|CH3}, <NRf+>, <NRf+>',
+    parameters: ['channel']
+  },
+  {
+    id: '1',
+    tag: 'Output',
+    name: 'Channel output state',
+    description: 'This command sets the output state of the presently selected channel. The query form of this command returns the output state of the presently selected channel.',
+    instrument: null,
+    readString: '[SOURce:]CHANnel:OUTPut[:STATe]?',
+    writeString: '[SOURce:]CHANnel:OUTPut[:STATe] <BOOL>',
+    parameters: ['channel']
+  }],
+  parameters: [{ channel: ['CH1', 'CH2', 'CH3'] }],
+  subsystems: []
+}]
 
 class Instrument extends React.Component {
   state = {
@@ -24,53 +44,16 @@ class Instrument extends React.Component {
     this.setState({ [event.target.name]: event.target.value })
   }
 
-  addComment = event => {
-    event.preventDefault()
-    const newState = { ...this.state }
-    newState.changes.push(this.state.change)
-    newState.change = ''
-    this.setState(newState)
-  }
-
   render() {
     return (
-      <Mutation mutation={CREATE_PROJECT_VERSION} variables={this.state}>
-        {(createProjectVersion, { data, error, loading }) => (
-          <form onSubmit={async event => {
-            event.preventDefault()
-            const { data } = await createProjectVersion()
-            this.state.id = data.createProjectVersion.id
-          }}>
-            {!this.props.title && <h1>Project Version</h1>}
-            <fieldset id='project-generic'>
-              <label htmlFor='name'>Project name</label>
-              <input type='text' name='name' id='name' placeholder='Project version name' value={this.state.name} onChange={this.toState} />
-              <label htmlFor='description'>Date</label>
-              <input type='text' name='description' id='description' placeholder='Project description' value={this.state.description} onChange={this.toState} />
-              {this.props.project || (
-                <Query query={QUERY_PROJECTS}>
-                  {({ data, error, loading }) => {
-                    if (loading) return <p>Loading projects...</p>
-                    if (error) return <p>Error: {error.message}</p>
-                    if (!data || !data.projects.length) return <p>No projects found.</p>
-                    if (!this.state.project) this.setState({ project: data.projects[0].id })
-                    return (
-                      <label htmlFor="version">
-                        <select name="version" id="version">onChange={this.toState}>
-                        {data.projects.map(project =>
-                          <option key={project.id} value={project.id}>{project.name}</option>)
-                          }
-                        </select>
-                      </label>
-                    )
-                  }}
-                </Query>
-              )}
-            </fieldset>
-            <button type='submit'>Save</button>
-          </form>
-        )}
-      </Mutation>
+      <div>
+        <h1>{this.state.name || 'Keithley 2230-3'}</h1>
+        <p>{this.state.description || 'A really nice 3 output multimeter'}</p>
+        <Gallery title='Documents' items={['Hallo']} />
+        <Gallery title='Interfaces' items={['serial', 'usbtmc'].map(item => <div>{item}</div>)} />
+        <Gallery title='Subsystems' items={instrumentSubsystems.map(instrumentSubsystem =>
+          <InstrumentSubsystem instrumentSubsystem={instrumentSubsystem} />)} />
+      </div>
     )
   }
 }

frontend/components/InstrumentCommand.js

@@ -11,14 +11,15 @@ const CREATE_INSTRUMENT_SUBSYSTEM = gql`
 
 class InstrumentCommand extends React.Component {
   state = {
-    id: this.props.instrumentCommand ? this.props.instrumentCommand.id : null,
+    id: null,
     tag: '',
     name: '',
     description: '',
     instrument: null,
     readString: '',
     writeString: '',
-    parameters: []
+    parameters: [],
+    ...this.props.instrumentCommand
   }
 
   toState = event => {

frontend/components/InstrumentSubsystem.js

@@ -1,5 +1,6 @@
 import gql from 'graphql-tag'
 import { Query, Mutation } from 'react-apollo'
+import Gallery from './Gallery'
 
 const CREATE_INSTRUMENT_SUBSYSTEM = gql`
   mutation CREATE_INSTRUMENT_SUBSYSTEM($name: String!, $description: String!, $interfaces: [String]!) {
@@ -11,68 +12,28 @@ const CREATE_INSTRUMENT_SUBSYSTEM = gql`
 
 class InstrumentSubsystem extends React.Component {
   state = {
-    id: this.props.instrumentSubsystem ? this.props.instrumentSubsystem.id : null,
+    id: null,
     name: '',
     description: '',
     commands: [],
     parameters: [],
-    subsystems: []
+    subsystems: [],
+    ...this.props.instrumentSubsystem
   }
 
   toState = event => {
     this.setState({ [event.target.name]: event.target.value })
   }
 
-  addComment = event => {
-    event.preventDefault()
-    const newState = { ...this.state }
-    newState.changes.push(this.state.change)
-    newState.change = ''
-    this.setState(newState)
-  }
-
   render() {
     return (
-      <Mutation mutation={CREATE_PROJECT_VERSION} variables={this.state}>
-        {(createProjectVersion, { data, error, loading }) => (
-          <form onSubmit={async event => {
-            event.preventDefault()
-            const { data } = await createProjectVersion()
-            this.state.id = data.createProjectVersion.id
-          }}>
-            {!this.props.title && <h1>Project Version</h1>}
-            <fieldset id='project-generic'>
-              <label htmlFor='name'>Project name</label>
-              <input type='text' name='name' id='name' placeholder='Project version name' value={this.state.name} onChange={this.toState} />
-              <label htmlFor='date'>Date</label>
-              <input type='date' name='date' id='date' placeholder='Project date' value={this.state.date} onChange={this.toState} />
-              <label htmlFor='change'>Comments</label>
-              <input type='text' name='change' id='change' placeholder='Project change' value={this.state.change} onChange={this.toState} /><button onClick={this.addComment}>Add</button>
-              {this.state.changes.map((change, index) => <p key={index}>{change}</p>)}
-              {this.props.project || (
-                <Query query={QUERY_PROJECTS}>
-                  {({ data, error, loading }) => {
-                    if (loading) return <p>Loading projects...</p>
-                    if (error) return <p>Error: {error.message}</p>
-                    if (!data || !data.projects.length) return <p>No projects found.</p>
-                    if (!this.state.project) this.setState({ project: data.projects[0].id })
-                    return (
-                      <label htmlFor="version">
-                        <select name="version" id="version">onChange={this.toState}>
-                        {data.projects.map(project =>
-                          <option key={project.id} value={project.id}>{project.name}</option>)
-                          }
-                        </select>
-                      </label>
-                    )
-                  }}
-                </Query>
-              )}
-            </fieldset>
-            <button type='submit'>Save</button>
-          </form>
-        )}
-      </Mutation>
+      <div>
+        <h1>{this.state.name}</h1>
+        <p>{this.state.description}</p>
+        <Gallery title='Commands' items={[]} />
+        <Gallery title='Parameters' items={[]} />
+        <Gallery title='Subsystems' items={[]} />
+      </div>
     )
   }
 }

frontend/pages/instruments.js

@@ -0,0 +1,7 @@
+import Instrument from '../components/Instrument'
+
+const InstrumentsPage = props => (
+  <Instrument />
+)
+
+export default InstrumentsPage