UI Element Visibility Control

Overview

The shortToFullMap mechanism provides a flexible way to control the visibility of UI elements through URL parameters, allowing both short and full identifiers for precise element hiding.

menu

Key Components

shortToFullMap

A mapping object that translates short identifiers to their full, canonical names for UI elements.

const shortToFullMap: Record<string, string> = {
  // Mode-related mappings
  schema: 'mode.schema',
  underlay: 'mode.underlay',
  venueShape: 'mode.venueShape',
  pricingZones: 'mode.pricingZones',
  pricing: 'mode.pricing',
  section: 'mode.section',

  // Tool-related mappings
  select: 'tool.select',
  seatRows: 'tool.seatRows',
  table: 'tool.table',

  shape: 'tool.shape',
  rect: 'tool.shape.rect',
  circle: 'tool.shape.circle',
  line: 'tool.shape.line',
  polygon: 'tool.shape.polygon',

  label: 'tool.label',
  selectSeats: 'tool.selectSeats',
  selectRows: 'tool.selectRows',
  addSeat: 'tool.addSeat',
  numberSeats: 'tool.numberSeats',
  selectSections: 'tool.selectSections',
  save: 'tool.save',
};

Mapping Categories

Mode Elements

Control different application modes:

  • schema: Schema mode
  • underlay: Underlay mode
  • venueShape: Venue shape mode
  • pricingZones: Pricing zones mode

Tool Elements

Control various interaction tools:

  • select: Selection tool
  • seatRows: Seat rows tool
  • shape: Shape drawing tools
    • rect: Rectangle shape
    • circle: Circle shape
    • line: Line drawing
    • polygon: Polygon drawing

Additional Tools

  • label: Labeling tool
  • selectSeats: Seat selection
  • save: Save functionality

Utility Functions

isHidden(title: string, hiddenItems: string[]): boolean

Determines whether a specific UI element should be hidden based on provided parameters.

Parameters

  • title: Full identifier of the UI element (e.g., ‘mode.schema’)
  • hiddenItems: Array of items to potentially hide

Example

const hiddenItems = ['pricing', 'select'];

getHiddenItemsFromURL(): string[]

Extracts hidden items directly from the current page’s URL query string.

Return Value

An array of item identifiers to be hidden.

Example URL

https://example.com/app?hidden=pricing,select,label

Usage Scenarios

URL-Based Element Hiding

  • Control UI element visibility by adding a hidden parameter to the URL.

Supported Formats

  • Short Identifiers: ?hidden=pricing,select
  • Full Identifiers: ?hidden=mode.pricing,tool.select
  • Mixed Identifiers: ?hidden=pricing,tool.select

Example URLs

  • Hide pricing and selection tools:
    • Copy/app/venues/42/schemas/295?hidden=pricing,select
  • Hide specific shape tools:
    • Copy/app/design?hidden=line,polygon

Best Practices

  • Use consistent naming in shortToFullMap
  • Prefer full identifiers for clarity
  • Validate and sanitize URL parameters
  • Handle cases where identifiers might not exist in the map

Advanced Configuration

  • Extend the shortToFullMap to include more UI elements as your application grows.

Potential Improvements

  • Add type safety with a predefined enum of allowed identifiers
  • Implement more sophisticated visibility logic
  • Add logging or debugging tools

Security Considerations

  • Sanitize URL parameters
  • Validate incoming hidden item lists
  • Prevent potential abuse of the hiding mechanism