arcgis-utility-network-trace-results-pane | References

ESM

import "@arcgis/map-components/components/arcgis-utility-network-trace-results-pane";

Inheritance: ArcgisUtilityNetworkTraceResultsPane→HTMLElement

Since: ArcGIS Maps SDK for JavaScript 5.2

A container for one or more arcgis-utility-network-trace-results components and custom content. Use this component for custom trace workflows that need functionality beyond arcgis-utility-network-trace-analysis, such as displaying the results of multiple traces at once.

Use in a custom app outside the trace analysis component

To use arcgis-utility-network-trace-results outside of the trace analysis component, slot it into this pane's default slot. This is useful in custom trace workflow applications that display multiple trace results at once or configure each results component independently. Add one trace results component for each trace result and set its properties directly. The pane provides the results container; it does not run traces or set the results components' properties. Your application supplies each component's arcgis-utility-network-trace-results.traceResult, arcgis-utility-network-trace-results.traceError, arcgis-utility-network-trace-results.utilityNetwork, and arcgis-utility-network-trace-results.view, and manages setting properties on any trace result items.

The arcgis-utility-network-trace-results.view property is required for elements and aggregated geometry results. The arcgis-utility-network-trace-results.utilityNetwork property is required to query features for elements results.

Each trace results component instance renders in its own Calcite Block. Set arcgis-utility-network-trace-results.expandable and arcgis-utility-network-trace-results.expanded on each results component instance to control whether its content is expandable and initially expanded. Both properties default to false (collapsed and non-expandable), matching the Calcite Block defaults.

See the multiple trace results example.

Adding custom flow items

The pane renders its content inside a Calcite Flow. The default slot is rendered in the root flow item. To control the custom content displayed in the pane, add Calcite Flow Item elements to its flowItems collection.

The trace analysis component's results tab works the same way: add flow items to its arcgis-utility-network-trace-analysis.flowItems collection to display custom content in that tab.

See also

Examples

Display two trace results in the default slot of a results pane, without a trace analysis component. Each results component has its own heading and display settings. Neither component uses slot="results" because both are assigned to the pane's default slot. The upstream component uses the default result items. The downstream component uses slotted elements and functions result items, so aggregated geometry results are not displayed. Set display properties directly on the slotted result items.

<arcgis-utility-network-trace-results-pane id="trace-results-pane">
  <arcgis-utility-network-trace-results
    id="upstream-results"
    heading="Upstream trace"
    expandable
    expanded
    hide-action-bar
  ></arcgis-utility-network-trace-results>
  <arcgis-utility-network-trace-results
    id="downstream-results"
    heading="Downstream trace"
    expandable
    expanded
  >
    <arcgis-utility-network-trace-elements-result-item
      disable-highlight
    ></arcgis-utility-network-trace-elements-result-item>
    <arcgis-utility-network-trace-functions-result-item></arcgis-utility-network-trace-functions-result-item>
  </arcgis-utility-network-trace-results>
</arcgis-utility-network-trace-results-pane>
<calcite-button id="clear-trace-results">Clear results</calcite-button>

In the following JavaScript, view is the application's MapView, utilityNetwork is its loaded utility network, and upstreamTraceResult and downstreamTraceResult are TraceResult objects returned by the application's trace workflow. Set the view and utility network before assigning each trace result.

const pane = document.getElementById("trace-results-pane");
const upstreamResults = document.getElementById("upstream-results");
const downstreamResults = document.getElementById("downstream-results");
const resultsComponents = [upstreamResults, downstreamResults];

await Promise.all([pane.componentOnReady(), ...resultsComponents.map((results) => results.componentOnReady())]);

for (const results of resultsComponents) {
  results.view = view;
  results.utilityNetwork = utilityNetwork;
}

upstreamResults.traceResult = upstreamTraceResult;
downstreamResults.traceResult = downstreamTraceResult;

document.getElementById("clear-trace-results").addEventListener("click", () => {
  for (const results of resultsComponents) {
    results.clearResults();
  }
});

Using the results pane from the previous example, add a button to display custom content in a flow item. The flow item replaces the visible results until the user navigates back, which removes it from the flowItems collection and shows the results again.

<calcite-button id="show-trace-comparison">Compare traces</calcite-button>

const pane = document.getElementById("trace-results-pane");
await pane.componentOnReady();

const flowItem = document.createElement("calcite-flow-item");
flowItem.heading = "Trace comparison";

const content = document.createElement("p");
content.textContent = "Compare the results of your upstream and downstream traces here.";
flowItem.append(content);

document.getElementById("show-trace-comparison").addEventListener("click", () => {
  pane.flowItems.add(flowItem);
});

flowItem.addEventListener("calciteFlowItemBack", () => {
  pane.flowItems.remove(flowItem);
});

Properties

Property	Attribute	Type
flowItems readonly		Collection

flowItems

readonly Property

Type: Collection

Additional Calcite Flow Item elements displayed after the root flow item for drilldown navigation. The root flow item contains the pane's default slot and is not included in this collection.

This property is read-only, but the returned Collection is mutable. Add or remove calcite-flow-item elements through the collection rather than replacing it. Adding items deselects the root flow item if it is selected. Call removeAll() on flowItems to remove all custom flow items without removing the slotted results components.

This collection is for custom flow items in an independently used results pane. To add flow items to the results tab of arcgis-utility-network-trace-analysis, use that component's arcgis-utility-network-trace-analysis.flowItems property instead.

See the custom flow item example.

Methods

Method	Signature
componentOnReady inherited	componentOnReady(): Promise<this>

componentOnReady

inherited Method

Signature: componentOnReady (): Promise<this>

Creates a promise that resolves once the component is fully loaded.

Returns: Promise<this>

Example

const arcgisUtilityNetworkTraceResultsPane = document.createElement("arcgis-utility-network-trace-results-pane");
document.body.append(arcgisUtilityNetworkTraceResultsPane);
await arcgisUtilityNetworkTraceResultsPane.componentOnReady();
console.log("arcgis-utility-network-trace-results-pane is ready to go!");

Slots

Name	Description
default (unnamed)	Default slot for one or more arcgis-utility-network-trace-results components.

default (unnamed)

Slot

Default slot for one or more arcgis-utility-network-trace-results components.