CompareView

<caos-compare-view>

the result of comparing two environments, filtered by type, item and agreement

May be placed on a page inside an app.

Inputs

Name	Attribute	Description	Type	Default	Required
items	property only	What was compared: { type, name, agreement }[].	json	empty list	Optional
agreement	agreement, markup only	Show only one of the four answers. Choosing both-equal reveals the equal items even without show-equal, because asking for them is asking for them.	text — recognises both-different, both-equal, only-source, only-target; anything else reads as everything that differs, when the attribute is absent or empty	none declared	Optional
showEqual	show-equal, markup only	Include the items that agree. Off by default: a comparison returns thousands and almost all agree, so leading with them buries the answer.	boolean	false	Optional
type	type, markup only	Show only one metadata type. The filter offers the types actually present.	text — anything it does not recognise reads as every type, when the attribute is absent or empty	none declared	Optional
search	search, markup only	Narrows by item name or type. Intersects with the other two filters.	text	none declared	Optional
sortKey	sort-key, markup only	Which column orders the rows.	text — one of type, name, agreement	name	Optional
sortDirection	sort-direction, markup only	Which way.	text — one of asc, desc	asc	Optional
emptyText	empty-text, markup only	What to say before anything has been compared.	text	Nothing has been compared yet.	Optional

Events

Name	When it fires	What it carries
caos-compare-open	A row’s Compare control is pressed. Only rows that differ have one.	{ item }.
caos-compare-filter	The type or agreement filter changes.	{ type, agreement }.

Slots

Not documented yet — this piece has not said.

Styling hooks

Not documented yet — this piece has not said.

Methods

Not documented yet — this piece has not said.

Readable state

Name	Type	What it tells you
tally	Record<CaosAgreement, number>	How many of each answer, over the WHOLE comparison — never the filtered view.
differing	CaosCompareItem[]	Everything that is not “in both, equal”.
types	string[]	The distinct types compared.
visibleItems	CaosCompareItem[]	The items surviving every filter, in order.

Styling parts

Part	Which piece of it	When it is there
::part(compare)	The outer column.	Always
::part(filters)	The filter row.	Always
::part(filter)	One of the two dropdowns.	Always
::part(search)	The search box.	Always
::part(summary)	The counts line.	Always
::part(table)	The composed data table.	Always
::part(agreement)	A row’s comparison phrase.	Always
::part(open)	A row’s Compare control.	That row differs.

When to use it

After comparing two environments, when the question is WHICH things disagree.

What to use instead

• DifferenceModal — one item has been chosen and the question is HOW it differs.
• EnvironmentConnector — the two environments have not been chosen yet.

Accessibility

Every row states its comparison as a full PHRASE — “Only in the source” — rather than as a colour or an abbreviation, so the four outcomes are distinguishable when read aloud. The summary is a role="status" live region and always states how many equal items are hidden, so the short list is never mistaken for the whole comparison. Each Compare control names the item it opens, which matters on a screen holding forty identical controls.

Examples

What disagrees

The default view: the equal items are hidden and the summary says how many, so the short list cannot be mistaken for the comparison.

{
  "id": "example",
  "section": "What disagrees",
  "columns": 1,
  "items": [
    {
      "id": "compare_view_1",
      "type": "component",
      "key": "compare_view",
      "inputs": {
        "items": [
          {
            "type": "ApexClass",
            "name": "BillingService",
            "agreement": "both-different"
          },
          {
            "type": "ApexClass",
            "name": "QuoteCalculator",
            "agreement": "both-equal"
          },
          {
            "type": "ApexClass",
            "name": "LegacyImporter",
            "agreement": "only-source"
          },
          {
            "type": "CustomField",
            "name": "Account.Region__c",
            "agreement": "only-target"
          },
          {
            "type": "CustomField",
            "name": "Account.Industry",
            "agreement": "both-equal"
          },
          {
            "type": "Layout",
            "name": "Account-Account Layout",
            "agreement": "both-different"
          }
        ]
      }
    }
  ]
}

<caos-compare-view id="compareView1"></caos-compare-view>

// What an attribute cannot hold, set as a property — the same values the preview is drawn with.
const compareView1 = document.getElementById('compareView1');
compareView1.items = [
  {
    "type": "ApexClass",
    "name": "BillingService",
    "agreement": "both-different"
  },
  {
    "type": "ApexClass",
    "name": "QuoteCalculator",
    "agreement": "both-equal"
  },
  {
    "type": "ApexClass",
    "name": "LegacyImporter",
    "agreement": "only-source"
  },
  {
    "type": "CustomField",
    "name": "Account.Region__c",
    "agreement": "only-target"
  },
  {
    "type": "CustomField",
    "name": "Account.Industry",
    "agreement": "both-equal"
  },
  {
    "type": "Layout",
    "name": "Account-Account Layout",
    "agreement": "both-different"
  }
];

Only what is missing from the target

One of the four phrases on its own. “Only in the source” says exactly what it means, where “removed” would have implied somebody took it away.

{
  "id": "example",
  "section": "Only what is missing from the target",
  "columns": 1,
  "items": [
    {
      "id": "compare_view_1",
      "type": "component",
      "key": "compare_view",
      "inputs": {
        "agreement": "only-source",
        "items": [
          {
            "type": "ApexClass",
            "name": "BillingService",
            "agreement": "both-different"
          },
          {
            "type": "ApexClass",
            "name": "LegacyImporter",
            "agreement": "only-source"
          },
          {
            "type": "ApexTrigger",
            "name": "AccountTrigger",
            "agreement": "only-source"
          },
          {
            "type": "CustomField",
            "name": "Account.Region__c",
            "agreement": "only-target"
          }
        ]
      }
    }
  ]
}

<caos-compare-view id="compareView1" agreement="only-source"></caos-compare-view>

// What an attribute cannot hold, set as a property — the same values the preview is drawn with.
const compareView1 = document.getElementById('compareView1');
compareView1.items = [
  {
    "type": "ApexClass",
    "name": "BillingService",
    "agreement": "both-different"
  },
  {
    "type": "ApexClass",
    "name": "LegacyImporter",
    "agreement": "only-source"
  },
  {
    "type": "ApexTrigger",
    "name": "AccountTrigger",
    "agreement": "only-source"
  },
  {
    "type": "CustomField",
    "name": "Account.Region__c",
    "agreement": "only-target"
  }
];

Everything, agreements included

The equal items brought back in, marked as the quiet rows they are and with no Compare control.

{
  "id": "example",
  "section": "Everything, agreements included",
  "columns": 1,
  "items": [
    {
      "id": "compare_view_1",
      "type": "component",
      "key": "compare_view",
      "inputs": {
        "show_equal": true,
        "items": [
          {
            "type": "ApexClass",
            "name": "BillingService",
            "agreement": "both-different"
          },
          {
            "type": "ApexClass",
            "name": "QuoteCalculator",
            "agreement": "both-equal"
          },
          {
            "type": "CustomField",
            "name": "Account.Industry",
            "agreement": "both-equal"
          }
        ]
      }
    }
  ]
}

<caos-compare-view id="compareView1" show-equal></caos-compare-view>

// What an attribute cannot hold, set as a property — the same values the preview is drawn with.
const compareView1 = document.getElementById('compareView1');
compareView1.items = [
  {
    "type": "ApexClass",
    "name": "BillingService",
    "agreement": "both-different"
  },
  {
    "type": "ApexClass",
    "name": "QuoteCalculator",
    "agreement": "both-equal"
  },
  {
    "type": "CustomField",
    "name": "Account.Industry",
    "agreement": "both-equal"
  }
];