hfs 0.26.8 → 0.27.2

package/admin/src/MonitorPage.ts

@@ -1,200 +0,0 @@
-// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
-
-import _ from "lodash"
-import { createElement as h, useMemo, Fragment, useState } from "react"
-import { apiCall, useApiEvents, useApiEx, useApiList } from "./api"
-import { PauseCircle, PlayCircle, Delete, Lock, Block, FolderZip } from '@mui/icons-material'
-import { Alert, Box, Chip, ChipProps } from '@mui/material'
-import { DataGrid } from "@mui/x-data-grid"
-import { formatBytes, IconBtn, iconTooltip, manipulateConfig, useBreakpoint } from "./misc"
-import { Field, SelectField } from '@hfs/mui-grid-form'
-import { GridColumns } from '@mui/x-data-grid/models/colDef/gridColDef'
-import { StandardCSSProperties } from '@mui/system/styleFunctionSx/StandardCssProperties'
-
-export default function MonitorPage() {
-    return h(Fragment, {},
-        h(MoreInfo),
-        h(Connections),
-    )
-}
-
-const isoDateRe = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/
-
-function MoreInfo() {
-    const { data: status, element } = useApiEx('get_status')
-    const { data: connections } = useApiEvents('get_connection_stats')
-    if (status && connections)
-        Object.assign(status, connections)
-    const md = useBreakpoint('md')
-    const sm = useBreakpoint('sm')
-    return element || h(Box, { display: 'flex', flexWrap: 'wrap', gap: '1em', mb: 2 },
-        md && pair('started'),
-        md && pair('http', { label: "HTTP", render: port }),
-        md && pair('https', { label: "HTTPS", render: port }),
-        sm && pair('connections'),
-        pair('sent', { render: formatBytes, minWidth: '4em' }),
-        pair('outSpeed', { label: "Output speed", render: formatSpeed }),
-    )
-
-    type Color = ChipProps['color']
-    type Render = (v: any) => [string, Color?] | string
-    interface PairOptions {
-        label?: string
-        render?: Render
-        minWidth?: StandardCSSProperties['minWidth']
-    }
-
-    function pair(k: string, { label, minWidth, render }: PairOptions={}) {
-        let v = _.get(status, k)
-        if (v === undefined)
-            return null
-        if (typeof v === 'string' && isoDateRe.test(v))
-            v = new Date(v).toLocaleString()
-        let color: Color = undefined
-        if (render) {
-            v = render(v)
-            if (Array.isArray(v))
-                [v, color] = v
-        }
-        if (!label)
-            label = _.capitalize(k.replaceAll('_', ' '))
-        return h(Chip, {
-            variant: 'filled',
-            color,
-            label: h(Fragment, {},
-                h('b',{},label),
-                ': ',
-                h('span', { style:{ display: 'inline-block', minWidth } }, v),
-            ),
-        })
-    }
-
-    function port(v: any): ReturnType<Render> {
-        return v.listening ? ["port " + v.port, 'success']
-            : v.error ? [v.error, 'error']
-                : "off"
-    }
-
-}
-
-function Connections() {
-    const { list, error } = useApiList('get_connections')
-    const [filtered, setFiltered] = useState(true)
-    const [paused, setPaused] = useState(false)
-    const rows = useMemo(() =>
-            list?.filter((x: any) => !filtered || x.path).map((x: any, id: number) => ({ id, ...x })),
-        [!paused && list, filtered]) //eslint-disable-line
-    // if I don't memo 'columns', it won't keep hiding status
-    const columns = useMemo<GridColumns<any>>(() => [
-        {
-            field: 'ip',
-            headerName: "Address",
-            flex: 1,
-            maxWidth: 400,
-            valueGetter: ({ row, value }) => (row.v === 6 ? `[${value}]` : value) + ' :' + row.port
-        },
-        {
-            field: 'user',
-            headerName: "User",
-        },
-        {
-            field: 'started',
-            headerName: "Started",
-            type: 'dateTime',
-            width: 130,
-            valueFormatter: ({ value }) => new Date(value as string).toLocaleTimeString()
-        },
-        {
-            field: 'path',
-            headerName: "File",
-            flex: 1,
-            renderCell({ value, row }) {
-                if (!value) return
-                if (row.archive)
-                    return h(Fragment, {},
-                        h(FolderZip, { sx: { mr: 1 } }),
-                        row.archive,
-                        h(Box, { ml: 2, color: 'text.secondary' }, value)
-                    )
-                const i = value?.lastIndexOf('/')
-                return h(Fragment, {}, value.slice(i + 1),
-                    i > 0 && h(Box, { ml: 2, color: 'text.secondary' }, value.slice(0, i)))
-            }
-        },
-        {
-            field: 'v',
-            headerName: "Protocol",
-            align: 'center',
-            hide: true,
-            renderCell: ({ value, row }) => h(Fragment, {},
-                "IPv" + value,
-                row.secure && iconTooltip(Lock, "HTTPS", { opacity: .5 })
-            )
-        },
-        {
-            field: 'outSpeed',
-            headerName: "Speed",
-            type: 'number',
-            valueFormatter: ({ value }) => formatSpeed(value)
-        },
-        {
-            field: 'sent',
-            headerName: "Total",
-            type: 'number',
-            valueFormatter: ({ value }) => formatBytes(value as number)
-        },
-        {
-            field: "Actions",
-            width: 80,
-            align: 'center',
-            hideSortIcons: true,
-            disableColumnMenu: true,
-            renderCell({ row }) {
-                return h('div', {},
-                    h(IconBtn, {
-                        icon: Delete,
-                        title: "Disconnect",
-                        onClick: () => apiCall('disconnect', _.pick(row, ['ip', 'port'])),
-                    }),
-                    h(IconBtn, {
-                        icon: Block,
-                        title: "Block IP",
-                        onClick: () => blockIp(row.ip),
-                    }),
-                )
-            }
-        }
-    ], [])
-    return h(Fragment, {},
-        h(Box, { display: 'flex', alignItems: 'center' },
-            h(SelectField as Field<boolean>, {
-                fullWidth: false,
-                value: filtered,
-                onChange: setFiltered as any,
-                options: { "Show only downloads": true, "Show all connections": false }
-            }),
-
-            h(Box, { flex: 1 }),
-            h(IconBtn, {
-                title: paused ? "Resume" : "Pause",
-                icon: paused ? PlayCircle : PauseCircle,
-                sx: { mr: 1 },
-                onClick() {
-                    setPaused(!paused)
-                }
-            }),
-        ),
-        error ? h(Alert, { severity: 'error' }, error)
-            : h(DataGrid, { rows, columns,
-                localeText: filtered ? { noRowsLabel: "No downloads at the moment" } : undefined,
-            })
-    )
-}
-
-function blockIp(ip: string) {
-    return manipulateConfig('block', data => [...data, { ip }])
-}
-
-function formatSpeed(value: number) {
-    return !value ? '' : formatBytes(value * 1000, { post: "B/s", k: 1000, digits: 1 })
-}

package/admin/src/OnlinePlugins.ts

@@ -1,101 +0,0 @@
-import { apiCall, useApiList } from './api'
-import { Fragment, createElement as h, useState } from 'react'
-import { DataGrid } from '@mui/x-data-grid'
-import { IconBtn } from './misc'
-import { Download, Search } from '@mui/icons-material'
-import { confirmDialog } from './dialog'
-import { StringField } from '@hfs/mui-grid-form'
-import { useDebounce } from 'use-debounce'
-import { repoLink, showError, startPlugin, UpdateButton } from './InstalledPlugins'
-import { state, useSnapState } from './state'
-import _ from 'lodash'
-import md from './md'
-
-export default function OnlinePlugins() {
-    const [search, setSearch] = useState('')
-    const [debouncedSearch] = useDebounce(search, 1000)
-    const { list, error, initializing, updateList } = useApiList('search_online_plugins', { text: debouncedSearch })
-    const snap = useSnapState()
-    if (error)
-        return showError(error)
-    return h(Fragment, {},
-        h(StringField, {
-            value: search,
-            onChange: setSearch as any,
-            start: h(Search),
-            typing: true,
-            label: "Search text"
-        }),
-        h(DataGrid, {
-            rows: list.length ? list : [], // workaround for DataGrid bug causing 'no rows' message to be not displayed after 'loading' was also used
-            localeText: { noRowsLabel: "No compatible plugins have been found" },
-            loading: initializing,
-            columnVisibilityModel: snap.onlinePluginsColumns,
-            onColumnVisibilityModelChange: newModel => Object.assign(state.onlinePluginsColumns, newModel),
-            columns: [
-                {
-                    field: 'id',
-                    headerName: "name",
-                    flex: 1,
-                },
-                {
-                    field: 'version',
-                    width: 70,
-                },
-                {
-                    field: 'pushed_at',
-                    headerName: "last update",
-                    valueGetter: ({ value }) => new Date(value).toLocaleDateString(),
-                },
-                {
-                    field: 'license',
-                    width: 80,
-                },
-                {
-                    field: 'description',
-                    flex: 3,
-                },
-                {
-                    field: 'stargazers_count',
-                    width: 50,
-                    headerName: "stars",
-                    align: 'center',
-                },
-                {
-                    field: "actions",
-                    width: 80,
-                    align: 'center',
-                    hideSortIcons: true,
-                    disableColumnMenu: true,
-                    hideable: false,
-                    renderCell({ row }) {
-                        const { id, branch } = row
-                        return h('div', {},
-                            repoLink(id),
-                            row.update ? h(UpdateButton, {
-                                id,
-                                then() {
-                                    updateList(list =>
-                                        _.find(list, { id }).update = false )
-                                }
-                            }) : h(IconBtn, {
-                                icon: Download,
-                                title: "Install",
-                                progress: row.downloading,
-                                disabled: row.installed && "Already installed",
-                                tooltipProps: { placement:'bottom-end' }, // workaround problem with horizontal scrolling by moving the tooltip leftward
-                                confirm: "WARNING - Proceed only if you trust this author and this plugin",
-                                async onClick() {
-                                    const { id: installedId } = await apiCall('download_plugin', { id, branch })
-                                    if (await confirmDialog(md(`Plugin /${id}/ installed.\nDo you want to start it now?`)))
-                                        await startPlugin(installedId)
-                                }
-                            })
-                        )
-                    }
-                },
-            ]
-        })
-    )
-}
-

package/admin/src/PermField.ts

@@ -1,80 +0,0 @@
-// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
-
-import { Dict, useStateMounted } from './misc'
-import { createElement as h, Fragment } from 'react'
-import { Button, Grid } from '@mui/material'
-import { Field, FieldProps, SelectField } from '@hfs/mui-grid-form'
-import _ from 'lodash'
-import { useApiEx } from './api'
-
-export default function PermField({ label, value, onChange }: FieldProps<Dict<string> | null> & { keyLabel:string }) {
-    const [temp, setTemp] = useStateMounted<string|undefined>(undefined)
-    const { data, element } = useApiEx('get_usernames')
-    const usernames = data?.list || []
-
-    const permOptions = [{ label:'read', value:'r' }, { label:'none', value:''  }]
-    const usernamesLeft = _.difference(usernames, Object.keys(value||{}))
-
-    return h(Grid, { container: true },
-        label && h(Grid, { item: true, xs: 12, pl: 2, py: 1, display: 'flex', alignItems: 'center', justifyContent: 'space-between' },
-            label,
-            !element && h(Button, {
-                onClick(event){
-                    setTemp(undefined)
-                    onChange(null, { event, was: value })
-                }
-            }, 'Clear')),
-        element || h(Fragment, {},
-            // existing entries
-            Object.entries(value||{}).map(([username, perm]) => [
-                h(Grid, { key:'k', item: true, xs: 6 },
-                    h(SelectField as Field<string>, {
-                        label: 'Username',
-                        options: usernames,
-                        value: username,
-                        onChange(v, { was, ...rest }){
-                            const copy: any = { ...value, [v]: value![was!] }
-                            delete copy[was!]
-                            onChange(copy, { was:value, ...rest })
-                        }
-                    })),
-                h(Grid, { key:'v', item: true, xs: 6 },
-                    h(SelectField as Field<string>, {
-                        label: 'Access',
-                        options: permOptions,
-                        value: perm,
-                        onChange(v, { was, ...rest }){
-                            const copy = { ...value }
-                            if (v)
-                                copy[username] = v
-                            else
-                                delete copy[username]
-                            onChange( _.isEmpty(copy) ? null : copy, { was:value, ...rest })
-                        }
-                    })),
-            ]),
-            // row for new entries
-            !usernamesLeft.length && h(Grid, { item: true, xs: 12, py: 1, px: 2, color:'text.secondary' }, "No accounts left"),
-            usernamesLeft.length>0 && h(Grid, { item: true, xs: 6 },
-                h(SelectField as Field<string>, {
-                    label: value ? "Add access to" : "Restrict access to ",
-                    value: temp,
-                    options: usernamesLeft,
-                    onChange: setTemp as any,
-                })),
-            usernamesLeft.length>0 && h(Grid, { item: true, xs: 6 },
-                h(SelectField as Field<string>, {
-                    value: undefined,
-                    label: temp && "Select access type",
-                    disabled: !temp,
-                    options: permOptions,
-                    onChange(v, rest) {
-                        if (v)
-                            onChange({ ...value, [temp!]: v }, { ...rest, was: value })
-                        setTemp(undefined)
-                    }
-                }))
-        )
-    )
-}
-

package/admin/src/PluginsPage.ts

@@ -1,27 +0,0 @@
-// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
-
-import { createElement as h, Fragment, useState } from "react"
-import { Tab, Tabs } from '@mui/material'
-import InstalledPlugins from "./InstalledPlugins"
-import OnlinePlugins from "./OnlinePlugins"
-
-const TABS = {
-    "Installed": InstalledPlugins,
-    "Search online": OnlinePlugins,
-    "Check updates": () => h(InstalledPlugins, { updates: true }),
-}
-const LABELS = Object.keys(TABS)
-const PANES = Object.values(TABS)
-
-export default function PluginsPage() {
-    const [tab, setTab] = useState(0)
-    return h(Fragment, {},
-        h(Tabs, {
-            value: tab,
-            onChange(ev, i) {
-                setTab(i)
-            }
-        }, LABELS.map(label => h(Tab, { label, key: label })) ),
-        h(PANES[tab])
-    )
-}

package/admin/src/VfsMenuBar.ts

@@ -1,58 +0,0 @@
-// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
-
-import { state, useSnapState } from './state'
-import { createElement as h } from 'react'
-import { Box, Button } from '@mui/material'
-import { Add, Delete, Refresh } from '@mui/icons-material'
-import { alertDialog, confirmDialog } from './dialog'
-import { apiCall } from './api'
-import { reloadVfs } from './VfsPage'
-import addFiles, { addVirtual } from './addFiles'
-import MenuButton from './MenuButton'
-import { IconBtn } from './misc'
-
-export default function VfsMenuBar() {
-    const { selectedFiles } = useSnapState()
-    return h(Box, {
-        display: 'flex',
-        gap: 2,
-        mb: 2,
-        sx: {
-            position: 'sticky',
-            top: 0,
-            zIndex: 2,
-            backgroundColor: 'background.paper',
-            width: 'fit-content',
-        },
-    },
-        h(MenuButton, {
-            variant: 'contained',
-            startIcon: h(Add),
-            items: [
-                { children: "from disk", onClick: addFiles },
-                { children: "virtual folder", onClick: addVirtual  }
-            ]
-        }, "Add"),
-        h(Button, { onClick: removeFiles, disabled: !selectedFiles.length, startIcon: h(Delete) }, "Remove"),
-        h(IconBtn, { icon: Refresh, title: "Reload", onClick(){ reloadVfs() } }),
-    )
-}
-
-async function removeFiles() {
-    const f = state.selectedFiles
-    if (!f.length) return
-    if (await confirmDialog(`Remove ${f.length} item(s)?`)) {
-        try {
-            const uris = f.map(x => x.id)
-            const { errors } = await apiCall('del_vfs', { uris })
-            const urisThatFailed = uris.filter((uri, idx) => errors[idx])
-            if (urisThatFailed.length)
-                return alertDialog("Following elements couldn't be removed: " + urisThatFailed.join(', '), 'error')
-            reloadVfs()
-        }
-        catch(e) {
-            await alertDialog(e as Error)
-        }
-    }
-
-}

package/admin/src/VfsPage.ts

@@ -1,124 +0,0 @@
-// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
-
-import { createElement as h, useEffect, useMemo, useState } from 'react'
-import { useApi, useApiEx } from './api'
-import { Alert, Grid, Link, List, ListItem, ListItemText, Typography } from '@mui/material'
-import { state, useSnapState } from './state'
-import VfsMenuBar from './VfsMenuBar'
-import VfsTree from './VfsTree'
-import { onlyTruthy, prefix } from './misc'
-import { reactJoin } from '@hfs/shared'
-import _ from 'lodash'
-import { AlertProps } from '@mui/material/Alert/Alert'
-import FileForm from './FileForm'
-
-let selectOnReload: string[] | undefined
-
-export default function VfsPage() {
-    const [id2node] = useState(() => new Map<string, VfsNode>())
-    const snap = useSnapState()
-    const { data, reload, element } = useApiEx('get_vfs')
-    useMemo(() => snap.vfs || reload(), [snap.vfs, reload])
-    useEffect(() => {
-        state.vfs = undefined
-        if (!data) return
-        // rebuild id2node
-        id2node.clear()
-        const { root } = data
-        if (!root) return
-        recur(root) // this must be done before state change that would cause Tree to render and expecting id2node
-        root.isRoot = true
-        state.vfs = root
-        // refresh objects of selectedFiles
-        const ids = selectOnReload || state.selectedFiles.map(x => x.id)
-        selectOnReload = undefined
-        state.selectedFiles = onlyTruthy(ids.map(id =>
-            id2node.get(id)))
-
-        // calculate id and parent fields, and builds the map id2node
-        function recur(node: VfsNode, pre='', parent: VfsNode|undefined=undefined) {
-            node.parent = parent
-            node.id = prefix(pre, node.name) || '/' // root
-            id2node.set(node.id, node)
-            if (!node.children) return
-            for (const n of node.children)
-                recur(n, (pre && node.id) + '/', node)
-        }
-
-    }, [data, id2node])
-    const [status] = useApi(window.location.host === 'localhost' && 'get_status')
-    const urls = useMemo(() =>
-        typeof status === 'object'
-            && _.sortBy(
-                onlyTruthy(Object.values(status.urls?.https || status.urls?.http || {}).map(u => typeof u === 'string' && u)),
-                url => url.includes('[')
-            ),
-        [status])
-    if (element) {
-        id2node.clear()
-        return element
-    }
-    const anythingShared = !data?.root?.children?.length && !data?.root?.source
-    const alert: AlertProps | false = anythingShared ? {
-        severity: 'warning',
-        children: "Add something to your shared files — click Add"
-    } : urls && {
-        severity: 'info',
-        children: [
-            "Your shared files can be browsed from ",
-            reactJoin(" or ", urls.slice(0,3).map(href => h(Link, { href }, href)))
-        ]
-    }
-    return h(Grid, { container:true, rowSpacing: 1, maxWidth: '80em', columnSpacing: 2 },
-        alert && h(Grid, { item: true, mb: 2, xs: 12 }, h(Alert, alert)),
-        h(Grid, { item:true, sm: 6, lg: 5 },
-            h(Typography, { variant: 'h6', mb:1, }, "Virtual File System"),
-            h(VfsMenuBar),
-            snap.vfs && h(VfsTree, { id2node })),
-        h(Grid, { item:true, sm: 6, lg: 7, maxWidth:'100%' },
-            h(SidePanel))
-    )
-}
-
-function SidePanel() {
-    const { selectedFiles: files } = useSnapState()
-    return files.length === 0 ? null
-        : files.length === 1 ? h(FileForm, { file: files[0] as VfsNode }) // it's actually Snapshot<VfsNode> but it's easier this way
-            : h(List, {},
-                files.length + ' selected',
-                files.map(f => h(ListItem, { key: f.name },
-                    h(ListItemText, { primary: f.name, secondary: f.source }) )))
-}
-
-export function reloadVfs(pleaseSelect?: string[]) {
-    selectOnReload = pleaseSelect
-    state.vfs = undefined
-}
-
-export type VfsNode = {
-    id: string
-    name: string
-    type?: 'folder'
-    source?: string
-    size?: number
-    ctime?: string
-    mtime?: string
-    default?: string
-    children?: VfsNode[]
-    parent?: VfsNode
-    can_see: Who
-    can_read: Who
-    website?: true
-    masks?: any
-
-    isRoot?: true
-}
-
-const WHO_ANYONE = true
-const WHO_NO_ONE = false
-const WHO_ANY_ACCOUNT = '*'
-type AccountList = string[]
-export type Who = typeof WHO_ANYONE
-    | typeof WHO_NO_ONE
-    | typeof WHO_ANY_ACCOUNT
-    | AccountList

package/admin/src/VfsTree.ts

@@ -1,95 +0,0 @@
-// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
-
-import { state, useSnapState } from './state'
-import { createElement as h, ReactElement, useState } from 'react'
-import { TreeItem, TreeView } from '@mui/lab'
-import {
-    ChevronRight,
-    ExpandMore,
-    TheaterComedy,
-    Folder,
-    Home,
-    InsertDriveFileOutlined,
-    Lock,
-    RemoveRedEye,
-    Web
-} from '@mui/icons-material'
-import { Box } from '@mui/material'
-import { VfsNode, Who } from './VfsPage'
-import { iconTooltip, isWindowsDrive, onlyTruthy } from './misc'
-
-export const FolderIcon = Folder
-export const FileIcon = InsertDriveFileOutlined
-
-export default function VfsTree({ id2node }:{ id2node: Map<string, VfsNode> }) {
-    const { vfs, selectedFiles } = useSnapState()
-    const [selected, setSelected] = useState<string[]>(selectedFiles.map(x => x.id)) // try to restore selection after reload
-    const [expanded, setExpanded] = useState(Array.from(id2node.keys()))
-    if (!vfs)
-        return null
-    return h(TreeView, {
-        expanded,
-        selected,
-        multiSelect: true,
-        sx: { overflowX: 'auto' },
-        onNodeSelect(ev, ids) {
-            setSelected(ids)
-            state.selectedFiles = onlyTruthy(ids.map(id => id2node.get(id)))
-        }
-    }, recur(vfs as Readonly<VfsNode>))
-
-    function isRestricted(who: Who) {
-        return who !== undefined && who !== true
-    }
-
-    function recur(node: Readonly<VfsNode>): ReactElement {
-        let { id, name, source, isRoot } = node
-        if (!id)
-            debugger
-        const folder = node.type === 'folder'
-        if (folder && !isWindowsDrive(source) && source === name) // we need a way to show that the name we are displaying is a source in this ambiguous case, so we add a redundant ./
-            source = './' + source
-        return h(TreeItem, {
-            label: h(Box, {
-                sx: {
-                    display: 'flex',
-                    gap: '.5em',
-                    lineHeight: '2em',
-                    alignItems: 'center',
-                }
-            },
-                isRoot ? iconTooltip(Home, "home, or root if you like")
-                    : folder ? iconTooltip(FolderIcon, "Folder")
-                        : iconTooltip(FileIcon, "File"),
-                isRestricted(node.can_see) && iconTooltip(RemoveRedEye, "Restrictions on who can see"),
-                isRestricted(node.can_read) && iconTooltip(Lock, "Restrictions on who can download"),
-                node.default && iconTooltip(Web, "Act as website"),
-                node.masks && iconTooltip(TheaterComedy, "Masks"),
-                isRoot ? "Home"
-                    // special rendering if the whole source is not too long, and the name was not customized
-                    : source?.length! < 45 && source?.endsWith(name) ? h('span', {},
-                        h('span', { style: { opacity: .4 } }, source.slice(0,-name.length)),
-                        h('span', {}, source.slice(-name.length)),
-                    )
-                    : name
-            ),
-            key: name,
-            collapseIcon: h(ExpandMore, {
-                onClick(ev) {
-                    setExpanded( expanded.filter(x => x !== id) )
-                    ev.preventDefault()
-                    ev.stopPropagation()
-                }
-            }),
-            expandIcon: h(ChevronRight, {
-                onClick(ev) {
-                    setExpanded( [...expanded, id] )
-                    ev.preventDefault()
-                    ev.stopPropagation()
-                }
-            }),
-            nodeId: id
-        }, isRoot && !node.children?.length ? h('i', {}, "nothing here") : node.children?.map(recur))
-    }
-
-}