Data Browser

The Data Browser is a comprehensive component designed for navigating and interacting with datasets. It provides a flexible layout with configurable panels, headers, and content areas, making it ideal for applications that require complex data exploration interfaces.

Basic Usage

The Data Browser component uses a modular structure that allows you to compose different elements to build your interface:

<lmn-data-browser>
  <!-- Header with filters, actions, and controls -->
  <lmn-data-browser-header>
    <div lmn-position-start><!-- Start-aligned header content --></div>
    <div lmn-position-center><!-- Center-aligned header content --></div>
    <div lmn-position-end><!-- End-aligned header content --></div>
  </lmn-data-browser-header>
  
  <!-- Left-side panel for filters, navigation, etc. -->
  <lmn-data-browser-panel lmn-position-start [open]="isLeftPanelOpen">
    <!-- Panel content -->
  </lmn-data-browser-panel>
  
  <!-- Main content area -->
  <div lmn-data-browser-content>
    <!-- Main content -->
  </div>
  
  <!-- Right-side panel for details, settings, etc. -->
  <lmn-data-browser-panel lmn-position-end [open]="isRightPanelOpen">
    <!-- Panel content -->
  </lmn-data-browser-panel>
</lmn-data-browser>

Component Anatomy

The Data Browser consists of several distinct components working together to create a cohesive user interface for data exploration:

Main Container

The <lmn-data-browser> is the root container that orchestrates the layout and behavior of all child components. It manages the overall structure and provides the context for panels and headers.

Header Component

The <lmn-data-browser-header> component provides a dedicated area at the top of the browser for controls, filters, and actions. It supports three position slots:

• lmn-position-start: For content aligned to the start (left in LTR layouts)
• lmn-position-center: For centrally aligned content
• lmn-position-end: For content aligned to the end (right in LTR layouts)

Panel Components

The <lmn-data-browser-panel> components are side panels that can be positioned at either the start or end of the browser. They can be:

• Opened and closed dynamically
• Resized by users (when enabled)
• Configured with various styling and behavior options

Content Area

The content area is defined using the lmn-data-browser-content attribute on a container element. This area displays the primary content and adjusts based on the state of surrounding panels.

Header Slots

For organizing content within the header, you can use the <lmn-data-browser-header-slot> component inside any position slot to group related elements with consistent spacing.

Features and Configuration

The Data Browser offers extensive configuration options to adapt to various use cases:

Data Browser Properties

Panel Properties

Panel Positioning

Panels can be positioned at either side of the browser using attributes:

• lmn-position-start: Places the panel at the start (left in LTR layouts)
• lmn-position-end: Places the panel at the end (right in LTR layouts)

Panel Methods

The panel component exposes methods for programmatic control:

• toggle(): Toggles the open state of the panel
• show(): Opens the panel
• hide(): Closes the panel
• setInput(name, value): Sets an input property programmatically

Responsive Behavior

The Data Browser is built with responsiveness in mind:

• It automatically detects the available width and adjusts its layout
• On mobile (width zone 'md'), it prevents multiple panels from being open simultaneously
• Width zones are tracked and can be accessed through the widthZone signal

Panel Resizing

When allowResize is enabled on panels, users can adjust their width:

• Resize handles appear on the appropriate edge of the panel
• Minimum and maximum widths are enforced through CSS variables
• The component maintains the user's preferred width

Styling Customization

The Data Browser can be customized through CSS variables:

:root {
  --lmn-data-browser-panel-width-default: 320px; /* Default panel width */
  --lmn-data-browser-panel-width-min: 240px;     /* Minimum panel width */
  --lmn-data-browser-panel-width-max: 480px;     /* Maximum panel width */
  --lmn-data-browser-elements-gap: var(--lmn-spacing-2); /* Gap between header elements */
}

Accessibility

The Data Browser implements several accessibility features:

• Appropriate ARIA roles (region for the browser and panels)
• Focus management for panel open/close actions
• Keyboard-accessible resize handles (when enabled)
• Inert attribute management to prevent interaction with hidden panels
• Customizable ARIA attributes for the close button

When using the Data Browser, ensure that:

1. Each panel has a meaningful label or heading
2. Focus is properly managed when opening/closing panels
3. Content within panels is structured with appropriate heading levels
4. Interactive elements within panels are keyboard accessible

Panel Interaction

The Data Browser intelligently manages panel interaction:

• Only one panel can be open on each side (start/end) at a time
• When a new panel is opened, any previously open panel on the same side is automatically closed
• On mobile viewports, only one panel can be open at a time across all sides

This behavior helps maintain a clean and usable interface without overwhelming the user with too many open panels.