@teambit/compositions.ui.composition-compare 0.0.259 → 0.0.260

package/dist/composition-compare.js

@@ -15,145 +15,474 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompositionCompare = CompositionCompare;
 const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
 const component_ui_component_compare_context_1 = require("@teambit/component.ui.component-compare.context");
 const compositions_1 = require("@teambit/compositions");
 const compositions_ui_hooks_use_composition_1 = require("@teambit/compositions.ui.hooks.use-composition");
 const component_ui_component_compare_hooks_use_component_compare_url_1 = require("@teambit/component.ui.component-compare.hooks.use-component-compare-url");
 const component_ui_component_compare_layouts_compare_split_layout_preset_1 = require("@teambit/component.ui.component-compare.layouts.compare-split-layout-preset");
 const design_ui_round_loader_1 = require("@teambit/design.ui.round-loader");
+const evangelist_elements_icon_1 = require("@teambit/evangelist.elements.icon");
+const base_react_navigation_link_1 = require("@teambit/base-react.navigation.link");
+const ui_foundation_ui_react_router_use_query_1 = require("@teambit/ui-foundation.ui.react-router.use-query");
 const query_string_1 = __importDefault(require("query-string"));
 const composition_dropdown_1 = require("./composition-dropdown");
 const composition_compare_context_1 = require("./composition-compare.context");
 const lodash_1 = require("lodash");
+const semver = __importStar(require("semver"));
 const composition_compare_module_scss_1 = __importDefault(require("./composition-compare.module.scss"));
+const noop = () => { };
+const LOCAL_VERSION = 'workspace';
+function MissingComposition({ compositionId, version }) {
+    const message = compositionId
+        ? `The selected composition "${compositionId}" does not exist for the ${version} version.`
+        : `The selected composition does not exist for the ${version} version.`;
+    return (react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.subView },
+        react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.missingComposition },
+            react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.missingCompositionTitle }, "Composition not available"),
+            react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.missingCompositionSubtitle }, message))));
+}
+function getCompositionTag(hasInBase, hasInCompare) {
+    if (hasInBase && hasInCompare)
+        return undefined;
+    if (hasInBase)
+        return 'Base only';
+    if (hasInCompare)
+        return 'Compare only';
+    return undefined;
+}
+function useResizePanel(initialHeight) {
+    const MIN_PANEL_HEIGHT = 80;
+    const MIN_COMPARE_HEIGHT = 150;
+    const DEFAULT_PANEL_RATIO = 0.34;
+    const [panelHeight, setPanelHeight] = (0, react_1.useState)(initialHeight);
+    const [isResizing, setIsResizing] = (0, react_1.useState)(false);
+    const panelRef = (0, react_1.useRef)(null);
+    const isDragging = (0, react_1.useRef)(false);
+    const panelHeightRef = (0, react_1.useRef)(initialHeight);
+    const removeListenersRef = (0, react_1.useRef)(null);
+    const rafRef = (0, react_1.useRef)(null);
+    const initializedRef = (0, react_1.useRef)(false);
+    const userResizedRef = (0, react_1.useRef)(false);
+    const getMaxPanelHeight = (0, react_1.useCallback)(() => {
+        var _a, _b;
+        const containerHeight = (_b = (_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.clientHeight;
+        if (!containerHeight)
+            return Math.max(MIN_PANEL_HEIGHT, initialHeight);
+        return Math.max(MIN_PANEL_HEIGHT, containerHeight - MIN_COMPARE_HEIGHT);
+    }, [MIN_COMPARE_HEIGHT, MIN_PANEL_HEIGHT, initialHeight]);
+    const getDefaultPanelHeight = (0, react_1.useCallback)(() => {
+        var _a, _b;
+        const containerHeight = (_b = (_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.clientHeight;
+        if (!containerHeight || containerHeight <= 0)
+            return initialHeight;
+        return Math.max(initialHeight, Math.round(containerHeight * DEFAULT_PANEL_RATIO));
+    }, [initialHeight, DEFAULT_PANEL_RATIO]);
+    const clampPanelHeight = (0, react_1.useCallback)((height) => {
+        const maxHeight = getMaxPanelHeight();
+        return Math.max(MIN_PANEL_HEIGHT, Math.min(maxHeight, height));
+    }, [MIN_PANEL_HEIGHT, getMaxPanelHeight]);
+    const applyPanelHeight = (0, react_1.useCallback)((height, commitToState = false) => {
+        const clamped = clampPanelHeight(height);
+        panelHeightRef.current = clamped;
+        if (panelRef.current)
+            panelRef.current.style.height = `${clamped}px`;
+        if (commitToState)
+            setPanelHeight(clamped);
+        return clamped;
+    }, [clampPanelHeight]);
+    const syncPanelHeight = (0, react_1.useCallback)(() => {
+        if (isDragging.current)
+            return;
+        const nextHeight = userResizedRef.current ? panelHeightRef.current : getDefaultPanelHeight();
+        applyPanelHeight(nextHeight, true);
+    }, [applyPanelHeight, getDefaultPanelHeight]);
+    (0, react_1.useEffect)(() => {
+        if (initializedRef.current)
+            return;
+        initializedRef.current = true;
+        syncPanelHeight();
+    }, [syncPanelHeight]);
+    (0, react_1.useEffect)(() => {
+        const handleWindowResize = () => {
+            syncPanelHeight();
+        };
+        handleWindowResize();
+        window.addEventListener('resize', handleWindowResize);
+        return () => window.removeEventListener('resize', handleWindowResize);
+    }, [syncPanelHeight]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const parent = (_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+        if (!parent)
+            return;
+        const observer = new ResizeObserver(() => {
+            syncPanelHeight();
+        });
+        observer.observe(parent);
+        return () => observer.disconnect();
+    }, [syncPanelHeight]);
+    const handleResizeStart = (0, react_1.useCallback)((e) => {
+        var _a;
+        e.preventDefault();
+        e.stopPropagation();
+        isDragging.current = true;
+        setIsResizing(true);
+        const startY = e.clientY;
+        const startHeight = panelHeightRef.current;
+        const handleMouseMove = (moveEvent) => {
+            if (!isDragging.current)
+                return;
+            moveEvent.preventDefault();
+            const delta = startY - moveEvent.clientY;
+            const targetHeight = startHeight + delta;
+            if (rafRef.current !== null)
+                cancelAnimationFrame(rafRef.current);
+            rafRef.current = requestAnimationFrame(() => {
+                applyPanelHeight(targetHeight);
+                rafRef.current = null;
+            });
+        };
+        const handleMouseUp = () => {
+            if (rafRef.current !== null) {
+                cancelAnimationFrame(rafRef.current);
+                rafRef.current = null;
+            }
+            userResizedRef.current = true;
+            isDragging.current = false;
+            applyPanelHeight(panelHeightRef.current, true);
+            setIsResizing(false);
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+            window.removeEventListener('blur', handleMouseUp);
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+        };
+        (_a = removeListenersRef.current) === null || _a === void 0 ? void 0 : _a.call(removeListenersRef);
+        document.body.style.cursor = 'ns-resize';
+        document.body.style.userSelect = 'none';
+        window.addEventListener('mousemove', handleMouseMove);
+        window.addEventListener('mouseup', handleMouseUp);
+        window.addEventListener('blur', handleMouseUp);
+        removeListenersRef.current = () => {
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+            window.removeEventListener('blur', handleMouseUp);
+        };
+    }, [applyPanelHeight]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            var _a;
+            isDragging.current = false;
+            if (rafRef.current !== null) {
+                cancelAnimationFrame(rafRef.current);
+                rafRef.current = null;
+            }
+            (_a = removeListenersRef.current) === null || _a === void 0 ? void 0 : _a.call(removeListenersRef);
+            removeListenersRef.current = null;
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+        };
+    }, []);
+    return { panelRef, panelHeight, isResizing, handleResizeStart };
+}
+function findComposition(compositions, id) {
+    if (!id || !compositions)
+        return compositions === null || compositions === void 0 ? void 0 : compositions[0];
+    return compositions.find((c) => c.identifier === id) || undefined;
+}
+function useCompositionSelection() {
+    const selectedCompositionBaseFile = (0, component_ui_component_compare_hooks_use_component_compare_url_1.useCompareQueryParam)('compositionBaseFile');
+    const selectedCompositionCompareFile = (0, component_ui_component_compare_hooks_use_component_compare_url_1.useCompareQueryParam)('compositionCompareFile');
+    return { selectedCompositionBaseFile, selectedCompositionCompareFile };
+}
+function buildChannelKey(prefix, idStr, compId) {
+    if (!idStr || !compId)
+        return undefined;
+    return `${prefix}:${idStr}:${compId}`;
+}
+function buildQueryParams(channelKey) {
+    const params = Object.assign({ livecontrols: true }, (channelKey ? { lcchannel: channelKey } : {}));
+    return { params, queryString: query_string_1.default.stringify(params) };
+}
+function buildUpdatedUrlFromQuery(query, pathname, queryParams) {
+    const queryObj = Object.fromEntries(query.entries());
+    const updatedObj = Object.assign(Object.assign({}, queryObj), queryParams);
+    const updatedQueryString = new URLSearchParams(updatedObj).toString();
+    return `${pathname}?${updatedQueryString}`;
+}
+function resolveVersion(model) {
+    var _a, _b;
+    const id = model === null || model === void 0 ? void 0 : model.id;
+    const versionFromField = (_b = (_a = id === null || id === void 0 ? void 0 : id.version) === null || _a === void 0 ? void 0 : _a.toString) === null || _b === void 0 ? void 0 : _b.call(_a);
+    const versionFromToString = typeof (id === null || id === void 0 ? void 0 : id.toString) === 'function' ? id.toString().split('@')[1] : undefined;
+    return versionFromField || versionFromToString;
+}
+function hasStableCompareData(contextLoading, base, compare) {
+    return !contextLoading && base !== undefined && compare !== undefined;
+}
+function resolveRequestedCompositionId({ selectedCompositionCompareFile, selectedCompositionBaseFile, compareStateId, baseStateId, compareCompositions, baseCompositions, }) {
+    var _a, _b;
+    const explicitId = selectedCompositionCompareFile || selectedCompositionBaseFile;
+    const stateId = compareStateId || baseStateId;
+    const defaultId = ((_a = compareCompositions === null || compareCompositions === void 0 ? void 0 : compareCompositions[0]) === null || _a === void 0 ? void 0 : _a.identifier) || ((_b = baseCompositions === null || baseCompositions === void 0 ? void 0 : baseCompositions[0]) === null || _b === void 0 ? void 0 : _b.identifier);
+    return explicitId || stateId || defaultId;
+}
+function resolveCompositionId(selectedComposition, requestedCompositionId) {
+    return (selectedComposition === null || selectedComposition === void 0 ? void 0 : selectedComposition.identifier) || requestedCompositionId;
+}
+function hasMissingComposition(requestedCompositionId, selectedComposition) {
+    return Boolean(requestedCompositionId && !selectedComposition);
+}
+function buildControlsResetKey(baseChannelKey, compareChannelKey) {
+    return `${baseChannelKey || ''}-${compareChannelKey || ''}`;
+}
+function formatVersionForLabel(version, opts) {
+    if (opts === null || opts === void 0 ? void 0 : opts.forceWorkspace)
+        return LOCAL_VERSION;
+    if (!version)
+        return undefined;
+    if (version === LOCAL_VERSION)
+        return LOCAL_VERSION;
+    return semver.valid(version) ? version : version.slice(0, 6);
+}
+function useStableControlLabels(baseModel, compareModel, compareHasLocalChanges) {
+    const baseVersion = (0, react_1.useMemo)(() => formatVersionForLabel(resolveVersion(baseModel)), [baseModel]);
+    const compareVersion = (0, react_1.useMemo)(() => formatVersionForLabel(resolveVersion(compareModel), { forceWorkspace: compareHasLocalChanges }), [compareModel, compareHasLocalChanges]);
+    const [stableVersions, setStableVersions] = (0, react_1.useState)({
+        base: baseVersion,
+        compare: compareVersion,
+    });
+    (0, react_1.useEffect)(() => {
+        setStableVersions((prev) => {
+            const nextBase = baseVersion !== null && baseVersion !== void 0 ? baseVersion : prev.base;
+            const nextCompare = compareVersion !== null && compareVersion !== void 0 ? compareVersion : prev.compare;
+            if (nextBase === prev.base && nextCompare === prev.compare)
+                return prev;
+            return { base: nextBase, compare: nextCompare };
+        });
+    }, [baseVersion, compareVersion]);
+    const effectiveBaseVersion = baseVersion !== null && baseVersion !== void 0 ? baseVersion : stableVersions.base;
+    const effectiveCompareVersion = compareVersion !== null && compareVersion !== void 0 ? compareVersion : stableVersions.compare;
+    return (0, react_1.useMemo)(() => ({
+        common: 'Common',
+        base: effectiveBaseVersion ? `Base version: ${effectiveBaseVersion}` : 'Base version',
+        compare: effectiveCompareVersion ? `Compare version: ${effectiveCompareVersion}` : 'Compare version',
+    }), [effectiveBaseVersion, effectiveCompareVersion]);
+}
+function CompositionLayout({ model, selected, queryParams, compositionParams, previewViewProps, emptyState, PreviewView, contextKey, isBase, isCompare, }) {
+    return (react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.subView },
+        react_1.default.createElement(composition_compare_context_1.CompositionCompareContext.Provider, { value: {
+                compositionProps: Object.assign(Object.assign({ forceHeight: undefined, innerBottomPadding: 50 }, previewViewProps), { emptyState, component: model, queryParams,
+                    selected }),
+                isBase,
+                isCompare,
+            } },
+            react_1.default.createElement(compositions_ui_hooks_use_composition_1.CompositionContextProvider, { queryParams: compositionParams, setQueryParams: noop },
+                react_1.default.createElement(PreviewView, Object.assign({ key: contextKey, forceHeight: undefined, innerBottomPadding: 50 }, previewViewProps, { emptyState: emptyState, component: model, selected: selected, queryParams: queryParams }))))));
+}
 function CompositionCompare(props) {
     var _a, _b, _c, _d, _e, _f, _g;
-    const { emptyState, PreviewView = compositions_1.CompositionContent, Widgets, previewViewProps = {} } = props;
+    const { emptyState, PreviewView = compositions_1.CompositionContent, Widgets, previewViewProps = {}, } = props;
     const componentCompareContext = (0, component_ui_component_compare_context_1.useComponentCompare)();
-    const { base, compare, baseContext, compareContext } = componentCompareContext || {};
+    const query = (0, ui_foundation_ui_react_router_use_query_1.useQuery)();
+    const location = (0, base_react_navigation_link_1.useLocation)() || { pathname: '/' };
+    const { base, compare, baseContext, compareContext, loading: contextLoading } = componentCompareContext || {};
+    const [isControlsOpen, setControlsOpen] = (0, react_1.useState)(true);
+    const [controlsStatus, setControlsStatus] = (0, react_1.useState)('loading');
+    const [everHadControls, setEverHadControls] = (0, react_1.useState)(false);
+    const { panelRef, panelHeight, isResizing, handleResizeStart } = useResizePanel(240);
+    const isStableData = hasStableCompareData(contextLoading, base, compare);
     const baseCompositions = base === null || base === void 0 ? void 0 : base.model.compositions;
     const compareCompositions = compare === null || compare === void 0 ? void 0 : compare.model.compositions;
-    const selectedCompositionBaseFile = (0, component_ui_component_compare_hooks_use_component_compare_url_1.useCompareQueryParam)('compositionBaseFile');
-    const selectedCompositionCompareFile = (0, component_ui_component_compare_hooks_use_component_compare_url_1.useCompareQueryParam)('compositionCompareFile');
-    const baseState = (_a = baseContext === null || baseContext === void 0 ? void 0 : baseContext.state) === null || _a === void 0 ? void 0 : _a.preview;
-    const compareState = (_b = compareContext === null || compareContext === void 0 ? void 0 : compareContext.state) === null || _b === void 0 ? void 0 : _b.preview;
-    const baseHooks = (_c = baseContext === null || baseContext === void 0 ? void 0 : baseContext.hooks) === null || _c === void 0 ? void 0 : _c.preview;
-    const compareHooks = (_d = compareContext === null || compareContext === void 0 ? void 0 : compareContext.hooks) === null || _d === void 0 ? void 0 : _d.preview;
-    const selectedBaseFromState = baseState === null || baseState === void 0 ? void 0 : baseState.id;
-    const selectedCompareFromState = compareState === null || compareState === void 0 ? void 0 : compareState.id;
-    const selectedBaseCompositionId = selectedBaseFromState || selectedCompositionBaseFile;
-    const selectedCompositionCompareId = selectedCompareFromState || selectedCompositionCompareFile;
-    const selectedBaseComp = (selectedBaseCompositionId &&
-        baseCompositions &&
-        baseCompositions.find((c) => {
-            return c.identifier === selectedBaseCompositionId;
-        })) ||
-        (baseCompositions && baseCompositions[0]);
-    const selectedCompareComp = (selectedCompositionCompareId &&
-        compareCompositions &&
-        compareCompositions.find((c) => {
-            return c.identifier === selectedCompositionCompareId;
-        })) ||
-        (compareCompositions && compareCompositions[0]);
-    // const baseCompositionDropdownSource =
-    //   baseCompositions?.map((c) => {
-    //     const href = !baseState?.controlled
-    //       ? useUpdatedUrlFromQuery({
-    //         compositionBaseFile: c.identifier,
-    //         compositionCompareFile: selectedCompareComp?.identifier,
-    //       })
-    //       : useUpdatedUrlFromQuery({});
-    //     const onClick = baseState?.controlled ? baseHooks?.onClick : undefined;
-    //     return { id: c.identifier, label: c.displayName, href, onClick };
-    //   }) || [];
-    // const compareCompositionDropdownSource =
-    //   compareCompositions?.map((c) => {
-    //     const href = !compareState?.controlled
-    //       ? useUpdatedUrlFromQuery({
-    //         compositionBaseFile: selectedBaseComp?.identifier,
-    //         compositionCompareFile: c.identifier,
-    //       })
-    //       : useUpdatedUrlFromQuery({});
-    //     const onClick = compareState?.controlled ? () => compareHooks?.onClick : undefined;
-    //     return { id: c.identifier, label: c.displayName, href, onClick };
-    //   }) || [];
-    const compositionsDropdownSource = (_e = (0, lodash_1.uniqBy)((baseCompositions || []).concat(compareCompositions || []), 'identifier')) === null || _e === void 0 ? void 0 : _e.map((c) => {
-        const href = !(compareState === null || compareState === void 0 ? void 0 : compareState.controlled)
-            ? (0, component_ui_component_compare_hooks_use_component_compare_url_1.useUpdatedUrlFromQuery)({
-                compositionBaseFile: selectedBaseComp === null || selectedBaseComp === void 0 ? void 0 : selectedBaseComp.identifier,
-                compositionCompareFile: c.identifier,
-            })
-            : (0, component_ui_component_compare_hooks_use_component_compare_url_1.useUpdatedUrlFromQuery)({});
-        const onClick = (compareState === null || compareState === void 0 ? void 0 : compareState.controlled) ? (_, __) => {
-            var _a, _b;
-            (_a = compareHooks === null || compareHooks === void 0 ? void 0 : compareHooks.onClick) === null || _a === void 0 ? void 0 : _a.call(compareHooks, _, __);
-            (_b = baseHooks === null || baseHooks === void 0 ? void 0 : baseHooks.onClick) === null || _b === void 0 ? void 0 : _b.call(baseHooks, _, __);
-        } : undefined;
-        return { id: c.identifier, label: c.displayName, href, onClick };
-    });
-    const [baseCompositionParams, setBaseCompositionParams] = (0, react_1.useState)({});
-    const baseCompQueryParams = (0, react_1.useMemo)(() => query_string_1.default.stringify(baseCompositionParams), [baseCompositionParams]);
-    const [compareCompositionParams, setCompareCompositionParams] = (0, react_1.useState)({});
-    const compareCompQueryParams = (0, react_1.useMemo)(() => query_string_1.default.stringify(compareCompositionParams), [compareCompositionParams]);
-    const selectedBaseDropdown = selectedBaseComp && {
-        id: selectedBaseComp.identifier,
-        label: selectedBaseComp.displayName,
-    };
-    const selectedCompareDropdown = selectedCompareComp && {
-        id: selectedCompareComp.identifier,
-        label: selectedCompareComp.displayName,
-    };
+    const { selectedCompositionBaseFile, selectedCompositionCompareFile } = useCompositionSelection();
+    const compareState = (_a = compareContext === null || compareContext === void 0 ? void 0 : compareContext.state) === null || _a === void 0 ? void 0 : _a.preview;
+    const baseHooks = (_b = baseContext === null || baseContext === void 0 ? void 0 : baseContext.hooks) === null || _b === void 0 ? void 0 : _b.preview;
+    const compareHooks = (_c = compareContext === null || compareContext === void 0 ? void 0 : compareContext.hooks) === null || _c === void 0 ? void 0 : _c.preview;
+    const requestedCompositionId = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        return resolveRequestedCompositionId({
+            selectedCompositionCompareFile,
+            selectedCompositionBaseFile,
+            compareStateId: compareState === null || compareState === void 0 ? void 0 : compareState.id,
+            baseStateId: (_b = (_a = baseContext === null || baseContext === void 0 ? void 0 : baseContext.state) === null || _a === void 0 ? void 0 : _a.preview) === null || _b === void 0 ? void 0 : _b.id,
+            compareCompositions,
+            baseCompositions,
+        });
+    }, [
+        selectedCompositionCompareFile,
+        selectedCompositionBaseFile,
+        compareState === null || compareState === void 0 ? void 0 : compareState.id,
+        (_e = (_d = baseContext === null || baseContext === void 0 ? void 0 : baseContext.state) === null || _d === void 0 ? void 0 : _d.preview) === null || _e === void 0 ? void 0 : _e.id,
+        compareCompositions,
+        baseCompositions,
+    ]);
+    const selectedBaseComp = findComposition(baseCompositions, requestedCompositionId);
+    const selectedCompareComp = findComposition(compareCompositions, requestedCompositionId);
+    const baseMissing = hasMissingComposition(requestedCompositionId, selectedBaseComp);
+    const compareMissing = hasMissingComposition(requestedCompositionId, selectedCompareComp);
+    const baseCompositionIds = (0, react_1.useMemo)(() => new Set((baseCompositions || []).map((c) => c.identifier)), [baseCompositions]);
+    const compareCompositionIds = (0, react_1.useMemo)(() => new Set((compareCompositions || []).map((c) => c.identifier)), [compareCompositions]);
+    const compositionsDropdownSource = (0, react_1.useMemo)(() => {
+        var _a;
+        return (_a = (0, lodash_1.uniqBy)((baseCompositions || []).concat(compareCompositions || []), 'identifier')) === null || _a === void 0 ? void 0 : _a.map((c) => {
+            const hasInBase = baseCompositionIds.has(c.identifier);
+            const hasInCompare = compareCompositionIds.has(c.identifier);
+            const tag = getCompositionTag(hasInBase, hasInCompare);
+            const href = !(compareState === null || compareState === void 0 ? void 0 : compareState.controlled)
+                ? buildUpdatedUrlFromQuery(query, location.pathname, {
+                    compositionBaseFile: c.identifier,
+                    compositionCompareFile: c.identifier,
+                })
+                : buildUpdatedUrlFromQuery(query, location.pathname, {});
+            const onClick = (compareState === null || compareState === void 0 ? void 0 : compareState.controlled)
+                ? (id, e) => {
+                    var _a, _b;
+                    (_a = compareHooks === null || compareHooks === void 0 ? void 0 : compareHooks.onClick) === null || _a === void 0 ? void 0 : _a.call(compareHooks, id, e);
+                    (_b = baseHooks === null || baseHooks === void 0 ? void 0 : baseHooks.onClick) === null || _b === void 0 ? void 0 : _b.call(baseHooks, id, e);
+                }
+                : undefined;
+            return { id: c.identifier, label: c.displayName, href, onClick, tag };
+        });
+    }, [
+        baseCompositions,
+        compareCompositions,
+        baseCompositionIds,
+        compareCompositionIds,
+        compareState === null || compareState === void 0 ? void 0 : compareState.controlled,
+        compareHooks,
+        baseHooks,
+        query,
+        location.pathname,
+    ]);
+    const selectedCompareDropdown = (0, react_1.useMemo)(() => {
+        const found = compositionsDropdownSource.find((item) => item.id === (selectedCompareComp === null || selectedCompareComp === void 0 ? void 0 : selectedCompareComp.identifier)) ||
+            compositionsDropdownSource.find((item) => item.id === (selectedBaseComp === null || selectedBaseComp === void 0 ? void 0 : selectedBaseComp.identifier));
+        if (found)
+            return found;
+        if (requestedCompositionId)
+            return { id: requestedCompositionId, label: requestedCompositionId, tag: 'Missing' };
+        return undefined;
+    }, [
+        compositionsDropdownSource,
+        selectedCompareComp === null || selectedCompareComp === void 0 ? void 0 : selectedCompareComp.identifier,
+        selectedBaseComp === null || selectedBaseComp === void 0 ? void 0 : selectedBaseComp.identifier,
+        requestedCompositionId,
+    ]);
+    const baseIdStr = (_f = base === null || base === void 0 ? void 0 : base.model.id) === null || _f === void 0 ? void 0 : _f.toString();
+    const compareIdStr = (_g = compare === null || compare === void 0 ? void 0 : compare.model.id) === null || _g === void 0 ? void 0 : _g.toString();
+    (0, compositions_1.useDefaultControlsSchemaResponder)(baseIdStr, Boolean(baseIdStr));
+    (0, compositions_1.useDefaultControlsSchemaResponder)(compareIdStr, Boolean(compareIdStr));
+    const baseCompId = resolveCompositionId(selectedBaseComp, requestedCompositionId);
+    const compareCompId = resolveCompositionId(selectedCompareComp, requestedCompositionId);
+    const baseChannelKey = (0, react_1.useMemo)(() => buildChannelKey('base', baseIdStr, baseCompId), [baseIdStr, baseCompId]);
+    const compareChannelKey = (0, react_1.useMemo)(() => buildChannelKey('compare', compareIdStr, compareCompId), [compareIdStr, compareCompId]);
+    const baseQuery = (0, react_1.useMemo)(() => buildQueryParams(baseChannelKey), [baseChannelKey]);
+    const compareQuery = (0, react_1.useMemo)(() => buildQueryParams(compareChannelKey), [compareChannelKey]);
+    const controlsResetKey = buildControlsResetKey(baseChannelKey, compareChannelKey);
+    const hasControlChannels = Boolean(baseChannelKey && compareChannelKey);
+    (0, react_1.useEffect)(() => {
+        setEverHadControls(false);
+        setControlsStatus('loading');
+    }, [controlsResetKey]);
+    const handleControlsStatusChange = (0, react_1.useCallback)((status) => {
+        setControlsStatus(status);
+        if (status === 'available')
+            setEverHadControls(true);
+    }, []);
+    const showControlsPanel = controlsStatus === 'available' || everHadControls;
+    const baseModel = base === null || base === void 0 ? void 0 : base.model;
+    const compareModel = compare === null || compare === void 0 ? void 0 : compare.model;
+    const stableLabels = useStableControlLabels(baseModel, compareModel, compare === null || compare === void 0 ? void 0 : compare.hasLocalChanges);
     const BaseLayout = (0, react_1.useMemo)(() => {
-        if (base === undefined) {
+        if (!isStableData || !baseChannelKey || !baseModel)
             return null;
-        }
-        const baseCompModel = base.model;
-        const compositionProps = Object.assign(Object.assign({ forceHeight: undefined, innerBottomPadding: 50 }, previewViewProps), { emptyState, component: baseCompModel, queryParams: baseCompQueryParams, selected: selectedCompareComp });
-        return (react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.subView },
-            react_1.default.createElement(composition_compare_context_1.CompositionCompareContext.Provider, { value: { compositionProps, isBase: true } },
-                react_1.default.createElement(compositions_ui_hooks_use_composition_1.CompositionContextProvider, { queryParams: baseCompositionParams, setQueryParams: setBaseCompositionParams },
-                    react_1.default.createElement(PreviewView, Object.assign({ forceHeight: undefined, innerBottomPadding: 50 }, previewViewProps, { emptyState: emptyState, component: baseCompModel, selected: selectedCompareComp, queryParams: baseCompQueryParams }))))));
-    }, [base, selectedCompareComp === null || selectedCompareComp === void 0 ? void 0 : selectedCompareComp.identifier]);
+        if (baseMissing)
+            return react_1.default.createElement(MissingComposition, { compositionId: requestedCompositionId, version: "base" });
+        return (react_1.default.createElement(CompositionLayout, { model: baseModel, selected: selectedBaseComp, queryParams: baseQuery.queryString, compositionParams: baseQuery.params, previewViewProps: previewViewProps, emptyState: emptyState, PreviewView: PreviewView, contextKey: `base-${baseIdStr}-${baseCompId}`, isBase: true }));
+    }, [
+        isStableData,
+        baseModel,
+        baseIdStr,
+        baseCompId,
+        baseChannelKey,
+        selectedBaseComp === null || selectedBaseComp === void 0 ? void 0 : selectedBaseComp.identifier,
+        baseQuery,
+        previewViewProps,
+        emptyState,
+        baseMissing,
+        requestedCompositionId,
+    ]);
     const CompareLayout = (0, react_1.useMemo)(() => {
-        if (compare === undefined) {
+        if (!isStableData || !compareChannelKey || !compareModel)
             return null;
-        }
-        const compareCompModel = compare.model;
-        const compositionProps = Object.assign(Object.assign({ forceHeight: undefined, innerBottomPadding: 50 }, previewViewProps), { emptyState, component: compareCompModel, queryParams: compareCompQueryParams, selected: selectedCompareComp });
-        return (react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.subView },
-            react_1.default.createElement(composition_compare_context_1.CompositionCompareContext.Provider, { value: { compositionProps, isCompare: true } },
-                react_1.default.createElement(compositions_ui_hooks_use_composition_1.CompositionContextProvider, { queryParams: compareCompositionParams, setQueryParams: setCompareCompositionParams },
-                    react_1.default.createElement(PreviewView, Object.assign({ forceHeight: undefined, innerBottomPadding: 50 }, previewViewProps, { emptyState: emptyState, component: compareCompModel, queryParams: compareCompQueryParams, selected: selectedCompareComp }))))));
-    }, [compare, selectedCompareComp === null || selectedCompareComp === void 0 ? void 0 : selectedCompareComp.identifier]);
-    const CompositionToolbar = () => {
-        if (!base && !compare) {
-            return null;
-        }
-        return (react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.toolbar },
+        if (compareMissing)
+            return react_1.default.createElement(MissingComposition, { compositionId: requestedCompositionId, version: "compare" });
+        return (react_1.default.createElement(CompositionLayout, { model: compareModel, selected: selectedCompareComp, queryParams: compareQuery.queryString, compositionParams: compareQuery.params, previewViewProps: previewViewProps, emptyState: emptyState, PreviewView: PreviewView, contextKey: `compare-${compareIdStr}-${compareCompId}`, isCompare: true }));
+    }, [
+        isStableData,
+        compareModel,
+        compareIdStr,
+        compareCompId,
+        compareChannelKey,
+        selectedCompareComp === null || selectedCompareComp === void 0 ? void 0 : selectedCompareComp.identifier,
+        compareQuery,
+        previewViewProps,
+        emptyState,
+        compareMissing,
+        requestedCompositionId,
+    ]);
+    const toggleControls = (0, react_1.useCallback)(() => setControlsOpen((x) => !x), []);
+    const handleHeaderKeyDown = (0, react_1.useCallback)((e) => {
+        if (e.key === 'Enter' || e.key === ' ')
+            toggleControls();
+    }, [toggleControls]);
+    if (!base && !compare)
+        return null;
+    const key = `${base === null || base === void 0 ? void 0 : base.model.id.toString()}-${compare === null || compare === void 0 ? void 0 : compare.model.id.toString()}-composition-compare`;
+    return (react_1.default.createElement("div", { key: key, className: (0, classnames_1.default)(composition_compare_module_scss_1.default.container, { [composition_compare_module_scss_1.default.isResizing]: isResizing }) },
+        contextLoading && (react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.loader },
+            react_1.default.createElement(design_ui_round_loader_1.RoundLoader, null))),
+        react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.toolbar },
             react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.left },
                 react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.dropdown }, compositionsDropdownSource.length > 0 && (react_1.default.createElement(composition_dropdown_1.CompositionDropdown, { dropdownItems: compositionsDropdownSource, selected: selectedCompareDropdown }))),
                 react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.widgets }, Widgets === null || Widgets === void 0 ? void 0 : Widgets.Left)),
             react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.right },
-                react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.widgets }, Widgets === null || Widgets === void 0 ? void 0 : Widgets.Right))));
-    };
-    const key = `${(_f = componentCompareContext === null || componentCompareContext === void 0 ? void 0 : componentCompareContext.base) === null || _f === void 0 ? void 0 : _f.model.id.toString()}-${(_g = componentCompareContext === null || componentCompareContext === void 0 ? void 0 : componentCompareContext.compare) === null || _g === void 0 ? void 0 : _g.model.id.toString()}-composition-compare`;
-    return (react_1.default.createElement(react_1.default.Fragment, { key: key },
-        (componentCompareContext === null || componentCompareContext === void 0 ? void 0 : componentCompareContext.loading) && (react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.loader },
-            react_1.default.createElement(design_ui_round_loader_1.RoundLoader, null))),
-        react_1.default.createElement(CompositionToolbar, null),
-        react_1.default.createElement(component_ui_component_compare_layouts_compare_split_layout_preset_1.CompareSplitLayoutPreset, { base: BaseLayout, compare: CompareLayout })));
+                react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.widgets }, Widgets === null || Widgets === void 0 ? void 0 : Widgets.Right))),
+        react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.compareLayout },
+            react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.compareMain },
+                react_1.default.createElement(component_ui_component_compare_layouts_compare_split_layout_preset_1.CompareSplitLayoutPreset, { base: BaseLayout, compare: CompareLayout })),
+            hasControlChannels && (react_1.default.createElement("div", { ref: panelRef, className: composition_compare_module_scss_1.default.controlsPanel, style: showControlsPanel ? (isControlsOpen ? { height: panelHeight } : undefined) : { display: 'none' } },
+                react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.controlsResizeHandle, onMouseDown: handleResizeStart, role: "separator", "aria-orientation": "horizontal" }),
+                react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.controlsPanelHeader, onClick: toggleControls, onKeyDown: handleHeaderKeyDown, role: "button", tabIndex: 0 },
+                    react_1.default.createElement(evangelist_elements_icon_1.Icon, { of: isControlsOpen ? 'fat-arrow-down' : 'fat-arrow-up', className: composition_compare_module_scss_1.default.controlsArrow }),
+                    react_1.default.createElement("span", { className: composition_compare_module_scss_1.default.controlsPanelTitle }, "Live controls")),
+                react_1.default.createElement("div", { className: composition_compare_module_scss_1.default.controlsPanelContent, style: { display: isControlsOpen ? undefined : 'none' } },
+                    react_1.default.createElement(compositions_1.LiveControlsDiffPanel, { resetKey: controlsResetKey, baseChannel: baseChannelKey, compareChannel: compareChannelKey, commonLabel: stableLabels.common, baseLabel: stableLabels.base, compareLabel: stableLabels.compare, showEmptyState: false, onStatusChange: handleControlsStatusChange })))))));
 }
 //# sourceMappingURL=composition-compare.js.map