Components - digitalcityscience/TOSCA-2 GitHub Wiki

Components & UI

This project follows a modular component-based architecture using Vue 3. Components are categorized into logical groups and stored inside the src/components/ directory. This section provides an in-depth explanation of each folder, its purpose, and when to use the components inside it.

Component Library

This project extensively uses PrimeVue as a component library for UI elements such as buttons, dialogs, tables, and forms. PrimeVue components are used across the project to ensure consistency, responsiveness, and accessibility.

Key PrimeVue Components Used:

  • Button – Used for standard actions across the application.
  • Dialog – Provides modal dialogs for various interactions.
  • DataTable – Displays structured tabular data with sorting and filtering capabilities.
  • Dropdown – Used for selecting options from predefined lists.
  • InputText – Handles user input fields.

Where & How PrimeVue is Used:

  • All form elements use PrimeVue components (InputText, Dropdown, Button, etc.).
  • Data listings and tables are implemented using DataTable.
  • Dialogs (Dialog) are used for pop-up interactions.
  • Styled UI elements such as buttons, panels, and tooltips come from PrimeVue.

Developers should use PrimeVue components instead of manually styling basic UI elements to maintain design consistency.

Component Structure

📂 components
 ┣ 📂 Base            # Reusable UI components
 ┣ 📂 Data            # Components handling geoserver data visualization
 ┣ 📂 Geostories      # Components for geospatial storytelling
 ┣ 📂 Map             # Map-related components (MapLibre)
 ┣ 📂 Participation   # Citizen participation UI components

1. Base Components

Purpose: These are foundational UI components that provide basic reusable elements such as sidebars, buttons, and chip wrappers.

Key Components

  • BaseSidebarComponent.vue – A flexible sidebar component that can hold any content.
  • ChipWrapper.vue – A wrapper for displaying filter or category chips.

When to Use:

  • Use BaseSidebarComponent.vue when creating a sidebar that requires dynamic content.
  • Use ChipWrapper.vue when displaying categorized filters or tags.

2. Data Components

Purpose: These components handle geoserver data listing, displaying structured information in lists.

Key Components

  • WorkspaceLayerListing.vue – Displays a list of layers under specific workspace.
  • WorkspaceRasterLayerListingItem.vue – Represents a raster layer in the workspace.
  • WorkspaceVectorLayerListingItem.vue – Represents a vector layer in the workspace.

When to Use:

  • Use WorkspaceLayerListing.vue to display all available layers in a workspace.
  • Use MapLayerResultTable.vue when showing tabular data for selected map features.

3. Geostories Components

Purpose: These components facilitate storytelling with geospatial data.

Key Components

  • FloodSidebar.vue – A sidebar specifically designed for flood-related geospatial storytelling.

When to Use:

  • Use FloodSidebar.vue when building interactive flood-related scenarios.

4. Map Components

Purpose: These components manage mapping functionality, including layers, drawing, and filtering.

Key Components

  • MapContainer.vue – The main map container that initializes and renders the map.
  • MapLayerListing.vue – Lists all active layers on the map.
  • MapLayerResultTable.vue – A table to display attributes of map features.
  • AttributeFiltering.vue – Allows filtering layers on the map based on attributes. Layers must be geoserver vector layer.
  • DrawContainer.vue – Enables users to draw on the map.
  • BufferContainer.vue – Handles buffer operations on selected features.

When to Use:

  • Use MapContainer.vue when embedding a map in a view.
  • Use DrawContainer.vue when implementing interactive drawing tools.
  • Use AttributeFiltering.vue when users need to filter map features by attributes.

5. Participation Components

Purpose: These components enable citizen participation in mapping activities, such as campaigns and feedback submissions.

Key Components

  • CampaignList.vue – Displays a list of active campaigns.
  • ParticipationForm.vue – A form where users submit participation data.
  • ParticipationSidebar.vue – A sidebar dedicated to participation-related actions.

When to Use:

  • Use CampaignList.vue when listing available campaigns.
  • Use ParticipationForm.vue when collecting user input for participatory mapping.

Styling & Best Practices

  • Scoped Styles: Use scoped styles to avoid conflicts.
  • Composition API: Prefer Vue 3's setup function for cleaner code.
  • Reusability: Extract reusable UI elements into Base/ components.
  • Lazy Loading: Load components dynamically to improve performance.

By leveraging PrimeVue components and modular architecture, the UI remains consistent, scalable, and easy to maintain.