widget column bar - respects sizes

packages/web/src/modals/ImportExportModal.svelte

@@ -135,11 +135,9 @@
             <WidgetColumnBarItem title="Messages" name="messages">
               <SocketMessageView eventName={runnerId ? `runner-info-${runnerId}` : null} {executeNumber} />
             </WidgetColumnBarItem>
-            {#if $previewReaderStore}
+            <WidgetColumnBarItem title="Preview" name="preview" skip={!$previewReaderStore}>
-              <WidgetColumnBarItem title="Preview" name="preview">
               <PreviewDataGrid reader={$previewReaderStore} />
             </WidgetColumnBarItem>
-            {/if}
             <WidgetColumnBarItem title="Advanced configuration" name="config" collapsed>
               <FormTextField label="Schedule" name="schedule" />
               <FormTextField label="Start variable index" name="startVariableIndex" />

packages/web/src/widgets/WidgetColumnBar.svelte

@@ -1,5 +1,39 @@
-<div class="main-container">
+<script lang="ts">
-    <slot></slot>
+  import { setContext } from 'svelte';
+  import { writable } from 'svelte/store';
+  import createRef from '../utility/createRef';
+
+  let definitions = [];
+  const dynamicPropsCollection = [];
+  let clientHeight;
+
+  const widgetColumnBarHeight = writable(0);
+
+  setContext('widgetColumnBarHeight', widgetColumnBarHeight);
+  setContext('pushWidgetItemDefinition', (item, dynamicProps) => {
+    dynamicPropsCollection.push(dynamicProps);
+    definitions = [...definitions, item];
+    return definitions.length - 1;
+  });
+  setContext('updateWidgetItemDefinition', (index, item) => {
+    definitions[index] = item;
+  });
+
+  $: $widgetColumnBarHeight = clientHeight;
+
+  $: computeDynamicProps(definitions);
+
+  function computeDynamicProps(defs: any[]) {
+    for (let index = 0; index < defs.length; index++) {
+      const definition = defs[index];
+      const splitterVisible = !!defs.slice(index + 1).find(x => x && !x.collapsed && !x.skip);
+      dynamicPropsCollection[index].set({ splitterVisible });
+    }
+  }
+</script>
+
+<div class="main-container" bind:clientHeight>
+  <slot />
 </div>
 
 <style>

packages/web/src/widgets/WidgetColumnBarItem.svelte

@@ -1,28 +1,69 @@
 <script lang="ts">
+  import _ from 'lodash';
+
+  import { getContext } from 'svelte';
+
+  import { writable } from 'svelte/store';
+
   import WidgetTitle from './WidgetTitle.svelte';
+  import splitterDrag from '../utility/splitterDrag';
 
   export let title;
   export let name;
+  export let skip = false;
   export let height = null;
   export let collapsed = null;
 
+  let size = 0;
+
+  const dynamicProps = writable({
+    splitterVisible: false,
+  });
+
+  const pushWidgetItemDefinition = getContext('pushWidgetItemDefinition') as any;
+  const updateWidgetItemDefinition = getContext('updateWidgetItemDefinition') as any;
+  const widgetColumnBarHeight = getContext('widgetColumnBarHeight') as any;
+  const widgetItemIndex = pushWidgetItemDefinition(
+    {
+      collapsed,
+      height,
+    },
+    dynamicProps
+  );
+
+  $: updateWidgetItemDefinition(widgetItemIndex, { collapsed: !visible, height });
+
+  $: setInitialSize(height, $widgetColumnBarHeight);
+
+  function setInitialSize(initialSize, parentHeight) {
+    if (_.isString(initialSize) && initialSize.endsWith('px')) size = parseInt(initialSize.slice(0, -2));
+    else if (_.isString(initialSize) && initialSize.endsWith('%'))
+      size = (parentHeight * parseFloat(initialSize.slice(0, -1))) / 100;
+    else size = parentHeight / 3;
+  }
+
   let visible = !collapsed;
 </script>
 
+{#if !skip}
   <WidgetTitle on:click={() => (visible = !visible)}>{title}</WidgetTitle>
 
   {#if visible}
-  <div>
+    <div class="wrapper" style={$dynamicProps.splitterVisible ? `height:${size}px` : 'flex: 1 1 0'}>
       <slot />
     </div>
+
+    {#if $dynamicProps.splitterVisible}
+      <div class="vertical-split-handle" use:splitterDrag={'clientY'} on:resizeSplitter={e => (size += e.detail)} />
+    {/if}
+  {/if}
 {/if}
 
 <style>
-  div {
+  .wrapper {
     overflow: hidden;
     position: relative;
     flex-direction: column;
     display: flex;
-    min-height: 100px;
   }
 </style>