Refactor Table Component and Implement Column Design System

[colton-lapp]

Current situation

The current TableComponent.vue component relies on a v-if/else-if chain to handle cell styling based on specific field names (e.g., name, description, tags). This type of styling is sensitive to name changes, harder to scale, and leads to code duplication when new columns require similar behaviors (truncation, tooltips, or chips). Additionally, most columns and column names have minimal style differentiation which makes tables less readable and Dioptra less recognizable.

Goals

1. Decouple Data from Presentation - i.e. shift away from name-based styling, toward class-based
2. Centralize design constants - icons, colors, etc in a single file for easy global changes
3. Componentize Cell Logic - Move UI logic (e.g., expandable lists, linked badges) out of the main table and into dedicated cell components
4. Establish visual design system and embed it within tables, making readability easier and more intuitive. Also distinguishes Dioptra visually as a product

Proposed Architecture

1. Configuration (Design System)

Create src/constants/tableStyles.js to store the global icons / colors:

export const CONCEPT_STYLES = {
  entrypoint: { icon: 'account_tree', color: 'orange-8', routeName: 'entrypoint-details' },
  plugin: { icon: 'extension', color: 'teal', routeName: 'plugin-details' },
  // Additional concepts to be added...
};

2. Define Classes for column styles

Update column schemas to include a styleType property:

Possible types:

• long-text: Truncated text with automatic tooltips (descriptions)
• concept-badge: Logic-aware chips using the CONCEPT_STYLES dictionary for single entrypoint, plugin, etc reference
• expandable-list: Logic to show N items with a "see more" hover/menu for overflows (for attached plugins)
• io-parameter: Special formatting for function inputs/outputs
• col-header: Stylings for column headers
• id-badge: Styling for job ids
• etc...

3. New Component Structure

Break the table down into the following directory structure:

src/components/table/
├── TableComponent.vue 
└── cells/
    ├── CellLongText.vue
    ├── CellConceptBadge.vue
    ├── CellExpandableList.vue
    └── CellInputOutput.vue

Column style mockup:

Marked as done when:

• Create the CONCEPT_STYLES dictionary and helper functions.
• Create cell components in src/components/table/cells/.
• Refactor TableComponent.vue to use a dynamic component loader or a simplified v-if switch based on col.styleType
• Update CellConceptBadge to support router-link functionality for resource navigation.
• Ensure column styles look good in dark mode
• Update existing parent pages to use the new styleType property in their column definitions.