Collapsable wizard

src/components/modals/TransformModal.scss

@@ -13,11 +13,19 @@
     }
   }
 
-  label {
+  .contents {
+    color: $dark-gray;
+  }
+
+  .label {
     font-weight: bold;
     padding-top: $padding * 2;
     padding-bottom: $padding / 2;
     display: block;
+
+    button {
+      font-weight: bold;
+    }
   }
 
   textarea.query,

src/components/modals/TransformModal.svelte

@@ -2,6 +2,7 @@
 
 <script>
   import { getContext } from 'svelte'
+  import Icon from 'svelte-awesome'
   import { debounce } from 'lodash-es'
   import { compileJSONPointer } from '../../utils/jsonPointer.js'
   import Header from './Header.svelte'
@@ -11,6 +12,7 @@
   import TransformWizard from './TransformWizard.svelte'
   import * as _ from 'lodash-es'
   import { getIn } from '../../utils/immutabilityHelpers.js'
+  import { faCaretDown, faCaretRight } from '@fortawesome/free-solid-svg-icons'
 
   export let id
   export let json
@@ -27,6 +29,9 @@
   let previewHasError = false
   let preview = ''
 
+  let showWizard = true
+  let showQuery = true
+
   function evalTransform(json, query) {
     // FIXME: replace unsafe new Function with a JS based query language 
     //  As long as we don't persist or fetch queries, there is no security risk.
@@ -84,9 +89,11 @@
       preview = err.toString()
       previewHasError = true
     }
-
   }
 
+  function toggleShowWizard () {
+    showWizard = !showWizard
+  }
 </script>
 
 <div class="jsoneditor-modal transform">
@@ -102,17 +109,26 @@
       <code>_.pick</code>, <code>_.uniq</code>, <code>_.get</code>, etcetera.
     </div>
 
-    <label>Wizard</label>
+    <div class="label">
+      <button on:click={toggleShowWizard}>
+        <Icon data={showWizard ? faCaretDown : faCaretRight} />
+        Wizard
+      </button>
+    </div>
+    {#if showWizard}
       {#if Array.isArray(json)}
         <TransformWizard json={json} onQuery={updateQuery} />
       {:else}
         (Only available for arrays, not for objects)
       {/if}
+    {/if}
 
-    <label>Query</label>
+    <div class="label">
+      Query
+    </div>
     <textarea class="query" bind:value={query} />
 
-    <label>Preview</label>
+    <div class="label">Preview</div>
     <textarea
       class="preview" 
       class:error={previewHasError}