uiconfig-blueprint 0.0.3 → 0.1.0-dev.11

package/src/components/ConfigurationPanelComponent.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import {Button, Card, Panel, PanelStack2, Popover} from "@blueprintjs/core";
+import {ConfigObject, ConfigProps} from "../ConfigObject";
+import {UiObjectConfig} from 'uiconfig.js'
+import {UiConfigRendererContext} from '../bpComponents/BPComponent'
+import {Classes} from '@blueprintjs/core/src/common'
+import {
+    defaultVisualStyle,
+    setupVisualStyle,
+    ThemeSettingsMenuComponent,
+    VisualStyleContext
+} from './VisualStyleContext'
+
+// import {ViewerAppContext} from "./ViewerAppComponent";
+
+export function ConfigurationPanelComponent({config}: { config: UiObjectConfig<any, 'panel'> }) {
+    const renderer = React.useContext(UiConfigRendererContext)
+    const stackItem = React.useCallback(() => {
+        return {
+            props: {config: config},
+            renderPanel(props: ConfigProps) {
+                // console.log(props.config === config)
+                return (
+                    <ul style={{listStyleType: "none", paddingLeft: "0", margin: "0"}}>
+                        {/*{v && (<ConfigObject {...props}/>)}*/}
+                        {config && (<ConfigObject {...props} isPanel={true}/>)}
+                    </ul>
+                )
+            },
+            title: renderer.methods.getLabel(config)
+        } 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()])
+    }, [stackItem, setCurrentPanelStack])
+
+    const style = setupVisualStyle()
+
+    return (
+        <VisualStyleContext.Provider value={{...defaultVisualStyle, ...style}}>
+        <Card className={`bpInspectorCard ${style.darkMode?Classes.DARK:""}`} style={{display: isMinimized ? 'none' : 'block'}}>
+            <PanelStack2 className="inspectorPanelStack"
+                         showPanelHeader={true}
+                         renderActivePanelOnly={true}
+                         onOpen={(p) => setCurrentPanelStack([...currentPanelStack, p] as any)}
+                         onClose={() => setCurrentPanelStack(currentPanelStack.slice(0, -1))}
+                         stack={currentPanelStack}/>
+            <div className={"bpPanelStackHeaderOverlay " + Classes.PANEL_STACK2_HEADER}>
+                <Popover targetProps={{style: {position: "absolute", right: "30px"}}}
+                         minimal={true}
+                         targetTagName={"div"}
+                    content={
+                    <ThemeSettingsMenuComponent/>
+                } placement="bottom">
+                    <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>
+    )
+}

package/src/components/DialogContext.tsx

@@ -0,0 +1,210 @@
+import {createContext, Dispatch, ReactNode, SetStateAction, useCallback, useContext, useState} from 'react'
+import {Button, Dialog, DialogBody, DialogFooter, FormGroup, InputGroup} from '@blueprintjs/core'
+import {useLoadingState} from './loadingState'
+import {Intent} from '@blueprintjs/core/src/common/intent'
+
+export type DialogStateType = {
+    isOpen: boolean,
+    title: string,
+    content: ReactNode,
+    actions: ReactNode,
+    state: any,
+    canClose: boolean // if true, dialog can be closed by clicking outside of it
+}
+export const defaultDialogContext = {
+    isOpen: false, title: '',
+    content: null as ReactNode,
+    actions: null as ReactNode,
+    state: {} as any, canClose: true,
+}
+export function setupDialog(){
+    const [dialog, setDialog] = useState<DialogStateType>(defaultDialogContext)
+    const open = useCallback((d: Partial<DialogStateType>)=>{
+        setDialog({...dialog, isOpen: true, ...d})
+    }, [dialog, setDialog])
+    const close = useCallback(()=>setDialog({...dialog, isOpen: false}), [dialog, setDialog])
+    const setDialogState = useCallback((state: any)=>{
+        setDialog({...dialog, state})
+    }, [dialog, setDialog])
+    return {dialog, open, close, setDialog, state: dialog.state, setState: setDialogState}
+}
+export const DialogContext = createContext<{
+    dialog: DialogStateType,
+    open: (d: Partial<DialogStateType>)=>void,
+    close: ()=>void,
+    setDialog: Dispatch<SetStateAction<DialogStateType>>,
+    setState: Dispatch<SetStateAction<any>>,
+    state: any
+}>(
+    {dialog: defaultDialogContext, open: ()=>{}, close: ()=>{}, setDialog: ()=>{}, setState: ()=>{}, state: {}}
+)
+export const useDialog = () => useContext(DialogContext)
+
+export function DialogProvider({children}: {children: ReactNode}){
+    const dialog = setupDialog()
+    return <DialogContext.Provider value={{...dialog}}>
+        {children}
+    </DialogContext.Provider>
+}
+
+export function DialogComponent(){
+    const {dialog, close} = useDialog()
+    return (
+        <Dialog title={dialog.title} isOpen={dialog.isOpen} isCloseButtonShown={dialog.canClose} onClose={() => {dialog.canClose && close()}}>
+        <DialogBody>
+            {dialog.content}
+        </DialogBody>
+        <DialogFooter actions={dialog.actions}/>
+    </Dialog>)
+}
+
+interface DialogPromptState {
+    value: string,
+    intent: Intent,
+    helperText: string,
+}
+interface DialogPromptProps extends Partial<DialogStateType>{
+    closeButtonText?: string,
+    submitButtonText?: string,
+    message?: string,
+    placeholder?: string,
+    value?: string,
+    showInput?: boolean,
+    onClose?: (value: string)=>boolean|undefined|Promise<boolean|undefined>, // does not close if false
+    onSubmit?: (value: string)=>boolean|undefined|any|Promise<boolean|undefined|any>, // does not close if false
+}
+/**
+ * Usage:
+ * ```tsx
+ * const {prompt, close} = useDialogPrompt()
+ * const text = await prompt({
+ *    title: 'Enter some text',
+ *    message: 'Enter some text: ',
+ *    placeholder: 'Enter some text',
+ *    value: 'Default Value',
+ *    onClose: ()=>{console.log('close'); return true},
+ *    onSubmit: ()=>{console.log('submit'); return true},
+ *    closeButtonText: 'Close',
+ *    submitButtonText: 'Okay',
+ * })
+ * ```
+ */
+export function useDialogPrompt(){
+    const {open, close} = useDialog()
+    const prompt = useCallback(({
+        closeButtonText = 'Close',
+        submitButtonText = 'Okay',
+        message = 'Enter some text: ',
+        placeholder = '',
+        value = '',
+        showInput = true,
+        onClose, onSubmit,
+        ...props}: DialogPromptProps) => {
+        return new Promise<string|null>((resolve)=>{
+            open({
+                canClose: false,
+                ...props,
+                state: {
+                    value,
+                    intent: Intent.NONE,
+                    helperText: '',
+                } as DialogPromptState,
+                content: (
+                    <DialogPromptContent message={message} showInput={showInput} placeholder={placeholder}/>
+                ),
+                actions: (
+                    <DialogPromptButtons closeButtonText={closeButtonText} submitButtonText={submitButtonText} onClose={onClose} onSubmit={onSubmit} resolve={resolve}/>
+                ),
+            })
+        })
+    }, [open, close])
+    return {prompt, close}
+}
+
+function DialogPromptButtons({
+    closeButtonText = 'Close',
+    submitButtonText = 'Okay',
+    onClose, onSubmit, resolve
+ }:{
+    closeButtonText?: string,
+    submitButtonText?: string,
+    onClose?: (value: string)=>boolean|undefined|Promise<boolean|undefined>, // does not close if false
+    onSubmit?: (value: string)=>boolean|undefined|{error: string}|Promise<boolean|undefined|{error: string}>, // does not close if false
+    resolve: (value: string|null)=>void,
+}){
+    const {loadingState, updateLoading} = useLoadingState()
+    const {state, setState, close} = useDialog() as {state: DialogPromptState, setState: Dispatch<SetStateAction<DialogPromptState>>, close: ()=>void}
+    const doClose = async()=> {
+        if (onClose && (await onClose(state.value)) !== true) return
+        close()
+        resolve(null)
+    }
+    const doSubmit = async()=> {
+        if (onSubmit) {
+            const res = await onSubmit(state.value)
+            if(res && (res as any).error){
+                setState({...state, intent: Intent.DANGER, helperText: (res as any).error})
+            }
+            if(res !== true) return
+        }
+        close()
+        resolve(state.value)
+    }
+    return <>
+        <Button text={closeButtonText}
+                loading={loadingState['popup-close']}
+                onClick={() => updateLoading('popup-close', doClose())}/>
+        <Button text={submitButtonText}
+                intent="primary"
+                data-dialog-submit="true"
+                loading={loadingState['popup-submit']}
+                onClick={() => updateLoading('popup-submit', doSubmit())}/>
+    </>
+
+}
+
+function DialogPromptContent({
+    message = 'Enter some text: ',
+    placeholder = '',
+    showInput = true,
+}: {
+    message?: string,
+    placeholder?: string,
+    showInput?: boolean,
+}){
+    const {state, setState} = useDialog() as {state: DialogPromptState, setState: Dispatch<SetStateAction<DialogPromptState>>}
+    const {loadingState} = useLoadingState()
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter') {
+            // Get the submit button using the data attribute and simulate a click
+            const submitButton = document.querySelector('[data-dialog-submit="true"]') as HTMLButtonElement;
+            if (submitButton && !loadingState['popup-submit']) {
+                submitButton.click();
+            }
+        }
+    }
+
+    return <FormGroup
+        helperText={state.helperText||undefined}
+        intent={state.intent}
+        label={message}
+        labelFor="dialog-prompt-text-input"
+    >
+        <InputGroup
+            intent={state.intent}
+            id="dialog-prompt-text-input"
+            placeholder={placeholder}
+            defaultValue={state.value}
+            style={{display: showInput ? 'block' : 'none'}}
+            autoFocus={true}
+            onChange={(e: any) => {
+                state.value = e.target.value
+                state.helperText = ''
+                state.intent = Intent.NONE
+                setState({...state})
+            }}
+            onKeyDown={handleKeyDown}
+        />
+    </FormGroup>
+}

package/src/components/DraggableIcon.tsx

@@ -1,13 +1,14 @@
 import * as React from "react";
 import {Icon, IconName, MaybeElement} from "@blueprintjs/core";
 
-export class DraggableIcon extends React.Component<{ icon: IconName | MaybeElement, size?: number, value: number, stepSize?: number, small?: boolean, onChange: (v: number, last?: boolean) => void }> {
+// todo: bounds and stepsize
+export class DraggableIcon extends React.Component<{ icon: IconName | MaybeElement, size?: number, value: number, stepSize?: number, small?: boolean, disabled?: boolean, onChange: (v: number, last?: boolean) => void }> {
     private cursor = 'auto'
     private dragStartOffset = -Infinity
     private dragStartValue = -Infinity
     private lastValue = -Infinity
     private removeEvents = () => {
-        if (isFinite(this.lastValue)) this.props.onChange(this.lastValue)
+        if (isFinite(this.lastValue) && !this.props.disabled) this.props.onChange(this.lastValue)
         this.lastValue = -Infinity
         this.dragStartOffset = -Infinity
         this.dragStartValue = -Infinity
@@ -41,7 +42,7 @@ export class DraggableIcon extends React.Component<{ icon: IconName | MaybeEleme
                 let val = this.dragStartValue - off;
                 // val = Math.min(props.max, Math.max(props.min, val)); // todo
                 val = Number(val.toFixed(Math.max(1, -Math.log10(stepSize / 10)))); // clip decimal places depending on step size
-                this.props.onChange(val, false)
+                if(!this.props.disabled) this.props.onChange(val, false)
                 this.lastValue = val;
             }
         } else {
@@ -54,9 +55,10 @@ export class DraggableIcon extends React.Component<{ icon: IconName | MaybeEleme
         // const [dragging, setDragging] = React.useState(false)
 
         return (
-            <div style={{cursor: 'ew-resize', marginLeft: "6px", marginRight: "6px", marginTop: this.props.small ? "3px" : "6px", marginBottom: this.props.small ? "3px" : "6px"}}
+            <div style={{cursor: !this.props.disabled ? 'ew-resize': 'auto', marginLeft: "6px", marginRight: "6px", marginTop: this.props.small ? "3px" : "6px", marginBottom: this.props.small ? "3px" : "6px"}}
                  onMouseDown={(ev) => {
                      // if(dragging) return
+                     if(this.props.disabled) return
                      this.dragStartOffset = ev.clientX
                      this.dragStartValue = this.props.value
                      ev.stopPropagation()
@@ -68,7 +70,7 @@ export class DraggableIcon extends React.Component<{ icon: IconName | MaybeEleme
                      // setDragging(true)
                  }}
             >
-                <Icon icon={this.props.icon} size={this.props.size}/>
+                <Icon icon={this.props.icon} size={this.props.size} aria-disabled={this.props.disabled} />
             </div>
         )
     }

package/src/components/ExtendedNumericInput.tsx

@@ -20,7 +20,7 @@
 import React from "react";
 
 import type {HTMLInputProps, NumericInputProps} from "@blueprintjs/core";
-import {NumericInput} from "@blueprintjs/core";
+import {NumericInput} from "./NumericInput";
 import {DraggableIcon} from "./DraggableIcon";
 
 export interface IExtendedNumericInputState {
@@ -35,39 +35,87 @@ const NumberAbbreviation = {
 
 const NUMBER_ABBREVIATION_REGEX = /((\.\d+)|(\d+(\.\d+)?))(k|m|b)\b/gi;
 const SCIENTIFIC_NOTATION_REGEX = /((\.\d+)|(\d+(\.\d+)?))(e\d+)\b/gi;
+type Props = HTMLInputProps & NumericInputProps & {
+    onChange2?: (v: number, last?: boolean) => void,
+    transformValue?: (v: number) => number,
+    invTransformValue?: (v: number) => number,
+    draggableIcon?: boolean
+    value?: number | undefined
+    defaultValue?: number | undefined
+}
+// todo: bounds and stepsize
+export class ExtendedNumericInput extends React.PureComponent<Props, IExtendedNumericInputState> {
+    invTransformValue = (v: number|undefined) => {
+        v = v || 0
+        const v1 = this.props.invTransformValue ? this.props.invTransformValue(v) : v;
+        return v1
+    }
+    transformValue = (v: number|undefined) => {
+        v = v || 0
+        const v1 = this.props.transformValue ? this.props.transformValue(v) : v;
+        return v1
+    }
 
-export class ExtendedNumericInput extends React.PureComponent<HTMLInputProps & NumericInputProps & { onChange2: (v: number, last?: boolean) => void }, IExtendedNumericInputState> {
     public state: IExtendedNumericInputState = {
-        value: (this.props.value ?? this.props.defaultValue ?? '').toString(),
+        value: this.invTransformValue(this.props.value ?? this.props.defaultValue).toString(),
     };
 
     async setValue(val?: number) {
         return new Promise<void>((resolve) => {
-            this.setState({value: (val ?? this.props.value ?? this.props.defaultValue ?? '').toString()}, resolve)
+            this.setState({value: this.invTransformValue(val ?? this.props.value ?? this.props.defaultValue).toString()}, resolve)
         })
     }
 
+    componentDidUpdate(prevProps: Props) {
+        if (prevProps.value !== this.props.value && this.props.value !== undefined) {
+            this.setState({ value: this.invTransformValue(this.props.value).toString() });
+        }
+    }
     public render() {
         const {value} = this.state;
-        const props2: HTMLInputProps & NumericInputProps & { onChange2?: (v: number, last?: boolean) => void } = {...this.props}
-        if (props2.onChange2) delete props2.onChange2
+       const {
+            invTransformValue,
+            transformValue,
+            draggableIcon,
+            onChange2,
+            value: _value,
+            leftIcon,
+            defaultValue,
+            ...props2
+        } = this.props;
+
+        if(transformValue && !invTransformValue ||
+              !transformValue && invTransformValue) {
+            console.error('ExtendedNumericInput: Both transformValue and invTransformValue must be provided or neither. This is to ensure that the value can be transformed back and forth correctly.');
+        }
+
+        if(transformValue){
+            if(props2.min !== undefined) props2.min = this.invTransformValue(props2.min);
+            if(props2.max !== undefined) props2.max = this.invTransformValue(props2.max);
+            if(props2.stepSize !== undefined) props2.stepSize = this.invTransformValue(props2.stepSize);
+            if(props2.minorStepSize /*!== undefined*/) props2.minorStepSize = this.invTransformValue(props2.minorStepSize);
+            if(props2.majorStepSize /*!== undefined*/) props2.majorStepSize = this.invTransformValue(props2.majorStepSize);
+        }
 
         return (
             <NumericInput
                 {...props2}
-                leftElement={(
-                    <DraggableIcon icon={this.props.leftIcon ?? "variable"}
+                leftElement={(  // props2.leftElement could be null
+                    props2.leftElement !== undefined ? props2.leftElement :
+                        draggableIcon !== false ? <DraggableIcon icon={leftIcon ?? "variable"}
                                    size={16}
-                                   small={this.props.small}
+                                   disabled={props2.readOnly}
+                                   small={props2.small}
                                    value={parseFloat(value ?? '0')}
-                                   stepSize={this.props.stepSize}
+                                   stepSize={props2.stepSize}
                                    onChange={(v, last) => {
                                        this.handleValueChange(v, v.toString(), null, last, true)
-                                   }}/>
+                                   }}/> : undefined
                 )}
                 // leftIcon={"variable"}
-                buttonPosition={this.props.buttonPosition ?? (this.props.disabled ? "none" : "right")}
+                buttonPosition={props2.buttonPosition ?? (props2.disabled ? "none" : "right")}
                 allowNumericCharactersOnly={false}
+                clampValueOnBlur={true}
                 onBlur={this.handleBlur}
                 onKeyDown={this.handleKeyDown}
                 onButtonClick={this.handleButtonClick}
@@ -107,9 +155,11 @@ export class ExtendedNumericInput extends React.PureComponent<HTMLInputProps & N
     private handleValueChange = (_valueAsNumber: number, valueAsString: string, inputElement: HTMLInputElement | null, last?: boolean, dispatchOnChange2 = false) => {
         this._lastChangedValue = [_valueAsNumber, valueAsString]
         this.setState({value: valueAsString}, () => {
-            this.props.onValueChange?.(_valueAsNumber, valueAsString, inputElement)
-            if(dispatchOnChange2)
-                this.props.onChange2?.(_valueAsNumber, last)
+            const transformed = this.transformValue(_valueAsNumber)
+            this.props.onValueChange?.(transformed, valueAsString, inputElement)
+            if(dispatchOnChange2) {
+                this.props.onChange2?.(transformed, last)
+            }
         });
     };
 
@@ -124,8 +174,10 @@ export class ExtendedNumericInput extends React.PureComponent<HTMLInputProps & N
         result = this.evaluateSimpleMathExpression(result);
         result = this.nanStringToEmptyString(result);
         this.setState({value: result}, () => {
-            this.props.onValueChange?.(parseFloat(result) || 0, result, null)
-            this.props.onChange2?.(parseFloat(result) || 0)
+            const _valueAsNumber = parseFloat(result) || 0;
+            const transformed = this.transformValue(_valueAsNumber)
+            this.props.onValueChange?.(transformed, result, null)
+            this.props.onChange2?.(transformed, true)
         });
 
         // the user could have typed a different expression that evaluates to
@@ -151,7 +203,7 @@ export class ExtendedNumericInput extends React.PureComponent<HTMLInputProps & N
     };
 
     // Adapted from http://stackoverflow.com/questions/2276021/evaluating-a-string-as-a-mathematical-expression-in-javascript
-    // maybe try a better solution from above, right now it only works left to right
+    // todo - use a proper parser and evaluator, right now it only works left to right
     private evaluateSimpleMathExpression = (value: string) => {
         // leave empty strings empty
         if (!value) {

package/src/components/FileComponent.tsx

@@ -1,12 +1,15 @@
 import React, {useEffect, useRef} from "react";
 import {Button, ControlGroup, FileInput, HTMLSelect, InputGroup} from "@blueprintjs/core";
 import {BPFileComponentState} from "../bpComponents/BPFileComponent";
+import {useLoadingStateKey} from './loadingState'
 
 export interface FileComponentProps {
     state: BPFileComponentState
-    onChange: (state: Partial<BPFileComponentState>)=>void
+    onChange: (state: Partial<BPFileComponentState>)=>Promise<void>
+    previewSlot?: React.ReactNode,
+    uuid?: string
 }
-export const FileComponent: React.FC<FileComponentProps> = ({state, onChange})=>{
+export const FileComponent: React.FC<FileComponentProps> = ({state, onChange, previewSlot})=>{
     const fileInputRef = useRef<HTMLInputElement>()
     const textInputRef = useRef<HTMLInputElement>()
     // console.log('render file component', state)
@@ -33,47 +36,67 @@ export const FileComponent: React.FC<FileComponentProps> = ({state, onChange})=>
     //     fileInputRef.current && (fileInputRef.current.placeholder = 'https://example.com/file.png')
     // }, []);
 
+    // const hasValue = !!state.value || !!state.preview
+
+    const {loadingState, updateLoading} = useLoadingStateKey()
+
     return (
-        <div style={{flexGrow: "1", display: "flex", height: "100%"}}>
-            <ControlGroup fill={false} vertical={false} style={{width: "100%"}}>
-                {!state.readOnly ? (<HTMLSelect options={['url', 'file']} minimal={true} fill={false}
+        <div style={{position: "relative", flexGrow: "1", display: "flex", height: "100%", flexDirection: "column"}}>
+            {!!state.preview && (
+                <>
+                    {previewSlot}
+                    <Button icon="small-cross"
+                            minimal={false}
+                            small={true}
                             disabled={state.disabled}
-                            value={state.mode} onChange={(e)=>{
-                    onChange({mode: e.target.value as 'url'|'file'})
-                }} /> ) : null}
+                            intent={"danger"}
+                            style={{position: "absolute", top: 0, right: 0, opacity: 0.7}}
+                            loading={loadingState}
+                            onClick={() => updateLoading(onChange({value: null}))}></Button>
+                </>
+            )}
+            {(!state.preview || !previewSlot) && <ControlGroup fill={false} vertical={false} style={{width: "100%"}}>
+                {!state.readOnly && !state.value ? (<HTMLSelect options={['url', 'file']} minimal={true} fill={false}
+                                                                disabled={state.disabled}
+                                                                className={"file-component-select"}
+                                                                value={state.mode} onChange={(e) => {
+                    onChange({mode: e.target.value as 'url' | 'file'})
+                }}/>) : null}
                 {state.mode === 'url' ? (
-                    <InputGroup style={{flexGrow: "1", flexShrink: "1"}} inputRef={textInputRef as any} type="url" defaultValue={typeof state.value === 'string' ? state.value : ''}
+                    <InputGroup style={{flexGrow: "1", flexShrink: "1"}} inputRef={textInputRef as any} type="url"
+                                defaultValue={typeof state.value === 'string' ? state.value : ''}
                                 rightElement={(
-                                    <Button disabled={state.readOnly} minimal={true} icon="arrow-right" onClick={()=>{
-                                        onChange({mode:'url', value: textInputRef.current?.value??''})
-                                    }} ></Button>
+                                    <Button disabled={state.readOnly} minimal={true} icon="arrow-right" onClick={() => {
+                                        onChange({mode: 'url', value: textInputRef.current?.value ?? ''})
+                                    }}></Button>
                                 )}
                                 disabled={state.disabled} readOnly={state.readOnly}
-                                onChange={(_)=>{
+                                onChange={(_) => {
                                 }} placeholder="https://example.com/file.png"/>
                 ) : (
-                    <FileInput inputProps={{ref: fileInputRef as any}} style={{flexGrow: "1", flexShrink: "1", minWidth: "50px"}}
+                    <FileInput inputProps={{ref: fileInputRef as any}}
+                               style={{flexGrow: "1", flexShrink: "1", minWidth: "50px"}}
                                text={(state.value as File)?.name || 'No file'}
                                disabled={state.disabled}
-                               onClick={(e)=>{
-                                   if(state.readOnly) {
+                               onClick={(e) => {
+                                   if (state.readOnly) {
                                        e.preventDefault()
                                        e.stopPropagation()
                                    }
                                }}
                                buttonText={state.readOnly ? '-' : state.value ? 'Change' : 'Choose'}
-                               onChange={()=>{
-                                   onChange({mode: 'file', value: fileInputRef.current?.files?.[0]??null})
-                               }} className="inputGroupFile" />
+                               onChange={() => {
+                                   onChange({mode: 'file', value: fileInputRef.current?.files?.[0] ?? null})
+                               }} className="inputGroupFile"/>
                 )}
                 {!state.readOnly && state.value && (
-                <Button minimal={true} icon="small-cross"
-                        disabled={state.disabled}
-                        onClick={()=>{
-                    onChange({value: null})
-                }}></Button>
+                    <Button minimal={true} icon="small-cross"
+                            disabled={state.disabled}
+                            loading={loadingState}
+                            onClick={() => updateLoading(onChange({value: null}))
+                            }></Button>
                 )}
-            </ControlGroup>
+            </ControlGroup>}
         </div>
     )
 }

package/src/components/FormGroupComponent.tsx

@@ -1,5 +1,5 @@
 import {FormGroup} from "@blueprintjs/core";
-import React, {PropsWithChildren} from "react";
+import {PropsWithChildren} from "react";
 
 export function FormGroupComponent(props: PropsWithChildren<{ label: string, flexBasis?: string, disabled?: boolean }>) {
     return (

package/src/components/InspectorStackComponent.tsx

@@ -1,14 +1,12 @@
 import React from "react";
-import {Button, Card, Panel, PanelStack2, Popover} from "@blueprintjs/core";
+import {Card, Panel, PanelStack2} from "@blueprintjs/core";
 import {ConfigObject, ConfigProps} from "../ConfigObject";
 import {UiObjectConfig} from 'uiconfig.js'
 import {UiConfigRendererContext} from '../bpComponents/BPComponent'
-import {Classes} from '@blueprintjs/core/src/common'
-import {defaultVisualStyle, ThemeSettingsMenuComponent, VisualStyleContext} from './VisualStyleContext'
 
 // import {ViewerAppContext} from "./ViewerAppComponent";
 
-export function InspectorStackComponent({config}: { config: UiObjectConfig<any, 'panel'> }) {
+export function InspectorStackComponent({config, className}: { config: UiObjectConfig<any, 'panel'>, className?: string }) {
     const renderer = React.useContext(UiConfigRendererContext)
     const stackItem = React.useCallback(() => {
         return {
@@ -29,44 +27,16 @@ export function InspectorStackComponent({config}: { config: UiObjectConfig<any,
     React.useEffect(() => {
         // console.warn('change', config)
         setCurrentPanelStack([stackItem()])
-    }, [config])
-
-    const localStoragePrefix = 'bpUi'
-    const localStorageIds = {
-        'darkMode': localStoragePrefix + 'DarkMode',
-        'theme': localStoragePrefix + 'Theme',
-    }
-    const [darkMode, setDarkMode] = React.useState(localStorage.getItem(localStorageIds.darkMode) !== (defaultVisualStyle.darkMode ? 'false' : 'true'))
-    React.useEffect(() => {
-        localStorage.setItem('bpUiDarkMode', darkMode ? 'true' : 'false')
-    }, [darkMode])
-    const [theme, setTheme] = React.useState(localStorage.getItem(localStorageIds.theme) || defaultVisualStyle.theme)
-    React.useEffect(() => {
-        localStorage.setItem('bpUiTheme', theme)
-        document.documentElement.classList.remove(...Object.keys(defaultVisualStyle.themes).map(k => k))
-        document.documentElement.classList.add(theme)
-    }, [theme])
+    }, [setCurrentPanelStack, stackItem])
 
     return (
-        <VisualStyleContext.Provider value={{...defaultVisualStyle, darkMode, setDarkMode, theme, setTheme}}>
-        <Card id="bpInspectorCard" className={darkMode?Classes.DARK:""} style={{height: "100%", flexGrow: "1", position: "relative"}}>
+        <Card className={"bpInspectorCard " + className||''} style={{borderRadius: 0}}>
             <PanelStack2 className="inspectorPanelStack"
                          showPanelHeader={true}
                          renderActivePanelOnly={true}
                          onOpen={(p) => setCurrentPanelStack([...currentPanelStack, p] as any)}
                          onClose={() => setCurrentPanelStack(currentPanelStack.slice(0, -1))}
                          stack={currentPanelStack}/>
-            <div className={"bpPanelStackHeaderOverlay " + Classes.PANEL_STACK2_HEADER}>
-                <Popover targetProps={{style: {position: "absolute", right: "5px"}}}
-                         minimal={true}
-                         targetTagName={"div"}
-                    content={
-                    <ThemeSettingsMenuComponent/>
-                } placement="bottom">
-                    <Button icon="cog" small minimal text="" />
-                </Popover>
-            </div>
         </Card>
-        </VisualStyleContext.Provider>
     )
 }