awesome-comparisons

Admin Configuration Interface

The Admin Configuration Interface is a visual configuration editor that allows you to manage dataset configurations without manually editing YAML files. It provides a user-friendly way to add, edit, and organize criteria, groupings, and value displays.

Accessing the Admin Interface

When running the development server, navigate to /admin/config in your browser:

npm run dev
# Then open http://localhost:4200/admin/config

The admin interface is available in development mode and can optionally be deployed to production if needed. The backend for the config workspace runs at http://localhost:3100 and is automatically started by npm run dev/npm run start. Requests are proxied from the Angular dev server via proxy.config.json.

Interface Overview

The admin interface consists of three main panels:

1. Catalog Tree (Left Panel)

The catalog tree displays all available dataset configurations organized by:

Features:

2. Criteria Editor (Center Panel)

The main editing area where you modify configuration content.

Sections:

Criteria Groups

Organize criteria into collapsible sections for better UX. Groups are regular criteria items with special properties:

Criteria Definitions

Define the fields that comparison entries will have:

Value Displays

Control how values render in the table and detail views:

Actions:

3. Preview Panel (Right Panel)

Shows live preview of your changes in YAML format.

Modes:

Features:

Workflow

Editing a Dataset Configuration

  1. Select Configuration
    • Choose a dataset from the catalog tree
    • Configuration loads into the editor
    • Original YAML appears in preview panel
  2. Make Changes
    • Add/edit/delete criteria groups
    • Modify criteria definitions
    • Update value displays
    • Changes appear immediately in diff preview
  3. Review Changes
    • Check diff view to see exactly what changed
    • Verify additions (green) and deletions (red)
    • Switch to raw view to see complete document
  4. Save
    • Click “Save” button in toolbar
    • Changes written to YAML file with optimistic locking
    • Catalog reloads to reflect updates
    • Success confirmation appears
  5. Discard Changes (optional)
    • Click “Revert” to undo all unsaved changes
    • Confirmation prompt prevents accidental data loss

Adding a New Criterion

  1. Scroll to “Criteria Definitions” section
  2. Click “Add Criterion” button
  3. Fill in required fields:
    • Tag: Internal identifier (lowercase, no spaces)
    • Name: Display name
    • Type: Choose data type
  4. Configure visibility options (search, table, detail)
  5. Add values if type is “label” or “rating”
  6. Preview changes in diff panel
  7. Save when ready

Creating a Criterion Group

  1. Scroll to “Criteria Definitions” section
  2. Click “Add Criterion” button
  3. Set the criterion as a group:
    • Tag: Unique identifier (e.g., “Licensing”, “Features”)
    • Name: Display name for the group
    • Type: MARKDOWN
    • Search: false
    • Table: false
    • Detail: false
    • Order: Position in list (e.g., “90”)
    • Default Expanded: true or false for initial state
    • Children: List of criterion tags to include
  4. Add criterion tags to children array
  5. Save changes

Configuring Value Displays

Value displays control how criterion values appear in the UI:

  1. Select a criterion with values (type: label or rating)
  2. For each value, configure:
    • Display: Text/emoji to show (e.g., “✓”, “Enterprise”)
    • Display HTML: Custom HTML (e.g., <svg>...</svg>)
    • Description: Tooltip text
    • Class: CSS class name (e.g., “label-success”)
    • Colors: Background and text colors (if no class)

Example:

values:
  - name: "MIT"
    description: "MIT License - permissive open source"
    class: "label-success"
    display: "MIT"
  - name: "Proprietary"
    description: "Proprietary/commercial license"
    backgroundColor: "#dc3545"
    color: "#ffffff"
    display: "Proprietary"

Configuration Inheritance

The admin interface respects the configuration inheritance system:

Shared vs Dataset-Specific

Resolution Order

When you load a dataset configuration in the admin interface:

  1. All configDefaults files are loaded in order
  2. Criteria definitions are merged (later overrides earlier)
  3. Dataset-specific comparison.yml is loaded
  4. Dataset definitions override shared
  5. Final merged result shown in editor

Important: When you save a dataset configuration, you’re only saving that specific file (either shared or dataset-specific). The inheritance resolution happens at runtime.

Working with Shared Defaults

To edit shared configuration files:

  1. Select from catalog tree under “Shared Defaults” section
  2. Examples:
    • configuration/defaults/general-licensing.yml
    • configuration/defaults/groups-advanced.yml
    • configuration/defaults/value-displays.yml
  3. Edit criteria/groups as normal
  4. Save changes
  5. All datasets that inherit this file will receive updates

Best Practice: Use shared defaults for criteria common across multiple datasets (e.g., License, Opensource, Languages).

Advanced Features

Alert History

The alert history panel (bottom of screen) shows:

Common alerts:

Alerts persist across editing sessions for troubleshooting.

Validation

Real-time validation checks for:

Validation errors appear as alerts and prevent saving until resolved.

Group Resolution

When working with groupings:

  1. Group Definition (in criteria array): 
    criteria:
  - Licensing:
   name: Licensing
   type: MARKDOWN
   search: false
   table: false
   detail: false
   order: '90'
   defaultExpanded: true
   children:
     - Opensource
     - License
     - FreeTrial
  2. Child Criteria Definitions (in same criteria array): 
    criteria:
  - Opensource:
   name: Opensource
   type: LABEL
   order: '91'
  - License:
   name: License
   type: LABEL
   order: '92'
  - FreeTrial:
   name: FreeTrial
   type: LABEL
   order: '93'
  3. Resolution: Admin interface resolves children tags against available criteria and warns if any are missing.

Diff Options

Customize diff view:

Tips and Best Practices

Organization

Shared Configuration

Value Displays

Performance

Troubleshooting

If the admin interface becomes unresponsive:

  1. Check alert history for errors
  2. Verify YAML syntax in preview
  3. Look for duplicate tags or invalid children
  4. Revert changes and try again incrementally
  5. Check browser console for JavaScript errors

If configuration won’t load:

  1. Verify dataset manifest includes the dataset
  2. Check file paths in sources.config
  3. Ensure YAML files have valid syntax
  4. Look for permission issues on config files

Keyboard Shortcuts

(If implemented, otherwise remove this section)

Future Enhancements

Planned features for future releases:

See Also

This site is open source. Improve this page.