design improvements to variable-aware editor

Author: leebyron

site/_core/MiniGraphiQL.js

@@ -19,42 +19,42 @@ module.exports = class MiniGraphiQL extends React.Component {
   constructor(props) {
     super();
 
+    const query = props.query.replace(/^\s+/, '').replace(/\s+$/, '');
+
     // Initialize state
     this.state = {
-      query: props.query.replace(/^\s+/, '').replace(/\s+$/, ''),
+      query: query,
       variables: props.variables,
       response: null,
-      variableToType: null,
+      variableToType: getVariableToType(props.schema, query)
     };
 
     this._editorQueryID = 0;
   }
 
   render() {
+    const editor =
+      <QueryEditor
+        key="query-editor"
+        schema={this.props.schema}
+        value={this.state.query}
+        onEdit={this._handleEditQuery.bind(this)}
+        runQuery={this._runQueryFromEditor.bind(this)}
+      />;
+
     return (
       <div className="miniGraphiQL">
-        {this.state.variables ?
+        {Object.keys(this.state.variableToType).length > 0 ?
           <div className="hasVariables">
-            <QueryEditor
-              schema={this.props.schema}
-              value={this.state.query}
-              onEdit={this._handleEditQuery.bind(this)}
-              runQuery={this._runQueryFromEditor.bind(this)}
-            />
+            {editor}
             <VariableEditor
               value={this.state.variables}
               variableToType={this.state.variableToType}
               onEdit={this._handleEditVariables.bind(this)}
               onRunQuery={this._runQuery.bind(this)}
             />
           </div>
-          :
-          <QueryEditor
-            schema={this.props.schema}
-            value={this.state.query}
-            onEdit={this._handleEditQuery.bind(this)}
-            runQuery={this._runQueryFromEditor.bind(this)}
-          />
+          : editor
         }
         <ResultViewer value={this.state.response} />
       </div>
@@ -556,7 +556,7 @@ function onHasCompletion(cm, data, onHintInformationRender) {
 
 function getVariableToType(schema, documentStr) {
   if (!documentStr || !schema) {
-    return;
+    return {};
   }
 
   try {
@@ -579,4 +579,6 @@ function getVariableToType(schema, documentStr) {
   } catch (e) {
     // ignore
   }
+
+  return {};
 }

site/_css/codemirror.less

@@ -694,16 +694,13 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
 .miniGraphiQL {
   margin: 28px 0;
   color: #333;
-  /*background: #faf9f9;*/
-  /*border-left: 4px solid @rhodamine-color;*/
   width: 100%;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-direction: row;
           flex-direction: row;
   position: relative;
 
-  padding: 3px; /*7px 14px;*/
   background: white;
   box-shadow: inset 0 0 0 1px #EEE, inset 4px 0 0 #EEE;
   border-radius: 3px;
@@ -713,8 +710,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
 .query-editor .CodeMirror {
   height: auto;
   min-height: 100px;
-  margin: 0px 7px 28px;
-  /*background: #faf9f9;*/
+  margin: 0px 7px 35px;
+  background: none;
 }
 
 .query-editor {
@@ -724,14 +721,19 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
 .hasVariables {
   width: 50%;
 
-  & > .query-editor {
+  .query-editor {
     width: auto;
   }
 
+  .query-editor .CodeMirror {
+    margin-bottom: 21px;
+  }
+
   .variable-editor .CodeMirror {
     height: auto;
     min-height: 30px;
     margin: 0 7px;
+    background: none;
   }
 
   .variable-editor::before {
@@ -764,10 +766,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
 }
 
 .result-window .CodeMirror {
-  /*background: #fbfafa;*/
-  background: transparent;
+  background: none;
   height: 100%;
   margin: 0 7px;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
 }