uiconfig-blueprint 0.1.0-dev.1 → 0.1.0-dev.12

package/src/bpComponents/BPTreeComponent.tsx

@@ -1,15 +1,17 @@
+import {Tree2} from "../components/Tree2";
 import {BPComponent, BPComponentProps, BPComponentState, UiConfigRendererContextType} from "./BPComponent";
-import {Tree, TreeNodeInfo} from "@blueprintjs/core";
+import {TreeNodeInfo} from "@blueprintjs/core";
+import React from "react";
 
 export type BPTreeComponentState<T = {}> = BPComponentState & {
     nodes: TreeNodeInfo<T>[]
 }
 
 // https://github.com/palantir/blueprint/blob/develop/packages/docs-app/src/examples/core-examples/treeExample.tsx
-type NodePath = number[];
+type NodePath = (string|number)[];
 
-export abstract class BPTreeComponent<T = {}, TConfigVal = void> extends BPComponent<TConfigVal, BPTreeComponentState<T>> {
-    constructor(props: BPComponentProps<TConfigVal>, context: UiConfigRendererContextType) {
+export abstract class BPTreeComponent<T = {}, TConfigVal extends any /*|PrimitiveVal|void*/ = void> extends BPComponent<TConfigVal, BPTreeComponentState<T>, BPComponentProps<TConfigVal> & {className: string}> {
+    constructor(props: BPComponentProps<TConfigVal> & {className: string}, context: UiConfigRendererContextType) {
         super(props, context, {nodes: []});
     }
 
@@ -32,10 +34,10 @@ export abstract class BPTreeComponent<T = {}, TConfigVal = void> extends BPCompo
 
     protected abstract _getRootNodes(): T[]
 
-    protected async _onNodeClick(_id: string | number, _path: number[]) {
+    protected async _onNodeClick(_id: string | number) {
     }
 
-    protected async _onNodeDoubleClick(_id: string | number, _path: number[]) {
+    protected async _onNodeDoubleClick(_id: string | number) {
     }
 
     protected _cloneNodes(callback?: (t:TreeNodeInfo<T>)=>void, state?: TreeNodeInfo<T>[]): TreeNodeInfo<T>[] {
@@ -50,30 +52,39 @@ export abstract class BPTreeComponent<T = {}, TConfigVal = void> extends BPCompo
         })
     }
 
-    protected _forEachNode<T>(nodes: TreeNodeInfo<T>[] | undefined, callback: (node: TreeNodeInfo<T>) => void) {
+    protected _getNodePath(id: string, nodes?: TreeNodeInfo<T>[]): NodePath {
+        let path1: NodePath|null = null
+        this._forEachNode(nodes ?? this.state.nodes, (node, path) => {
+            if (node.id === id) path1 = path
+        })
+        return path1 ?? []
+    }
+
+    protected _forEachNode<T>(nodes: TreeNodeInfo<T>[] | undefined, callback: (node: TreeNodeInfo<T>, path: NodePath) => void, path: NodePath = []) {
         if (nodes === undefined) {
             return nodes;
         }
         for (const node of nodes) {
-            callback(node);
-            this._forEachNode(node.childNodes, callback);
+            callback(node, path);
+            this._forEachNode(node.childNodes, callback, [...path, node.id]);
         }
         return nodes
     }
-    protected _forNodeAtPath<T>(nodes: TreeNodeInfo<T>[], path: NodePath, callback: (node: TreeNodeInfo<T>) => void) {
-        callback(Tree.nodeFromPath(path, nodes));
-    }
 
-    protected async _onNodeExpandCollapse(_id: string | number, _path: number[]) {
+    // protected _forNodeAtPath<T>(nodes: TreeNodeInfo<T>[], path: NodePath, callback: (node: TreeNodeInfo<T>) => void) {
+    //     callback(Tree.nodeFromPath(path, nodes));
+    // }
+
+    protected async _onNodeExpandCollapse(_id: string | number, expanded?: boolean) {
         const nodes = this._cloneNodes()
         const node = this._infoMap.get(_id)
         if (!node) return
-        node.isExpanded = !node.isExpanded
+        node.isExpanded = expanded ?? !node.isExpanded
         // forNodeAtPath(nodes, _path, node => (node.isExpanded = !node.isExpanded));
         await this.setStatePromise({...this.state, nodes})
     }
 
-    protected async _onNodeContextMenu(_id: string | number, _path: number[]) {
+    protected async _onNodeContextMenu(_id: string | number) {
     }
 
     protected buildData(data: TreeNodeInfo<T>[], obj: T, _?: any, _2?: any) {
@@ -103,8 +114,21 @@ export abstract class BPTreeComponent<T = {}, TConfigVal = void> extends BPCompo
         return this.setStatePromise({...this.state, nodes})
     }
 
-    async setSelected(id?: string) {
-        const nodes = this._cloneNodes(n => n.isSelected = n.id === id)
+    async setSelected(id?: string|string[], expand = false) {
+        const nodes =
+            Array.isArray(id) ?
+            this._cloneNodes(n => n.isSelected = id.includes(n.id as any)) :
+            this._cloneNodes(n => n.isSelected = n.id === id)
+        if(expand && id!==undefined){
+            const ids = Array.isArray(id) ? id : [id]
+            for (const id1 of ids) {
+                const parents = this._getNodePath(id1, nodes)
+                for (let i = 0; i < parents.length; i++) {
+                    const node = this._infoMap.get(parents[i])
+                    if(node) node.isExpanded = true
+                }
+            }
+        }
         return this.setStatePromise({...this.state, nodes})
     }
 
@@ -116,28 +140,104 @@ export abstract class BPTreeComponent<T = {}, TConfigVal = void> extends BPCompo
         super.componentWillUnmount();
     }
 
+    findSelectedNode(nodes?: TreeNodeInfo<T>[]): TreeNodeInfo<T> | undefined {
+        if (!nodes) nodes = this.state.nodes
+        for (const node of nodes) {
+            if (node.isSelected) return node
+            if (node.childNodes) {
+                const res = this.findSelectedNode(node.childNodes)
+                if (res) return res
+            }
+        }
+    }
+    getFlatNodes(onlyVisible = false, nodes?: TreeNodeInfo<T>[], res: TreeNodeInfo<T>[] = []): TreeNodeInfo<T>[] {
+        if (!nodes) nodes = this.state.nodes
+        for (const node of nodes) {
+            res.push(node)
+            if (node.childNodes && (!onlyVisible || node.isExpanded)) this.getFlatNodes(onlyVisible, node.childNodes, res)
+        }
+        return res
+    }
+
+    protected _handleKeyDown(e: React.KeyboardEvent) {
+        const nodes = this.getFlatNodes(true)
+        let current, next, previous;
+        for (let i = 0; i < nodes.length; i++) {
+            const node = nodes[i]
+            if (node.isSelected) {
+                current = node
+                next = i < nodes.length - 1 ? nodes[i + 1] : undefined
+                previous = i > 0 ? nodes[i - 1] : undefined
+                break
+            }
+        }
+        switch (e.key) {
+            case "ArrowUp":
+                if (previous) this._onNodeClick(previous.id)
+                break
+            case "ArrowDown":
+                if (next) this._onNodeClick(next.id)
+                break
+            case "ArrowRight":
+                if (current) this._onNodeExpandCollapse(current.id, true)
+                break
+            case "ArrowLeft":
+                if (current) this._onNodeExpandCollapse(current.id, false)
+                break
+            case "Escape":
+                if (current) this._onNodeClick(current.id)
+                break
+            case "Enter":
+                if (current) this._onNodeDoubleClick(current.id)
+                break
+            default:
+                return
+        }
+        e.preventDefault()
+        e.stopPropagation()
+    }
+
+    protected _canDropNode(_sourceNode: TreeNodeInfo<T>, _sourcePath: NodePath, _targetNode: TreeNodeInfo<T>, _targetPath: NodePath, _index?: number) {
+        return true
+    }
+    protected _onDropNode(_sourceNode: TreeNodeInfo<T>, _sourcePath: NodePath, _targetNode: TreeNodeInfo<T>, _targetPath: NodePath, _e?: React.DragEvent, _index?: number) {
+        return
+    }
+
     render() {
-        const TreeT = Tree.ofType<T>()
+        const TreeT = Tree2.ofType<T>()
         return !this.state.hidden ? (
+            <div
+                style={{width: "100%", height: "100%"}}
+                onKeyDown={e => this._handleKeyDown(e)}
+                tabIndex={0}
+            >
             <TreeT
                 contents={this.state.nodes}
-                className="folderContent"
+                className={"folderContent " + (this.props.className||'')}
+                canDropNode={(node, path, targetNode, targetPath, index) => {
+                    return this._canDropNode(node, path, targetNode, targetPath, index)
+                }}
+                onNodeDrop={(node, path, targetNode, targetPath, e, index) => {
+                    // console.log(node, path, targetNode, targetPath, e);
+                    this._onDropNode(node, path, targetNode, targetPath, e, index)
+                }}
                 onNodeExpand={(node, _path, _e) => {
-                    this._onNodeExpandCollapse(node.id, _path)
+                    this._onNodeExpandCollapse(node.id)
                 }}
                 onNodeCollapse={(node, _path, _e) => {
-                    this._onNodeExpandCollapse(node.id, _path)
+                    this._onNodeExpandCollapse(node.id)
                 }}
                 onNodeClick={(node, _path, _e) => {
-                    this._onNodeClick(node.id, _path)
+                    this._onNodeClick(node.id)
                 }}
                 onNodeDoubleClick={(node, _path, _e) => {
-                    this._onNodeDoubleClick(node.id, _path)
+                    this._onNodeDoubleClick(node.id)
                 }}
                 onNodeContextMenu={(node, _path, _e) => {
-                    this._onNodeContextMenu(node.id, _path)
+                    this._onNodeContextMenu(node.id)
                 }}
-            />
+            /></div>
         ) : null
     }
 }

package/src/bpComponents/BPTreeFolderComponent.tsx

@@ -1,13 +1,13 @@
-import {v4} from "uuid";
 import {TreeNodeInfo} from "@blueprintjs/core";
 import {BPTreeComponent} from "./BPTreeComponent";
 import {UiObjectConfig} from 'uiconfig.js'
-import {getOrCall} from 'ts-browser-helpers'
+import {getOrCall, uuidV4} from 'ts-browser-helpers'
 
 export class BPTreeFolderComponent extends BPTreeComponent<UiObjectConfig> {
 
     protected _getNodeId(obj: UiObjectConfig) {
-        return obj.uuid || v4();
+        if(!obj.uuid) obj.uuid = uuidV4();
+        return obj.uuid;
     }
 
     protected _updateNodeInfo(node: TreeNodeInfo<UiObjectConfig>, obj: UiObjectConfig) {

package/src/bpComponents/BPValueComponent.tsx

@@ -1,30 +1,52 @@
 import {BPComponentProps, UiConfigRendererContextType} from "./BPComponent";
 import {BPLabelledComponent, BPLabelledComponentState} from "./BPLabelledComponent";
+import {equalsPrimitive, PrimitiveVal} from "uiconfig.js";
 
 export type BPValueComponentState<TStateValue> = BPLabelledComponentState & {
     value: TStateValue
 }
 
-export abstract class BPValueComponent<TValue, TState extends BPValueComponentState<TStateValue>, TStateValue> extends BPLabelledComponent<TValue, TState> {
+export abstract class BPValueComponent<TValue extends PrimitiveVal, TState extends BPValueComponentState<TStateValue>, TStateValue> extends BPLabelledComponent<TValue, TState> {
 
     protected constructor(props: BPComponentProps<TValue>, context: UiConfigRendererContextType, state: TState) {
         super(props, context, state);
+        this.setValue = this.setValue.bind(this)
     }
 
     abstract convertValueToState(value: TValue, state: TState): TState;
 
     abstract convertStateToValue(state: TState): Promise<TValue>;
 
+    // this should be state.value ideally which is initialValue in parent component
+    // a separate variable is made here so that it can be undefined in the beginning.
+    private _lastValRef: TValue | undefined
+
     getUpdatedState(state: TState): TState {
-        const val = this.context.methods.getValue(this.props.config)
+        const val = this.context.methods.getValue<TValue>(this.props.config, this._lastValRef, false) // this has to be false otherwise the children component will rerender everytime. like sliders
+        if(this._lastValRef !== undefined && val !== undefined){
+            // changed from outside, so we need to update the children
+            this.keyVersion++
+        }
+        this._lastValRef = val
+        // console.log('getUpdatedState', val);
         state = super.getUpdatedState(state)
-        return val ? this.convertValueToState(val, state) : state
+        state = val !== undefined ? this.convertValueToState(val, state) : state
+        return state
     }
 
     protected _previousLast = false
 
+    // is this really required?
     doesNeedRefresh(state: TState, _last?: boolean): boolean {
-        return this._previousLast !== _last || this.state.value !== state.value
+        const needsRefresh = this._previousLast !== _last || !equals(this.state.value, state.value);
+        this._previousLast = _last ?? true;
+        // console.log('doesNeedRefresh', needsRefresh, this.state.value, state.value);
+        return needsRefresh;
+    }
+
+    setState(state: TState, callback?: () => void) {
+        // this.keyVersion++ // dont in getUpdatedState
+        super.setState(state, callback);
     }
 
     async setValue(value: TStateValue, last?: boolean) {
@@ -39,8 +61,13 @@ export abstract class BPValueComponent<TValue, TState extends BPValueComponentSt
             return
         }
         let val = await this.convertStateToValue(state)
+        this._lastValRef = val
         await this.context.methods.setValue(this.props.config, val, {last}, this.forceOnChange)
         await this.refreshConfigState(state)
     }
 
 }
+
+function equals(a: any, b: any){
+    return equalsPrimitive(a, b)
+}

package/src/bpComponents/BPVectorInputComponent.tsx

@@ -6,12 +6,14 @@ import type {Vector2, Vector3, Vector4} from "three";
 import {ExtendedNumericInput} from "../components/ExtendedNumericInput";
 import {wIcon3, xIcon3, yIcon3, zIcon3} from "../components/variableIcons";
 import {getOrCall} from 'ts-browser-helpers'
+import {getNumberTransformFunctions} from "./GetNumberTransformFunctions";
 
 export type BPVectorComponentState = BPValueComponentState<Vector2|Vector3|Vector4> & {
     min: number,
     max: number,
     step: number,
     components: 1|2|3|4,
+    unit?: string,
 }
 
 export class BPVectorInputComponent extends BPInputComponent<Vector2|Vector3|Vector4, BPVectorComponentState> {
@@ -73,21 +75,34 @@ export class BPVectorInputComponent extends BPInputComponent<Vector2|Vector3|Vec
         let ret = []
         if (!this.state.value) return <></>;
 
+        const unit = this.props.config.unit as string|undefined; // todo add to uiconfig, getOrCall
+        const unitType = this.props.config.unitType as string|undefined; // todo add to uiconfig, getOrCall
+        const targetUnit = this.state.unit || unit
+        const transformValue = getNumberTransformFunctions(unit, unitType, targetUnit);
+
+        const props = {
+            disabled: this.state.disabled,
+            readOnly: this.state.readOnly,
+            min: this.state.min,
+            max: this.state.max,
+            stepSize: this.state.step,
+            minorStepSize: this.state.step / 10,
+            majorStepSize: this.state.step * 10,
+            buttonPosition: "none",
+            ...transformValue,
+        } as const
+
         // console.warn(this.state.value)
         if (this.state.components > 0) {
             const x = (
                 <ExtendedNumericInput
                     style={{maxWidth: "8rem", minWidth: "2rem"}}
-                    disabled={this.state.disabled} readOnly={this.state.readOnly}
                     // defaultValue={state}
                     leftIcon={xIcon3}
                     value={this.state.value.x}
                     key={this.props.config.uuid + '_x'}
                     ref={this._inputs[0]}
-                    min={this.state.min} max={this.state.max} stepSize={this.state.step}
-                    minorStepSize={this.state.step / 10}
-                    majorStepSize={this.state.step * 10}
-                    buttonPosition="none"
+                    {...props}
                     onChange2={(v, last) => {
                         this.state.value.x = v
                         this.setValue(this.state.value, last) // todo: does need refresh?
@@ -100,15 +115,11 @@ export class BPVectorInputComponent extends BPInputComponent<Vector2|Vector3|Vec
                 <ExtendedNumericInput
                     style={{maxWidth: "8rem", minWidth: "2rem"}}
                     // defaultValue={state}
-                    disabled={this.state.disabled} readOnly={this.state.readOnly}
                     value={this.state.value.y}
                     leftIcon={yIcon3}
                     key={this.props.config.uuid + '_y'}
                     ref={this._inputs[1]}
-                    min={this.state.min} max={this.state.max} stepSize={this.state.step}
-                    minorStepSize={this.state.step / 10}
-                    majorStepSize={this.state.step * 10}
-                    buttonPosition="none"
+                    {...props}
                     onChange2={(v, last) => {
                         this.state.value.y = v
                         this.setValue(this.state.value, last) // todo: does need refresh?
@@ -121,15 +132,11 @@ export class BPVectorInputComponent extends BPInputComponent<Vector2|Vector3|Vec
                 <ExtendedNumericInput
                     style={{maxWidth: "8rem", minWidth: "2rem"}}
                     // defaultValue={state}
-                    disabled={this.state.disabled} readOnly={this.state.readOnly}
                     value={(this.state.value as Vector3|Vector4).z}
                     key={this.props.config.uuid + '_z'}
                     leftIcon={zIcon3}
-                    min={this.state.min} max={this.state.max} stepSize={this.state.step}
                     ref={this._inputs[2]}
-                    minorStepSize={this.state.step / 10}
-                    majorStepSize={this.state.step * 10}
-                    buttonPosition="none"
+                    {...props}
                     onChange2={(v, last) => {
                         (this.state.value as Vector3 | Vector4).z = v
                         this.setValue(this.state.value, last) // todo: does need refresh?
@@ -142,15 +149,11 @@ export class BPVectorInputComponent extends BPInputComponent<Vector2|Vector3|Vec
                 <ExtendedNumericInput
                     style={{maxWidth: "8rem", minWidth: "2rem"}}
                     // defaultValue={state}
-                    disabled={this.state.disabled} readOnly={this.state.readOnly}
                     value={(this.state.value as Vector4).w}
                     key={this.props.config.uuid + '_w'}
                     leftIcon={wIcon3}
                     ref={this._inputs[3]}
-                    min={this.state.min} max={this.state.max} stepSize={this.state.step}
-                    minorStepSize={this.state.step / 10}
-                    majorStepSize={this.state.step * 10}
-                    buttonPosition="none"
+                    {...props}
                     onChange2={(v, last) => {
                         (this.state.value as Vector4).w = v
                         this.setValue(this.state.value, last) // todo: does need refresh?

package/src/bpComponents/GetNumberTransformFunctions.tsx

@@ -0,0 +1,14 @@
+import {NumberUnits} from "./NumberUnits";
+
+export function getNumberTransformFunctions(unit: string | undefined, unitType1: string | undefined, targetUnit: string | undefined) {
+    const unitType = unit ? Object.entries(NumberUnits).find(([k, v]) => !!v[unit] && (!unitType1 || k === unitType1)) : undefined
+    const target = targetUnit !== unit && unitType && targetUnit ? unitType[1][targetUnit] : undefined
+    const source = targetUnit !== unit && unitType && unit ? unitType[1][unit] : undefined
+    const transformValue = target && source ?
+        (v: number) => target.from(source.to(v)) :
+        undefined;
+    const invTransformValue = target && source ?
+        (v: number) => source.from(target.to(v)) :
+        undefined;
+    return {transformValue, invTransformValue};
+}

package/src/bpComponents/NumberUnits.tsx

@@ -0,0 +1,123 @@
+export interface NumberUnit{
+    name: string;
+    symbol: string;
+    from: (value: number) => number;
+    to: (value: number) => number;
+}
+export const NumberUnits: Record<string, Record<string, NumberUnit>> = {
+    'distance': {
+        'm': {
+            'name': 'Meters',
+            'symbol': 'm',
+            from: (v: number) => v,
+            to: (v: number) => v,
+        },
+        'cm': {
+            'name': 'Centimeters',
+            'symbol': 'cm',
+            from: (v: number) => v / 100,
+            to: (v: number) => v * 100,
+        },
+        'mm': {
+            'name': 'Millimeters',
+            'symbol': 'mm',
+            from: (v: number) => v / 1000,
+            to: (v: number) => v * 1000,
+        },
+        'in': {
+            'name': 'Inches',
+            'symbol': 'in',
+            from: (v: number) => v * 0.0254,
+            to: (v: number) => v / 0.0254,
+        },
+        'ft': {
+            'name': 'Feet',
+            'symbol': 'ft',
+            from: (v: number) => v * 0.3048,
+            to: (v: number) => v / 0.3048,
+        },
+        'km': {
+            'name': 'Kilometers',
+            'symbol': 'km',
+            from: (v: number) => v * 1000,
+            to: (v: number) => v / 1000,
+        },
+        'mi': {
+            'name': 'Miles',
+            'symbol': 'mi',
+            from: (v: number) => v * 1609.34,
+            to: (v: number) => v / 1609.34,
+        },
+    },
+    'angle': {
+        'rad': {
+            'name': 'Radians',
+            'symbol': 'rad',
+            from: (v: number) => v,
+            to: (v: number) => v,
+        },
+        'deg': {
+            'name': 'Degrees',
+            'symbol': 'deg',
+            from: (v: number) => v * Math.PI / 180,
+            to: (v: number) => v * 180 / Math.PI,
+        },
+        'grad': {
+            'name': 'Gradians',
+            'symbol': 'grad',
+            from: (v: number) => v * Math.PI / 200,
+            to: (v: number) => v * 200 / Math.PI,
+        },
+    },
+    'temperature': {
+        'celsius': {
+            'name': 'Celsius',
+            'symbol': '°C',
+            from: (v: number) => v,
+            to: (v: number) => v,
+        },
+        'fahrenheit': {
+            'name': 'Fahrenheit',
+            'symbol': '°F',
+            from: (v: number) => (v - 32) * 5 / 9,
+            to: (v: number) => v * 9 / 5 + 32,
+        },
+        'kelvin': {
+            'name': 'Kelvin',
+            'symbol': 'K',
+            from: (v: number) => v - 273.15,
+            to: (v: number) => v + 273.15,
+        },
+    },
+    'pixel': {
+        'px': {
+            'name': 'Pixels',
+            'symbol': 'px',
+            from: (v: number) => v,
+            to: (v: number) => v,
+        },
+        'dp': {
+            'name': 'Density-independent Pixels',
+            'symbol': 'dp',
+            from: (v: number) => v * window.devicePixelRatio,
+            to: (v: number) => v / window.devicePixelRatio,
+        },
+        // todo
+        // 'sp': {
+        //     'name': 'Scale-independent Pixels',
+        //     'symbol': 'sp',
+        //     from: (v: number) => {
+        //         const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) / 16;
+        //         return v * fontSize * window.devicePixelRatio;
+        //     }
+        // },
+        // 'rem': {
+        //     'name': 'Root em',
+        //     'symbol': 'rem',
+        //     from: (v: number) => {
+        //         const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) / 16;
+        //         return v * fontSize * window.devicePixelRatio;
+        //     }
+        // }
+    }
+}

package/src/components/AppToaster.tsx

@@ -8,6 +8,26 @@ import {OverlayToaster, Toaster} from "@blueprintjs/core";
 
 // hack for blueprint 5, remove in blueprint 6
 export const AppToasterRef = {ref: null as Toaster | null}
+
+/**
+ * Usage
+ * ```
+ * AppToaster().show({
+ *    message: 'Message',
+ *    intent: 'primary',
+ *    icon: "tick",
+ *    isCloseButtonShown: false,
+ *    // action: {
+ *    //     onClick: () => {},
+ *    //     text: "Cancel",
+ *    // },
+ *    timeout: 5000,
+ * }, 'toast-id')
+ *
+ * AppToaster().dismiss('toast-id')
+ * ```
+ *
+ */
 export const AppToaster = ()=>AppToasterRef.ref ?? {show: ()=>{}, dismiss: ()=>{}} as any as Toaster
 
 /**

package/src/components/ConfigurationPanelComponent.tsx

@@ -31,6 +31,7 @@ export function ConfigurationPanelComponent({config}: { config: UiObjectConfig<a
         } as Panel<{ config: UiObjectConfig }>
     }, [config])
     const [currentPanelStack, setCurrentPanelStack] = React.useState<Array<Panel<{ config: UiObjectConfig }>>>([stackItem()]);
+    const [isMinimized, setIsMinimized] = React.useState(false);
 
     React.useEffect(() => {
         setCurrentPanelStack([stackItem()])
@@ -40,7 +41,7 @@ export function ConfigurationPanelComponent({config}: { config: UiObjectConfig<a
 
     return (
         <VisualStyleContext.Provider value={{...defaultVisualStyle, ...style}}>
-        <Card id="bpInspectorCard" className={style.darkMode?Classes.DARK:""} style={{height: "100%", flexGrow: "1", position: "relative"}}>
+        <Card className={`bpInspectorCard ${style.darkMode?Classes.DARK:""}`} style={{display: isMinimized ? 'none' : 'block'}}>
             <PanelStack2 className="inspectorPanelStack"
                          showPanelHeader={true}
                          renderActivePanelOnly={true}
@@ -48,16 +49,26 @@ export function ConfigurationPanelComponent({config}: { config: UiObjectConfig<a
                          onClose={() => setCurrentPanelStack(currentPanelStack.slice(0, -1))}
                          stack={currentPanelStack}/>
             <div className={"bpPanelStackHeaderOverlay " + Classes.PANEL_STACK2_HEADER}>
-                <Popover targetProps={{style: {position: "absolute", right: "5px"}}}
+                <Popover targetProps={{style: {position: "absolute", right: "30px"}}}
                          minimal={true}
                          targetTagName={"div"}
                     content={
                     <ThemeSettingsMenuComponent/>
                 } placement="bottom">
-                    <Button icon="cog" small minimal text="" />
+                    <Button icon="more" small minimal text="" />
                 </Popover>
+                <Button icon="minus" small minimal text="" style={{position: "absolute", right: "5px"}}
+                        onClick={() => {
+                            setIsMinimized(!isMinimized);
+                        }}
+                />
             </div>
         </Card>
+        {isMinimized && <Button icon="cog" small text="Configuration" style={{position: "absolute", right: "5px"}}
+                onClick={() => {
+                    setIsMinimized(!isMinimized);
+                }}
+        />}
         </VisualStyleContext.Provider>
     )
 }