Skip to main content

didHidePanel

Indicates that the panel has been hidden from the user.

Overview​

Call this method when your application hides the Maestro panel from the user. This allows the SDK to update its internal state, clean up resources, and trigger any necessary analytics events.

Method Signature​

didHidePanel(): Promise<void>

Parameters​

This method does not take any parameters.

Return Value​

A Promise that resolves when the internal state has been updated and cleanup has completed.

Example Usage​

import SDK from '@maestro_io/maestro-web-sdk';

// Function to hide the panel
async function hidePanel() {
  try {
    // Call the unmount function to remove the panel from the DOM
    // This assumes you've stored the unmount function when showing the panel
    if (this.unmountFunction) {
      this.unmountFunction();
      this.unmountFunction = null;
    }
    
    // Update the DOM to hide the panel (your application specific code)
    document.getElementById('panel-container').classList.remove('visible');
    
    // Get the event view model
    const event = SDK.getMaestroEventViewModel();
    
    // Notify the SDK that the panel is now hidden
    await event.didHidePanel();
    
    return true;
  } catch (error) {
    console.error('Failed to hide panel:', error);
    return false;
  }
}

Usage with React​

import React, { useEffect, useState } from 'react';
import SDK from '@maestro_io/maestro-web-sdk';

function PanelComponent() {
  const [isPanelVisible, setIsPanelVisible] = useState(false);
  const [unmountFunction, setUnmountFunction] = useState(null);
  
  const hidePanel = async () => {
    try {
      // Unmount the panel UI
      if (unmountFunction) {
        unmountFunction();
        setUnmountFunction(null);
      }
      
      // Notify the SDK that the panel is hidden
      const event = SDK.getMaestroEventViewModel();
      await event.didHidePanel();
      
      setIsPanelVisible(false);
    } catch (error) {
      console.error('Failed to hide panel:', error);
    }
  };
  
  // Hide panel when component unmounts
  useEffect(() => {
    return () => {
      if (isPanelVisible && unmountFunction) {
        unmountFunction();
        
        // Try to notify the SDK that the panel is hidden
        try {
          const event = SDK.getMaestroEventViewModel();
          event.didHidePanel();
        } catch (error) {
          console.error('Error during cleanup:', error);
        }
      }
    };
  }, [isPanelVisible, unmountFunction]);
  
  // Rest of component...
}

Internal Behavior​

When didHidePanel() is called, the SDK performs the following operations:

  1. Cleans up any error states (if appropriate)
  2. Pauses focus management to prevent focus from being captured by the panel
  3. May trigger analytics events to track panel usage
  4. Resets certain internal state related to panel visibility

Notes​

  • Always call this method after the panel has been successfully hidden from the user.
  • This method should be paired with a call to the unmount function returned by renderPanel().
  • Make sure to call this method as part of your cleanup process when the user navigates away from the event or when your component unmounts.
  • There is a small delay (500ms) built into this method to avoid potential issues with live updates.
  • If you're implementing a toggle for the panel, make sure to call didShowPanel() when showing it and didHidePanel() when hiding it.

Error Handling​

If the panel is hidden due to an error condition, the SDK will handle certain error states:

// Example of error handling in didHidePanel implementation
async didHidePanel(): Promise<void> {
  // If there's an "unpopulatedEvent" error, this will clear it
  // when the panel is hidden, as it might be resolved when shown again
  if (this.keyPlaysViewModel.errorState.value === 'unpopulatedEvent') {
    this.keyPlaysViewModel.errorState.value = null;
  }

  // Wait a half second to start gathering data to avoid live update artifacts
  await new Promise((resolve) => setTimeout(resolve, 500));

  // Pause focus management
  pause();
}

This method handles error states gracefully, so you can safely call it even if there were issues with the panel.

Last updated on