refactor: dev optimizations + improvements

client/components/admin-dev.vue

@@ -4,49 +4,71 @@
       .pa-3.pt-4
         .headline.primary--text Developer Tools
         .subheading.grey--text ¯\_(ツ)_/¯
-      v-tabs(color='grey lighten-4', fixed-tabs, slider-color='primary', show-arrows)
-        v-tab Graph API Playground
-        v-tab Graph API Map
-
-        v-tab-item(:transition='false', :reverse-transition='false')
+      v-tabs(v-model='selectedTab', color='grey lighten-4', fixed-tabs, slider-color='primary', show-arrows, @input='tabChanged')
+        v-tab(key='0') Graph API Playground
+        v-tab(key='1') Graph API Map
+      v-tabs-items(v-model='selectedTab')
+        v-tab-item(key='0', :transition='false', :reverse-transition='false')
           #graphiql
+
+        v-tab-item(key='1', :transition='false', :reverse-transition='false')
+          #voyager
+
 </template>
 
 <script>
 import React from 'react'
 import ReactDOM from 'react-dom'
 import GraphiQL from 'graphiql'
+import { Voyager } from 'graphql-voyager'
+import 'graphiql/graphiql.css'
+import 'graphql-voyager/dist/voyager.css'
+
+const fetcher = (qry, respType) => {
+  return fetch('/graphql', {
+    method: 'post',
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(qry),
+    credentials: 'include'
+  }).then(response => {
+    if (respType === 'json') {
+      return response.json()
+    } else {
+      return response.text()
+    }
+  }).then(responseBody => {
+    try {
+      return JSON.parse(responseBody)
+    } catch (error) {
+      return responseBody
+    }
+  })
+}
 
 export default {
   data() {
-    return {}
+    return {
+      selectedTab: '0'
+    }
   },
   mounted() {
     this.renderGraphiQL()
   },
   methods: {
+    tabChanged (tabId) {
+      switch (tabId) {
+        case '1':
+          this.renderVoyager()
+          break
+      }
+    },
     renderGraphiQL() {
       ReactDOM.render(
         React.createElement(GraphiQL, {
-          fetcher: graphQLParams => {
-            return fetch('/graphql', {
-              method: 'post',
-              headers: {
-                'Accept': 'application/json',
-                'Content-Type': 'application/json'
-              },
-              body: JSON.stringify(graphQLParams),
-              credentials: 'include'
-            }).then(function (response) {
-              return response.text()
-            }).then(function (responseBody) {
-              try {
-                return JSON.parse(responseBody)
-              } catch (error) {
-                return responseBody
-              }
-            })
-          },
+          fetcher: qry => fetcher(qry, 'text'),
           query: null,
           response: null,
           variables: null,
@@ -55,6 +77,15 @@ export default {
         }),
         document.getElementById('graphiql')
       )
+    },
+    renderVoyager() {
+      ReactDOM.render(
+        React.createElement(Voyager, {
+          introspection: qry => fetcher({ query: qry }, 'json'),
+          workerURI: '/js/voyager.worker.js'
+        }),
+        document.getElementById('voyager')
+      )
     }
   }
 }
@@ -79,85 +110,9 @@ export default {
     background-color: initial;
     box-shadow: initial;
   }
+}
 
-  .cm-s-wikijs-dark.CodeMirror {
-    background: darken(mc('grey','900'), 3%);
-    color: #e0e0e0;
-  }
-  .cm-s-wikijs-dark div.CodeMirror-selected {
-    background: mc('blue','800');
-  }
-  .cm-s-wikijs-dark .cm-matchhighlight {
-    background: mc('blue','800');
-  }
-  .cm-s-wikijs-dark .CodeMirror-line::selection, .cm-s-wikijs-dark .CodeMirror-line > span::selection, .cm-s-wikijs-dark .CodeMirror-line > span > span::selection {
-    background: mc('red', '500');
-  }
-  .cm-s-wikijs-dark .CodeMirror-line::-moz-selection, .cm-s-wikijs-dark .CodeMirror-line > span::-moz-selection, .cm-s-wikijs-dark .CodeMirror-line > span > span::-moz-selection {
-    background: mc('red', '500');
-  }
-  .cm-s-wikijs-dark .CodeMirror-gutters {
-    background: darken(mc('grey','900'), 6%);
-    border-right: 1px solid mc('grey','900');
-  }
-  .cm-s-wikijs-dark .CodeMirror-guttermarker {
-    color: #ac4142;
-  }
-  .cm-s-wikijs-dark .CodeMirror-guttermarker-subtle {
-    color: #505050;
-  }
-  .cm-s-wikijs-dark .CodeMirror-linenumber {
-    color: mc('grey','800');
-  }
-  .cm-s-wikijs-dark .CodeMirror-cursor {
-    border-left: 1px solid #b0b0b0;
-  }
-  .cm-s-wikijs-dark span.cm-comment {
-    color: mc('orange','800');
-  }
-  .cm-s-wikijs-dark span.cm-atom {
-    color: #aa759f;
-  }
-  .cm-s-wikijs-dark span.cm-number {
-    color: #aa759f;
-  }
-  .cm-s-wikijs-dark span.cm-property, .cm-s-wikijs-dark span.cm-attribute {
-    color: #90a959;
-  }
-  .cm-s-wikijs-dark span.cm-keyword {
-    color: #ac4142;
-  }
-  .cm-s-wikijs-dark span.cm-string {
-    color: #f4bf75;
-  }
-  .cm-s-wikijs-dark span.cm-variable {
-    color: #90a959;
-  }
-  .cm-s-wikijs-dark span.cm-variable-2 {
-    color: #6a9fb5;
-  }
-  .cm-s-wikijs-dark span.cm-def {
-    color: #d28445;
-  }
-  .cm-s-wikijs-dark span.cm-bracket {
-    color: #e0e0e0;
-  }
-  .cm-s-wikijs-dark span.cm-tag {
-    color: #ac4142;
-  }
-  .cm-s-wikijs-dark span.cm-link {
-    color: #aa759f;
-  }
-  .cm-s-wikijs-dark span.cm-error {
-    background: #ac4142;
-    color: #b0b0b0;
-  }
-  .cm-s-wikijs-dark .CodeMirror-activeline-background {
-    background: mc('grey','900');
-  }
-  .cm-s-wikijs-dark .CodeMirror-matchingbracket {
-    text-decoration: underline;
-    color: white !important;
-  }
+#voyager {
+  height: calc(100vh - 250px);
 }
 </style>