@cubejs-client/playground 1.1.12 → 1.1.17

package/lib/QueryBuilderV2/components/SidePanelCubeItem.js

@@ -1,16 +1,18 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Block, Button, Space, tasty, Text, CubeIcon, ViewIcon, TooltipProvider, } from '@cube-dev/ui-kit';
-import { QuestionCircleOutlined } from '@ant-design/icons';
+import { Block, Button, Space, tasty, Text, CubeIcon, ViewIcon } from '@cube-dev/ui-kit';
 import { useQueryBuilderContext } from '../context';
-import { ArrowIcon } from '../icons/ArrowIcon';
+import { ChevronIcon } from '../icons/ChevronIcon';
 import { NonPublicIcon } from '../icons/NonPublicIcon';
 import { ItemInfoIcon } from '../icons/ItemInfoIcon';
-import { useHasOverflow, useFilteredMembers } from '../hooks';
-import { titleize } from '../utils/index';
+import { useEvent, useFilteredMembers } from '../hooks';
+import { titleize } from '../utils';
+import { HierarchyMember } from './HierarchyMember';
+import { Folder } from './Folder';
 import { ListMember } from './ListMember';
 import { TimeListMember } from './TimeListMember';
 import { FilteredLabel } from './FilteredLabel';
+import { InstanceTooltipProvider } from './InstanceTooltipProvider';
 const CubeWrapper = tasty({
     styles: {
         position: 'sticky',
@@ -43,19 +45,15 @@ const CubeButton = tasty(Button, {
             '': '#purple.08',
             hovered: '#purple.16',
             pressed: '#purple.12',
-            '!joinable': '#dark.04',
+            '!joinable | missing': '#dark.04',
         },
-        padding: '(.75x - 1bw) (1.5x - 1bw) (.75x - 1bw) (1.5x - 1bw)',
+        padding: '(.75x - 1bw) 1x (.75x - 1bw) (1x - 1bw)',
         cursor: {
             joinable: 'pointer',
             disabled: 'default',
         },
-        // shadow: {
-        //   '': '0 1ow 3ow #dark.0',
-        //   open: '0 1ow 1ow #dark.1',
-        // },
         placeContent: 'space-between',
-        gridTemplateColumns: 'auto 1fr auto',
+        gridTemplateColumns: 'auto 1fr auto 2x',
         textAlign: 'left',
         zIndex: 2,
         transition: 'fill .08s, color .3s',
@@ -68,62 +66,87 @@ const CubeButton = tasty(Button, {
         },
     },
 });
-export function SidePanelCubeItem({ isOpen, name, mode = 'all', isFiltered, isNonJoinable, isSelected, onToggle, filterString, onMemberToggle, }) {
+function sortFn(a, b) {
+    return a.localeCompare(b);
+}
+export function SidePanelCubeItem(props) {
+    const { isOpen, cubeName, mode = 'all', isNonJoinable, onToggle, filterString, onMemberToggle, onHierarchyToggle, } = props;
     const textRef = useRef(null);
-    const { query, grouping, dateRanges, dimensions: dimensionsUpdater, measures: measuresUpdater, segments: segmentsUpdater, filters, 
-    // queryStats,
-    cubes, meta, usedCubes, usedMembers, } = useQueryBuilderContext();
-    const cube = cubes.find((cube) => cube.name === name);
+    const { query, grouping, dateRanges, dimensions: dimensionsUpdater, measures: measuresUpdater, segments: segmentsUpdater, filters, cubes, meta, members, usedCubes, usedMembers, usedMembersInFilters, usedGranularities, missingMembers, memberViewType, isQueryEmpty, queryStats, } = useQueryBuilderContext();
+    const cube = cubes.find((cube) => cube.name === cubeName);
     // @ts-ignore
     const type = cube?.type || 'cube';
-    const isUsed = usedCubes.includes(name);
+    const isUsed = usedCubes.includes(cubeName);
     // @ts-ignore
     const isPrivate = cube?.public === false;
     // const stats = queryStats[name];
     const isMissing = !cube;
-    const [showAllMembers, setShowAllMembers] = useState(false);
+    const shownName = memberViewType === 'name' ? cubeName : (cube?.title ?? titleize(cubeName));
     // @ts-ignore
     const { title, description } = cube || {};
-    const { measures: shownMeasures, dimensions: shownDimensions, segments: shownSegments, } = useFilteredMembers(filterString || '', {
-        measures: cube?.measures || [],
-        dimensions: cube?.dimensions || [],
-        segments: cube?.segments || [],
-    });
-    const dimensions = (filterString ? shownDimensions : cube?.dimensions || [])
+    const folders = cube?.folders || [];
+    const hierarchies = cube?.hierarchies || [];
+    const hierarchyNames = hierarchies.map((h) => h.name);
+    const [openTimeDimensions, setOpenTimeDimensions] = useState([]);
+    const [openFolders, setOpenFolders] = useState([]);
+    const [openHierarchies, setOpenHierarchies] = useState([]);
+    const folderMembers = folders.reduce((acc, folder) => {
+        return acc.concat(folder.members);
+    }, []);
+    const hierarchyMembers = hierarchies.reduce((acc, hierarchy) => {
+        return acc.concat(hierarchy.levels);
+    }, []);
+    const importedDimensionsInHierarchies = hierarchies
+        .reduce((acc, hierarchy) => {
+        return acc.concat(hierarchy.levels.filter((level) => cube && !level.startsWith(cube?.name)));
+    }, [])
+        .map((member) => members.dimensions[member])
+        .filter(Boolean);
+    const importedDimensionsInHierarchiesNames = importedDimensionsInHierarchies.map((d) => d.name);
+    const cubeDimensions = (cube?.dimensions ?? [])
         .map((d) => d.name)
-        .filter((d) => (mode === 'all' && isOpen) ||
-        filterString ||
-        showAllMembers ||
-        usedMembers.filter((d) => d.startsWith(`${name}.`)).includes(d));
-    const measures = (filterString ? shownMeasures : cube?.measures || [])
-        .map((m) => m.name)
-        .filter((m) => (mode === 'all' && isOpen) ||
-        filterString ||
-        showAllMembers ||
-        usedMembers.filter((m) => m.startsWith(`${name}.`)).includes(m));
-    const segments = (filterString ? shownSegments : cube?.segments || [])
-        .map((s) => s.name)
-        .filter((s) => (mode === 'all' && isOpen) || showAllMembers || query?.segments?.includes(s));
-    if (!filterString) {
-        query?.dimensions?.forEach((dimension) => {
-            if (!dimensions?.includes(dimension) && dimension.startsWith(`${name}.`)) {
-                dimensions.push(dimension);
-            }
-        });
-        query?.measures?.forEach((measure) => {
-            if (!measures?.includes(measure) && measure.startsWith(`${name}.`)) {
-                measures.push(measure);
-            }
-        });
-        query?.segments?.forEach((segment) => {
-            if (!segments?.includes(segment) && segment.startsWith(`${name}.`)) {
-                segments.push(segment);
-            }
-        });
+        .concat(importedDimensionsInHierarchiesNames);
+    const cubeMeasures = cube?.measures.map((m) => m.name) ?? [];
+    const cubeSegments = cube?.segments.map((s) => s.name) ?? [];
+    missingMembers.forEach(({ name, category }) => {
+        switch (category) {
+            case 'measures':
+                if (name.startsWith(`${cubeName}.`) && !cubeMeasures.includes(name)) {
+                    cubeMeasures.push(name);
+                }
+                break;
+            case 'segments':
+                if (name.startsWith(`${cubeName}.`) && !cubeSegments.includes(name)) {
+                    cubeSegments.push(name);
+                }
+                break;
+            case 'dimensions':
+            case 'timeDimensions':
+                if (name.startsWith(`${cubeName}.`) && !cubeDimensions.includes(name)) {
+                    cubeDimensions.push(name);
+                }
+                break;
+        }
+    });
+    const { measures: filteredMeasures, dimensions: filteredDimensions, segments: filteredSegments, folders: filteredFolders, hierarchies: filteredHierarchies, members: filteredMembers, } = useFilteredMembers(filterString || '', {
+        measures: cubeMeasures.map((m) => members.measures[m] ?? { name: m, type: 'number' }),
+        dimensions: cubeDimensions.map((d) => members.dimensions[d] ?? { name: d }),
+        segments: cubeSegments.map((s) => members.segments[s] ?? { name: s }),
+        folders: cube?.folders ?? [],
+        hierarchies: cube?.hierarchies ?? [],
+    }, memberViewType);
+    const filteredDimensionNames = filteredDimensions.map((dimension) => dimension.name);
+    const filteredFolderNames = filteredFolders.map((folder) => folder.name);
+    const filteredHierarchyNames = filteredHierarchies.map((hierarchy) => hierarchy.name);
+    const filteredMemberNames = filteredMembers.map((member) => member.name);
+    function filterMembers(members) {
+        return members.filter((m) => (mode === 'all' && isOpen) ||
+            filterString ||
+            usedMembers.filter((m) => m.startsWith(`${cubeName}.`)).includes(m));
     }
-    dimensions.sort();
-    measures.sort();
-    segments.sort();
+    const dimensions = filterMembers(filterString ? filteredDimensions.map((d) => d.name) : cubeDimensions);
+    const measures = filterMembers(filterString ? filteredMeasures.map((m) => m.name) : cubeMeasures);
+    const segments = filterMembers(filterString ? filteredSegments.map((s) => s.name) : cubeSegments);
     function addFilter(name) {
         filters.add({ member: name, operator: 'set' });
     }
@@ -137,104 +160,330 @@ export function SidePanelCubeItem({ isOpen, name, mode = 'all', isFiltered, isNo
         dateRanges.remove(name);
     }
     const showMembers = (isOpen || mode === 'query' || isUsed || !!filterString) && !isNonJoinable;
-    const dimensionsSection = useMemo(() => {
-        return showMembers && dimensions.length ? (_jsx(_Fragment, { children: dimensions.map((name) => {
-                const item = cube?.dimensions?.find((d) => d.name === name);
-                // @TODO: support missing dimensions
-                if (!item || !cube) {
-                    return null;
+    function cacheOfMembers(members, ignore) {
+        return (members
+            ?.filter((dim) => dim.startsWith(`${cubeName}.`) || ignore?.includes(dim))
+            .sort()
+            .join() || '');
+    }
+    // Opens folders that contain specific member
+    const openContainingFolder = function (name) {
+        const foldersToOpen = folders.filter((folder) => folder.members.includes(name));
+        if (foldersToOpen.length) {
+            setOpenFolders(() => {
+                const newOpenFolders = [];
+                foldersToOpen.forEach((folder) => {
+                    if (!newOpenFolders.includes(folder.name)) {
+                        newOpenFolders.push(folder.name);
+                    }
+                });
+                return newOpenFolders;
+            });
+        }
+        else {
+            setOpenFolders([]);
+        }
+    };
+    const toggleTimeDimension = useEvent((isOpen, name) => {
+        if (mode === 'query' || !!filterString) {
+            onMemberToggle?.(name);
+            if (isOpen) {
+                setOpenTimeDimensions([name]);
+                openContainingFolder(name);
+                setOpenHierarchies([]);
+            }
+        }
+        else {
+            if (!isOpen) {
+                setOpenTimeDimensions((timeDimensions) => timeDimensions.filter((f) => f !== name));
+            }
+            else {
+                setOpenTimeDimensions((timeDimensions) => timeDimensions.concat([name]));
+            }
+        }
+    });
+    const dimensionsElementMap = useMemo(() => {
+        return cubeDimensions.reduce((map, memberName) => {
+            const member = members.dimensions[memberName];
+            const timeDimension = usedGranularities.find((td) => td.dimension === memberName);
+            const isSelected = query?.dimensions?.includes(memberName) ?? false;
+            const isImported = importedDimensionsInHierarchiesNames.includes(memberName);
+            if (!member || !cube) {
+                const missingMember = missingMembers.find((m) => m.name === memberName);
+                if (!missingMember ||
+                    (missingMember.category !== 'dimensions' && missingMember.category !== 'timeDimensions')) {
+                    return map;
                 }
-                if (cube && item?.type === 'time') {
-                    return (_jsx(TimeListMember, { cube: cube, member: item, filterString: filterString, isCompact: (mode === 'query' && !showAllMembers) || !isOpen, isSelected: (granularity) => {
+                if (missingMember.category === 'dimensions') {
+                    map[memberName] = (_jsx(ListMember, { cube: cube ?? { name: cubeName }, member: { name: memberName, type: undefined }, category: "dimensions", filterString: filterString, memberViewType: memberViewType, isImported: isImported, isMissing: true, isSelected: isSelected, isFiltered: usedMembersInFilters.includes(memberName), onRemoveFilter: removeFilter, onToggle: () => {
+                            dimensionsUpdater?.toggle(memberName);
+                            onMemberToggle?.(memberName);
+                        } }, memberName));
+                }
+                else {
+                    map[memberName] = (_jsx(TimeListMember, { isMissing: true, cube: cube ?? { name: cubeName }, member: { name: memberName, type: 'time' }, filterString: filterString, selectedGranularities: timeDimension?.granularities, memberViewType: memberViewType, isSelected: (granularity) => {
                             if (granularity) {
-                                return (query?.timeDimensions?.some((td) => td.dimension === item.name && td.granularity === granularity) || false);
+                                return timeDimension?.granularities.includes(granularity) ?? false;
                             }
-                            return query?.dimensions?.includes(item.name) || false;
-                        }, isFiltered: query?.timeDimensions?.some((td) => td.dimension === item.name && td.dateRange) ||
-                            false, onDimensionToggle: (dimension) => {
+                            return isSelected;
+                        }, isFiltered: usedMembersInFilters.includes(memberName), isDateRangeFiltered: dateRanges.list.includes(memberName), onDimensionToggle: (dimension) => {
                             dimensionsUpdater?.toggle(dimension);
                             onMemberToggle?.(dimension);
                         }, onGranularityToggle: (name, granularity) => {
                             grouping.toggle(name, granularity);
-                            onMemberToggle?.(name);
-                        }, onToggleDataRange: !dateRanges.list.includes(item.name) ? addDateRange : removeDateRange }, item.name));
+                        }, onAddDataRange: addDateRange, onRemoveDataRange: removeDateRange, onAddFilter: addFilter, onRemoveFilter: removeFilter, onToggle: toggleTimeDimension }, memberName));
                 }
-                return (_jsx(ListMember, { cube: cube, member: item, category: "dimensions", filterString: filterString, isSelected: query?.dimensions?.includes(name) || false, isFiltered: query?.filters?.some((filter) => 'member' in filter && filter.member === name) ||
-                        false, onAddFilter: addFilter, onRemoveFilter: removeFilter, onToggle: () => {
-                        dimensionsUpdater?.toggle(name);
-                        onMemberToggle?.(name);
-                    } }, name));
-            }) })) : null;
+            }
+            else if (cube && member?.type === 'time') {
+                map[memberName] = (_jsx(TimeListMember, { isOpen: !filterString && mode === 'all' && openTimeDimensions.includes(memberName), cube: cube, member: member, filterString: filterString, memberViewType: memberViewType, selectedGranularities: timeDimension?.granularities, isSelected: (granularity) => {
+                        if (granularity) {
+                            return timeDimension?.granularities.includes(granularity) ?? false;
+                        }
+                        return isSelected;
+                    }, isDateRangeFiltered: dateRanges.list.includes(memberName), isFiltered: usedMembersInFilters.includes(memberName), onDimensionToggle: (dimension) => {
+                        dimensionsUpdater?.toggle(dimension);
+                        onMemberToggle?.(dimension);
+                    }, onGranularityToggle: (name, granularity) => {
+                        grouping.toggle(name, granularity);
+                    }, onAddDataRange: addDateRange, onRemoveDataRange: removeDateRange, onAddFilter: addFilter, onRemoveFilter: removeFilter, onToggle: toggleTimeDimension }, memberName));
+            }
+            else {
+                map[memberName] = (_jsx(ListMember, { cube: cube, member: member, category: "dimensions", filterString: filterString, memberViewType: memberViewType, isImported: isImported, isSelected: isSelected, isFiltered: usedMembersInFilters.includes(memberName), onAddFilter: addFilter, onRemoveFilter: removeFilter, onToggle: () => {
+                        dimensionsUpdater?.toggle(memberName);
+                        onMemberToggle?.(memberName);
+                    } }, memberName));
+            }
+            return map;
+        }, {});
     }, [
-        dimensions.join(','),
-        query?.dimensions?.join(','),
-        JSON.stringify(query?.timeDimensions),
-        showMembers,
-        mode,
-        isOpen,
+        cacheOfMembers(query.dimensions, importedDimensionsInHierarchiesNames),
+        cacheOfMembers(usedMembersInFilters),
+        cacheOfMembers(dateRanges.list),
+        JSON.stringify(query.timeDimensions?.filter((dim) => dim.dimension.startsWith(`${cubeName}.`))),
         meta,
+        openTimeDimensions.join(),
+        memberViewType,
         filterString,
-        JSON.stringify(query?.filters),
     ]);
-    const measuresSection = useMemo(() => {
-        return showMembers && measures.length ? (_jsx(_Fragment, { children: measures.map((name) => {
-                const item = cube?.measures?.find((m) => m.name === name);
-                // @TODO: support missing measures
-                if (!item || !cube) {
-                    return null;
+    const toggleFolder = useEvent((isOpen, name) => {
+        if (mode === 'query' || !!filterString) {
+            onHierarchyToggle?.(cube?.name);
+            if (isOpen) {
+                setOpenFolders([name]);
+                setOpenTimeDimensions([]);
+                setOpenHierarchies([]);
+            }
+        }
+        else {
+            if (!isOpen) {
+                setOpenFolders((openFolders) => openFolders.filter((f) => f !== name));
+            }
+            else {
+                setOpenFolders((openFolders) => openFolders.concat([name]));
+            }
+        }
+    });
+    const toggleHierarchy = useEvent((isOpen, name) => {
+        if (mode === 'query' || !!filterString) {
+            onHierarchyToggle?.(cube?.name);
+            if (isOpen) {
+                setOpenHierarchies([name]);
+                setOpenTimeDimensions([]);
+                openContainingFolder(name);
+            }
+        }
+        else {
+            if (!isOpen) {
+                setOpenHierarchies((openHierarchies) => openHierarchies.filter((f) => f !== name));
+            }
+            else {
+                setOpenHierarchies((openHierarchies) => openHierarchies.concat([name]));
+            }
+        }
+    });
+    const measuresElementMap = useMemo(() => {
+        return cubeMeasures.reduce((map, memberName) => {
+            const member = cube?.measures?.find((m) => m.name === memberName);
+            if (!member || !cube) {
+                const missingMember = missingMembers.find((m) => m.name === memberName);
+                if (!missingMember || missingMember.category !== 'measures') {
+                    return map;
                 }
-                return (_jsx(ListMember, { cube: cube, member: item, category: "measures", filterString: filterString, isSelected: query?.measures?.includes(name) || false, isFiltered: query?.filters?.some((filter) => 'member' in filter && filter.member === name) ||
-                        false, onAddFilter: addFilter, onRemoveFilter: removeFilter, onToggle: () => {
-                        measuresUpdater?.toggle(name);
-                        onMemberToggle?.(name);
-                    } }, name));
-            }) })) : null;
+                map[memberName] = (_jsx(ListMember, { cube: cube ?? { name: cubeName }, member: { name: memberName, type: 'number' }, category: "measures", filterString: filterString, memberViewType: memberViewType, isMissing: true, isSelected: query.measures?.includes(memberName) ?? false, isFiltered: usedMembersInFilters.includes(memberName), onRemoveFilter: removeFilter, onToggle: () => {
+                        measuresUpdater?.toggle(memberName);
+                        onMemberToggle?.(memberName);
+                    } }, memberName));
+            }
+            else {
+                map[memberName] = (_jsx(ListMember, { cube: cube, member: member, category: "measures", filterString: filterString, memberViewType: memberViewType, isSelected: query.measures?.includes(memberName) ?? false, isFiltered: usedMembersInFilters.includes(memberName), onAddFilter: addFilter, onRemoveFilter: removeFilter, onToggle: () => {
+                        measuresUpdater?.toggle(memberName);
+                        onMemberToggle?.(memberName);
+                    } }, memberName));
+            }
+            return map;
+        }, {});
     }, [
-        measures.join(','),
-        query?.measures?.join(','),
-        showMembers,
-        filterString,
-        mode,
+        cacheOfMembers(query.measures),
+        cacheOfMembers(usedMembersInFilters),
         meta,
-        JSON.stringify(query?.filters),
+        memberViewType,
+        filterString,
     ]);
-    const segmentsSection = useMemo(() => {
-        return showMembers && segments.length ? (_jsx(_Fragment, { children: segments.map((name) => {
-                const item = cube?.segments?.find((s) => s.name === name);
-                if (!item || !cube) {
-                    return null;
+    const segmentElementMap = useMemo(() => {
+        return cubeSegments.reduce((map, memberName) => {
+            const member = cube?.segments?.find((s) => s.name === memberName);
+            if (!member || !cube) {
+                const missingMember = missingMembers.find((m) => m.name === memberName);
+                if (!missingMember || missingMember.category !== 'segments') {
+                    return map;
                 }
-                return (_jsx(ListMember, { cube: cube, member: item, category: "segments", isSelected: query?.segments?.includes(name) || false, onToggle: () => {
-                        segmentsUpdater?.toggle(name);
-                    } }, name));
-            }) })) : null;
-    }, [segments.join(','), query?.segments?.join(','), showMembers, mode, meta]);
-    const hasOverflow = useHasOverflow(textRef);
-    const isAutoTitle = titleize(name) === title;
-    const noVisibleMembers = !dimensions.length && !measures.length && !segments.length;
+                map[memberName] = (_jsx(ListMember, { cube: cube ?? { name: cubeName }, member: { name: memberName }, category: "segments", filterString: filterString, memberViewType: memberViewType, isMissing: true, isSelected: true, onToggle: () => {
+                        dimensionsUpdater?.toggle(memberName);
+                        onMemberToggle?.(memberName);
+                    } }, memberName));
+            }
+            else {
+                map[memberName] = (_jsx(ListMember, { cube: cube, member: member, category: "segments", memberViewType: memberViewType, isSelected: usedMembers.includes(memberName), onToggle: () => {
+                        segmentsUpdater?.toggle(memberName);
+                    } }, memberName));
+            }
+            return map;
+        }, {});
+    }, [cacheOfMembers(query.segments), meta, memberViewType, filterString]);
+    const membersByFolderMap = folders.reduce((acc, folder) => {
+        acc[folder.name] = [];
+        acc[folder.name].push(
+        // sort hierarchies and dimensions together
+        ...[
+            ...hierarchyNames.filter((hierarchy) => folder.members.includes(hierarchy)),
+            ...dimensions.filter((dimension) => folder.members.includes(dimension)),
+        ].sort(sortFn), ...measures.filter((measure) => folder.members.includes(measure)), ...segments.filter((segment) => folder.members.includes(segment)));
+        return acc;
+    }, {});
+    membersByFolderMap[''] = [
+        // sort hierarchies and dimensions together
+        ...[
+            ...hierarchyNames.filter((hierarchy) => !folderMembers.includes(hierarchy)),
+            ...dimensions.filter((dimension) => !folderMembers.includes(dimension) && !hierarchyMembers.includes(dimension)),
+        ].sort(sortFn),
+        ...measures.filter((measure) => !folderMembers.includes(measure)),
+        ...segments.filter((segment) => !folderMembers.includes(segment)),
+    ];
+    // When switching between to and from search mode reset the open instances
+    // Leave the latest one, because that one is selected by the switch
     useEffect(() => {
-        setShowAllMembers(false);
-    }, [mode, filterString]);
-    if (noVisibleMembers) {
-        if (mode === 'query' && !isUsed) {
-            return null;
+        if (openFolders.length > 1) {
+            setOpenFolders([openFolders.slice(-1)[0]]);
         }
-        if (filterString && !isFiltered) {
-            return null;
+        if (openHierarchies.length > 1) {
+            setOpenHierarchies([openHierarchies.slice(-1)[0]]);
         }
-    }
+        if (openTimeDimensions.length > 1) {
+            setOpenTimeDimensions([openTimeDimensions.slice(-1)[0]]);
+        }
+    }, [filterString]);
+    useEffect(() => {
+        const folderNames = folders.map((folder) => folder.name);
+        if (mode === 'all') {
+            setOpenFolders(folderNames.filter((folderName) => membersByFolderMap[folderName].some((memberName) => usedMembers.includes(memberName) || usedHierarchies.includes(memberName))));
+        }
+        else {
+            setOpenFolders([]);
+            setOpenHierarchies([]);
+            setOpenTimeDimensions([]);
+        }
+    }, [mode]);
+    useEffect(() => {
+        if (!isOpen) {
+            setOpenFolders([]);
+            setOpenHierarchies([]);
+            setOpenTimeDimensions([]);
+        }
+    }, [isOpen]);
+    useEffect(() => {
+        const closeHiddenMembers = (openMembers) => {
+            return openMembers.filter((memberName) => {
+                return (
+                // if the hierarchy on the top level
+                membersByFolderMap[''].includes(memberName) ||
+                    // or if an open folder contains it
+                    openFolders.some((folderName) => {
+                        return folders
+                            .find((folder) => folder.name === folderName)
+                            ?.members.includes(memberName);
+                    }));
+            });
+        };
+        // When open folders changes, close all open hierarchies within closed folders
+        setOpenHierarchies(closeHiddenMembers);
+        // When open folders changes, close all open time dimensions within closed folders
+        setOpenTimeDimensions(closeHiddenMembers);
+    }, [openFolders]);
+    let mapElements = (members, skipHierarchies = false) => members
+        .map((memberName) => dimensionsElementMap[memberName] ??
+        measuresElementMap[memberName] ??
+        segmentElementMap[memberName] ??
+        (!skipHierarchies && hierarchiesElementMap[memberName]))
+        .filter((el) => el);
+    const hierarchiesElementMap = useMemo(() => {
+        return hierarchies.reduce((map, hierarchy) => {
+            const isHierarchyOpen = openHierarchies.includes(hierarchy.name);
+            const shownDimensions = hierarchy.levels.filter((dimensionName) => 
+            // Show all members if open and used ones when it's closed
+            !filterString
+                ? isHierarchyOpen || usedMembers?.includes(dimensionName)
+                : filteredDimensionNames.includes(dimensionName));
+            const children = mapElements(shownDimensions, true);
+            const isFiltered = filterString && filteredHierarchyNames.includes(hierarchy.name);
+            map[hierarchy.name] =
+                // That the place where we also hide the hierarchy if we show only used member
+                // and there are none of the inside this hierarchy
+                (!filterString && (mode === 'all' || shownDimensions.length) && isOpen) || isFiltered ? (_jsx(HierarchyMember, { cube: cube, isOpen: isHierarchyOpen && mode === 'all' && !filterString, member: hierarchy, memberViewType: memberViewType, filterString: filterString, onToggle: toggleHierarchy, children: children }, hierarchy.name)) : null;
+            return map;
+        }, {});
+    }, [
+        openHierarchies.join(),
+        dimensionsElementMap,
+        meta,
+        mode,
+        memberViewType,
+        filterString,
+        isOpen,
+    ]);
     if (filterString && isNonJoinable) {
         return null;
     }
+    const usedHierarchies = hierarchies
+        .filter((hierarchy) => {
+        return hierarchy.levels.find((member) => usedMembers.includes(member));
+    })
+        .map((hierarchy) => hierarchy.name);
     const memberList = (() => {
         if (showMembers) {
-            if (!noVisibleMembers) {
-                return (_jsxs(Space, { flow: "column", gap: "1bw", padding: "1ow 1x 0 4.5x", children: [dimensionsSection, measuresSection, segmentsSection, mode === 'query' ? (_jsx(Button, { type: "neutral", size: "small", icon: !showAllMembers ? _jsx(ArrowIcon, { direction: "bottom" }) : _jsx(ArrowIcon, { direction: "top" }), placeContent: "start", onPress: () => setShowAllMembers(!showAllMembers), children: !showAllMembers ? 'Show all members' : 'Hide unused members' })) : null] }));
+            if (mode === 'all' || !cube || queryStats[cubeName]?.isUsed) {
+                return (_jsxs(Space, { flow: "column", gap: "1bw", padding: "1ow 1ow 0 2.5x", children: [folders.map((folder) => {
+                            const isFolderOpen = openFolders.includes(folder.name);
+                            const shownMembers = membersByFolderMap[folder.name].filter((memberName) => !filterString
+                                ? isFolderOpen
+                                    ? true
+                                    : usedMembers.includes(memberName) || usedHierarchies.includes(memberName)
+                                : filteredMemberNames.includes(memberName) ||
+                                    filteredHierarchyNames.includes(memberName));
+                            const children = mapElements(shownMembers);
+                            return (!filterString
+                                ? (mode === 'all' || shownMembers.length) && isOpen
+                                : filteredFolderNames.includes(folder.name)) ? (_jsx(Folder, { name: folder.name, isOpen: !filterString && mode === 'all' && isFolderOpen, filterString: filterString, onToggle: toggleFolder, children: children }, folder.name)) : null;
+                        }), mapElements(membersByFolderMap[''].filter((memberName) => !filterString
+                            ? mode === 'all' ||
+                                usedMembers.includes(memberName) ||
+                                usedHierarchies.includes(memberName)
+                            : filteredMemberNames.includes(memberName) ||
+                                filteredHierarchyNames.includes(memberName))), mode === 'query' && !isMissing && onToggle && queryStats[cube?.name]?.isUsed ? (_jsx(Button, { type: "neutral", size: "small", icon: _jsx(ChevronIcon, { direction: "bottom" }), placeContent: "start", onPress: () => onToggle(true), children: "Show all members" })) : null] }));
             }
             else if (filterString) {
                 return null;
             }
-            else if (isOpen || mode === 'query') {
+            else if (isOpen) {
                 return (_jsxs(Block, { padding: ".5x 0 .5x 4.5x", children: ["No members", mode === 'query' ? ' selected' : ''] }));
             }
         }
@@ -242,13 +491,14 @@ export function SidePanelCubeItem({ isOpen, name, mode = 'all', isFiltered, isNo
             return null;
         }
     })();
+    const isLocked = isOpen && type === 'view' && !isQueryEmpty;
     const isCollapsable = isNonJoinable || !!filterString;
-    const cubeButton = (_jsxs(CubeButton, { qaVal: name, icon: isMissing ? (_jsx(QuestionCircleOutlined, { style: { color: 'var(--danger-text-color)' } })) : type === 'cube' ? (_jsx(CubeIcon, { color: "#purple" })) : (_jsx(ViewIcon, { color: "#purple" })), rightIcon: mode === 'all' && !isNonJoinable ? (_jsx(ArrowIconWrapper, { children: _jsx(ArrowIcon, { direction: !isCollapsable ? (isOpen ? 'top' : 'bottom') : 'right', style: { color: 'var(--purple-color)' } }) })) : isNonJoinable ? (_jsx(ArrowIconWrapper, {})) : undefined, mods: {
+    const cubeButton = (_jsxs(CubeButton, { qaVal: cubeName, icon: type === 'cube' ? (_jsx(CubeIcon, { color: isMissing ? '#danger-text' : '#purple' })) : (_jsx(ViewIcon, { color: isMissing ? '#danger-text' : '#purple' })), rightIcon: mode === 'all' && !isNonJoinable && !isLocked ? (_jsx(ArrowIconWrapper, { children: _jsx(ChevronIcon, { direction: !isCollapsable ? (isOpen ? 'top' : 'bottom') : 'right', style: { color: 'var(--purple-color)' } }) })) : undefined, mods: {
             open: isOpen,
             joinable: !isNonJoinable,
             missing: isMissing,
             collapsable: isCollapsable,
-        }, flow: "column", placeContent: "space-between", onPress: () => !isMissing && !isNonJoinable && onToggle?.(!isOpen), children: [_jsx(Text, { ref: textRef, ellipsis: true, children: filterString ? _jsx(FilteredLabel, { text: name, filter: filterString }) : name }), description ? _jsx(ItemInfoIcon, { title: title, description: description }) : undefined, isPrivate ? _jsx(NonPublicIcon, { type: "cube" }) : undefined] }));
-    return (_jsxs(Space, { flow: "column", gap: "0", children: [_jsx(CubeWrapper, { children: hasOverflow || !isAutoTitle ? (_jsx(TooltipProvider, { delay: 1000, title: _jsxs(_Fragment, { children: [_jsx(Text, { preset: "t4", children: _jsx("b", { children: name }) }), _jsx("br", {}), _jsx(Text, { preset: "t4", children: title })] }), placement: "right", children: cubeButton })) : (cubeButton) }), memberList] }));
+        }, flow: "column", placeContent: "space-between", onPress: () => !isMissing && !isNonJoinable && !isLocked && onToggle?.(!isOpen), children: [_jsx(Text, { ref: textRef, ellipsis: true, children: filterString ? _jsx(FilteredLabel, { text: shownName, filter: filterString }) : shownName }), _jsxs(Space, { padding: ".5x right", children: [description ? _jsx(ItemInfoIcon, { description: description }) : undefined, isPrivate ? _jsx(NonPublicIcon, { type: "cube" }) : undefined] })] }));
+    return (_jsxs(Space, { flow: "column", gap: "0", children: [_jsx(CubeWrapper, { children: _jsx(InstanceTooltipProvider, { name: cubeName, title: title, overflowRef: textRef, children: cubeButton }) }), memberList] }));
 }
 //# sourceMappingURL=SidePanelCubeItem.js.map