WIP enforce division minimum sizes

Co-authored by: Andrew Watkins <andrew.watkinz@gmail.com>
Co-authored by: Alex Paxton <thealexpaxton@gmail.com>

ui/src/ifql/components/TimeMachine.tsx

@@ -32,7 +32,7 @@ class TimeMachine extends PureComponent<Props> {
   private get divisions() {
     return [
       {
-        minSize: 200,
+        minPixels: 200,
         render: () => (
           <Resizer
             containerClass="ifql-left-panel"
@@ -42,7 +42,7 @@ class TimeMachine extends PureComponent<Props> {
         ),
       },
       {
-        minSize: 200,
+        minPixels: 200,
         render: () => <TimeMachineVis blob="Visualizer" />,
       },
     ]
@@ -54,18 +54,26 @@ class TimeMachine extends PureComponent<Props> {
     return [
       {
         name: 'IFQL',
+        minPixels: 60,
         render: () => (
           <TimeMachineEditor script={script} onChangeScript={onChangeScript} />
         ),
       },
       {
         name: 'Builder',
+        minPixels: 60,
         render: () => <BodyBuilder body={body} suggestions={suggestions} />,
       },
       {
         name: 'Schema Explorer',
+        minPixels: 60,
         render: () => <div>Explorin all yer schemas</div>,
       },
+      {
+        name: '4th Item',
+        minPixels: 60,
+        render: () => <div>Oh boy!</div>,
+      },
     ]
   }
 }

ui/src/shared/components/ResizeContainer.tsx

@@ -27,13 +27,14 @@ interface State {
 
 interface Division {
   name?: string
-  minSize?: number
   render: () => ReactElement<any>
+  minPixels?: number
 }
 
 interface DivisionState extends Division {
   id: string
   size: number
+  minPixels?: number
 }
 
 interface Props {
@@ -125,6 +126,7 @@ class Resizer extends Component<Props, State> {
             id={d.id}
             name={d.name}
             size={d.size}
+            minPixels={d.minPixels}
             render={d.render}
             orientation={orientation}
             draggable={i > 0}
@@ -156,6 +158,7 @@ class Resizer extends Component<Props, State> {
       ...d,
       id: uuid.v4(),
       size,
+      minPixels: d.minPixels || 0,
     }))
   }
 
@@ -212,6 +215,18 @@ class Resizer extends Component<Props, State> {
     return Math.abs(delta / height)
   }
 
+  private minPercentX = (xMinPixels: number): number => {
+    const {height} = this.containerRef.getBoundingClientRect()
+
+    return xMinPixels / height
+  }
+
+  private minPercentY = (yMinPixels: number): number => {
+    const {height} = this.containerRef.getBoundingClientRect()
+
+    return yMinPixels / height
+  }
+
   private handleDrag = (e: MouseEvent<HTMLElement>) => {
     const {activeHandleID} = this.state
     if (!activeHandleID) {
@@ -241,32 +256,57 @@ class Resizer extends Component<Props, State> {
   private up = activePosition => () => {
     const divisions = this.state.divisions.map((d, i) => {
       const before = i === activePosition - 1
-      const active = i === activePosition
+      const current = i === activePosition
 
-      if (before) {
-        return {...d, size: d.size - this.percentChangeY}
-      } else if (active) {
+      if (current) {
         return {...d, size: d.size + this.percentChangeY}
+      } else if (before) {
+        let size = d.size - this.percentChangeY
+        const minSize = this.minPercentY(d.minPixels)
+
+        if (size < minSize) {
+          size = minSize
+        }
+
+        return {...d, size}
       }
 
-      return d
+      return {...d}
     })
 
     this.setState({divisions})
   }
 
   private down = activePosition => () => {
-    const divisions = this.state.divisions.map((d, i) => {
+    const divisions = this.state.divisions.map((d, i, divs) => {
       const before = i === activePosition - 1
-      const active = i === activePosition
+      const current = i === activePosition
+      const after = i > activePosition
 
       if (before) {
         return {...d, size: d.size + this.percentChangeY}
-      } else if (active) {
-        return {...d, size: d.size - this.percentChangeY}
+      } else if (current) {
+        let size = d.size - this.percentChangeY
+        const minSize = this.minPercentY(d.minPixels)
+
+        if (size < minSize) {
+          size = minSize
+        }
+
+        return {...d, size}
+      } else if (after) {
+        const previous = divs[i - 1]
+        const prevAtMinimum =
+          previous.size <= this.minPercentY(previous.minPixels)
+        const canBeShrunk = d.size > this.minPercentY(d.minPixels)
+
+        if (prevAtMinimum && canBeShrunk) {
+          const size = d.size - this.percentChangeY
+          return {...d, size}
+        }
       }
 
-      return d
+      return {...d}
     })
 
     this.setState({divisions})

ui/src/shared/components/ResizeDivision.tsx

@@ -15,6 +15,7 @@ const NOOP = () => {}
 interface Props {
   id: string
   name?: string
+  minPixels: number
   size: number
   activeHandleID: string
   draggable: boolean

ui/src/style/components/resizer.scss

@@ -20,17 +20,17 @@ $resizer-color-kapacitor: $c-rainforest;
 
 .resize--container {
   overflow: hidden !important;
-  display: flex;
-  align-items: stretch;
+  // display: flex;
+  // align-items: stretch;
 
   &.vertical {
     width: 100%;
-    flex-direction: row;
+    // flex-direction: row;
   }
 
   &.horizontal {
     height: 100%;
-    flex-direction: column;
+    // flex-direction: column;
   }
 
   &.resize--dragging * {
@@ -42,6 +42,7 @@ $resizer-color-kapacitor: $c-rainforest;
   z-index: $resizer-division-z;
   border: 1px solid #f00;
   position: relative;
+  float: left;
 
   &.resizer__horizontal {
     width: 100%;
@@ -50,6 +51,10 @@ $resizer-color-kapacitor: $c-rainforest;
   &.resizer__vertical {
     height: 100%;
   }
+
+  .resizer--division {
+    border-color: #0f0;
+  }
 }
 
 .resizer--full-size {