@esri/solutions-components 0.5.1 → 0.5.2

package/dist/collection/components/layer-table/layer-table.js

@@ -19,32 +19,45 @@
  * limitations under the License.
  */
 import { Host, h } from '@stencil/core';
+import { loadModules } from "../../utils/loadModules";
 import { getLocaleComponentStrings } from "../../utils/locale";
-import { getMapLayerView, goToSelection } from "../../utils/mapViewUtils";
+import { getMapLayerView, goToSelection, getMapLayerIds } from "../../utils/mapViewUtils";
 import { queryAllFeatures } from "../../utils/queryUtils";
 import * as downloadUtils from "../../utils/downloadUtils";
-// TODO look for options to better handle very large number of records
-//  has a hard time especially with select all when we have many rows
-// TODO test with data that contains domains
 export class LayerTable {
   constructor() {
+    /**
+     * string[]: List of field names to display
+     */
+    this._fieldNames = [];
     /**
      * esri/Graphic[]: https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html
      */
     this._graphics = [];
     /**
-     * string[]: List of field names to display
+     * Store a reference to the table node after it's first created
+     * and initializes the FeatureTable
+     *
+     * @returns void
      */
-    this._fieldNames = [];
+    this.onTableNodeCreate = (node) => {
+      this._tableNode = node;
+      this._getTable(node);
+    };
     this.mapView = undefined;
-    this._translations = undefined;
+    this._layerView = undefined;
     this._selectedIndexes = [];
+    this._translations = undefined;
   }
   //--------------------------------------------------------------------------
   //
   //  Watch handlers
   //
   //--------------------------------------------------------------------------
+  async mapViewWatchHandler() {
+    const mapLayerIds = await getMapLayerIds(this.mapView);
+    this._layerView = await getMapLayerView(this.mapView, mapLayerIds[0]);
+  }
   //--------------------------------------------------------------------------
   //
   //  Methods (public)
@@ -67,18 +80,35 @@ export class LayerTable {
    */
   async componentWillLoad() {
     await this._getTranslations();
+    await this._initModules();
   }
   /**
    * Renders the component.
    */
   render() {
-    return (h(Host, null, this._getTableControlRow(), h("div", { class: "data-container" }, h("div", { class: "table-container" }, h("div", { class: "table" }, this._getTableHeader(), this._getTableRows()))), h("edit-record-modal", { ref: (el) => this._editMultipleMpdal = el })));
+    if (!this._layerView) {
+      return null;
+    }
+    return (h(Host, null, this._getTableControlRow(), h("div", { class: "table-div width-full" }, h("calcite-panel", { class: "height-full width-full" }, h("div", { ref: this.onTableNodeCreate }))), h("edit-record-modal", { ref: (el) => this._editMultipleMpdal = el })));
   }
   //--------------------------------------------------------------------------
   //
   //  Functions (protected)
   //
   //--------------------------------------------------------------------------
+  /**
+   * Load esri javascript api modules
+   *
+   * @returns Promise resolving when function is done
+   *
+   * @protected
+   */
+  async _initModules() {
+    const [FeatureTable] = await loadModules([
+      "esri/widgets/FeatureTable"
+    ]);
+    this.FeatureTable = FeatureTable;
+  }
   /**
    * Gets a row of controls that can be used for various interactions with the table
    *
@@ -90,104 +120,26 @@ export class LayerTable {
     return (h("div", { class: "display-flex table-border" }, h("map-layer-picker", { mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt) }), h("div", null, h("calcite-button", { appearance: 'transparent', color: 'neutral', disabled: !featuresSelected, iconStart: 'magnifying-glass', onClick: () => this._zoom() }, this._translations.zoom), h("calcite-button", { appearance: 'transparent', color: 'neutral', disabled: !multiFeaturesSelected, iconStart: 'pencil', onClick: () => this._editMultiple() }, this._translations.editMultiple), h("calcite-button", { appearance: 'transparent', color: 'neutral', disabled: !featuresSelected, iconStart: 'trash', onClick: () => this._delete() }, this._translations.delete), h("calcite-split-button", { appearance: "transparent", color: "neutral", "primary-text": this._translations.more }, h("calcite-dropdown-group", { "selection-mode": "none" }, h("calcite-dropdown-item", { iconStart: 'list-check-all', onClick: () => this._selectAll(true) }, this._translations.selectAll), h("calcite-dropdown-item", { iconStart: 'selected-items-filter', onClick: () => this._showSelected() }, this._translations.showSelected), h("calcite-dropdown-item", { iconStart: 'erase', onClick: () => this._clearSelection() }, this._translations.clearSelection), h("calcite-dropdown-item", { iconStart: 'refresh', onClick: () => this._switchSelected() }, this._translations.switchSelected), h("calcite-dropdown-item", { iconStart: 'export', onClick: () => this._exportToCSV() }, this._translations.exportCSV))))));
   }
   /**
-   * Gets the table header with a select all control and column headers for each field
-   *
-   * @returns The dom node that contains the header
-   */
-  _getTableHeader() {
-    return (h("div", { class: "header" }, h("div", { class: "table-header-cell padding-3-4" }, h("calcite-checkbox", { class: "display-flex justify-center", onClick: () => this._selectAll(this._selectAllElement.checked), ref: (el) => this._selectAllElement = el })), this._fieldNames.map(name => this._getTableHeaderCell(name))));
-  }
-  /**
-   * Gets a header cell for the table header
+   * Initialize the FeatureTable
    *
-   * @param name the string to display in the cell
-   *
-   * @returns The dom node that contains the header cell
-   */
-  _getTableHeaderCell(name) {
-    return (h("div", { class: "table-header-cell field-width" }, name));
-  }
-  /**
-   * Gets the table rows for all features
-   *
-   * @returns The dom node that contains the body of the table
-   */
-  _getTableRows() {
-    return (h("div", { class: "table-body" }, this._graphics.map((g, i) => this._getTableRow(g, i))));
-  }
-  /**
-   * Gets the individual table row for a feature
-   *
-   * @param g the graphic the row is based on
-   * @param index the index location of the row within the table
-   *
-   * @returns The dom node that contains the row
-   */
-  _getTableRow(g, index) {
-    // TODO think through this more...should build the fieldType info once up front rather
-    // than on every single value...
-    const checked = this._selectedIndexes.indexOf(index) > -1;
-    return (h("div", { class: "row" }, h("div", { class: "table-cell table-border padding-3-4" }, h("calcite-checkbox", { checked: checked, class: "display-flex justify-center", onClick: () => this._rowSelected(index), value: index })), this._fieldNames.map(name => {
-      const field = this._layerView.layer.fieldsIndex.get(name);
-      return this._getTableRowCell(g.attributes[name], field, checked);
-    })));
-  }
-  /**
-   * Gets the individual table cell for the provided field
-   *
-   * @param v the value to display
-   * @param field the field the row is based on
-   * @param rowSelected when true editable fields will render a control that will allow the value to be updated
-   *
-   * @returns The dom node that contains the table cell
+   * @returns void
    */
-  _getTableRowCell(v, field, rowSelected) {
-    const editable = field.editable && rowSelected;
-    const inputType = this._getInputType(field.type);
-    // TODO find some domain data to test with..this has not been tested
-    let domainInput;
-    const domain = field.domain;
-    if (domain) {
-      if (domain.type === "coded-value") {
-        domainInput = (h("calcite-select", { label: '' }, domain.codedValues.map(cv => {
-          return (h("calcite-option", { label: cv.name, selected: v === cv.code.toString(), value: cv.code }));
-        })));
-      }
-      else {
-        // range domain
-        const range = domain;
-        domainInput = (h("calcite-input", { max: range.maxValue, min: range.minValue, type: "number", value: v }));
-      }
+  _getTable(node) {
+    var _a;
+    if ((_a = this._layerView) === null || _a === void 0 ? void 0 : _a.layer) {
+      this._table = new this.FeatureTable({
+        layer: this._layerView.layer,
+        view: this.mapView,
+        editingEnabled: true,
+        highlightOnRowSelectEnabled: true,
+        multiSortEnabled: false,
+        visibleElements: {
+          header: false,
+          menu: false
+        },
+        container: node
+      });
     }
-    ;
-    return (h("div", { class: "table-cell table-border field-width" }, editable && domainInput ? domainInput : editable ? (h("calcite-input", { type: inputType, value: v })) : v));
-  }
-  /**
-   * Simple lookup that will get the appropriate edit control for the value type
-   *
-   * @param type the Esri field type
-   *
-   * @returns A string for the type of control to create based on the provided field type
-   */
-  _getInputType(type) {
-    // JS API field types
-    // "string" | "small-integer" | "integer" | "single" | "double" | "long" | "date" | "oid" | "geometry" | "blob" | "raster" | "guid" | "global-id" | "xml"
-    // not sure about these: "geometry" | "blob" | "raster" |  | "xml"
-    // Calcite input types
-    // color date datetime-local email file image month number password search tel text(default) textarea time url week
-    const inputTypes = {
-      "string": 'text',
-      "small-integer": "number",
-      "integer": "number",
-      "single": "number",
-      "double": "number",
-      "long": "number",
-      "date": "datetime-local",
-      "oid": "number",
-      "guid": "text",
-      "global-id": "text"
-    };
-    return Object.keys(inputTypes).indexOf(type) > -1 ? inputTypes[type] : "text";
   }
   /**
    * Select or deselect all rows
@@ -308,6 +260,8 @@ export class LayerTable {
     this._fieldNames = this._layerView.layer.fields.map(f => f.alias || f.name);
     this._graphics = await queryAllFeatures(0, this._layerView.layer, []);
     this._selectedIndexes = [];
+    this._table.layer = this._layerView.layer;
+    this._table.render();
   }
   /**
    * Fetches the component's translations
@@ -320,7 +274,6 @@ export class LayerTable {
     this._translations = messages[0];
   }
   static get is() { return "layer-table"; }
-  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["layer-table.css"]
@@ -356,9 +309,16 @@ export class LayerTable {
   }
   static get states() {
     return {
-      "_translations": {},
-      "_selectedIndexes": {}
+      "_layerView": {},
+      "_selectedIndexes": {},
+      "_translations": {}
     };
   }
   static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "mapView",
+        "methodName": "mapViewWatchHandler"
+      }];
+  }
 }

package/dist/collection/components/map-card/map-card.css

@@ -61,6 +61,10 @@
   display: flex;
 }
 
+.display-grid {
+  display: inline-grid;
+}
+
 /* only used if we need to do the map action seperately */
 .block-button {
   border-bottom: 0;
@@ -74,13 +78,6 @@
   background-color: var(--calcite-ui-foreground-3);
 }
 
-.map-view {
-  padding: 0;
-  margin: 0;
-  height: 100%;
-  width: 100%;
-}
-
 .map-list {
   position: absolute;
   inset: 3.5rem 0 0 0;

package/dist/collection/components/map-card/map-card.js

@@ -35,13 +35,9 @@ export class MapCard {
      * string: the id of map currently displayed
      */
     this._loadedId = "";
-    /**
-     * string: the id of the container div for the map
-     */
-    this._mapDivId = "map-div";
     this.mapInfos = [];
+    this.mapView = undefined;
     this._mapListExpanded = false;
-    this._mapView = undefined;
     this._translations = undefined;
     this._webMapId = "";
   }
@@ -89,7 +85,7 @@ export class MapCard {
    * Renders the component.
    */
   render() {
-    return (h(Host, null, this._getToolbar(), this._getMapNameList(this._mapListExpanded), h("div", { class: "map-height", id: this._mapDivId })));
+    return (h(Host, null, this._getToolbar(), this._getMapNameList(this._mapListExpanded), h("div", { class: "map-height", ref: (el) => (this._mapDiv = el) })));
   }
   //--------------------------------------------------------------------------
   //
@@ -139,13 +135,14 @@ export class MapCard {
       const webMap = new this.WebMap({
         portalItem: { id }
       });
-      this._mapView = new this.MapView({
-        container: this._mapDivId,
+      this.mapView = new this.MapView({
+        container: this._mapDiv,
         map: webMap,
         // TODO consider this more...seems to cause less overflow issues when the component is resized
         resizeAlign: "top-left"
       });
       this._loadedId = id;
+      this.mapChanged.emit(this.mapView);
     }
   }
   /**
@@ -173,7 +170,7 @@ export class MapCard {
    */
   _getMapPicker() {
     const mapListIcon = this._mapListExpanded ? "chevron-up" : "chevron-down";
-    return (h("calcite-action-group", { class: "action-center width-1-6", layout: "horizontal" }, h("calcite-block", { class: "action-center block-button width-full height-full", heading: '', onClick: () => this._chooseMap() }, h("calcite-icon", { icon: "map", scale: "s", slot: "icon" }), h("calcite-icon", { icon: mapListIcon, scale: "s", slot: "icon" }), h("calcite-tooltip", { label: "", placement: "bottom" }, h("span", null, this._translations.mapName)))));
+    return (h("calcite-action-group", { class: "action-center width-1-6", layout: "horizontal" }, h("calcite-block", { class: "action-center block-button width-full height-full display-grid", heading: '', onClick: () => this._chooseMap() }, h("calcite-icon", { icon: "map", scale: "s", slot: "icon" }), h("calcite-icon", { icon: mapListIcon, scale: "s", slot: "icon" }), h("calcite-tooltip", { label: "", placement: "bottom" }, h("span", null, this._translations.mapName)))));
   }
   /**
    * Get a pick list for all maps in mapInfos
@@ -291,13 +288,31 @@ export class MapCard {
           "text": "IMapInfo[]: array of map infos (name and id)"
         },
         "defaultValue": "[]"
+      },
+      "mapView": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "__esri.MapView",
+          "resolved": "MapView",
+          "references": {
+            "___esri": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
+        }
       }
     };
   }
   static get states() {
     return {
       "_mapListExpanded": {},
-      "_mapView": {},
       "_translations": {},
       "_webMapId": {}
     };
@@ -323,6 +338,25 @@ export class MapCard {
             }
           }
         }
+      }, {
+        "method": "mapChanged",
+        "name": "mapChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when a new map is loaded"
+        },
+        "complexType": {
+          "original": "__esri.MapView",
+          "resolved": "MapView",
+          "references": {
+            "___esri": {
+              "location": "global"
+            }
+          }
+        }
       }];
   }
   static get elementRef() { return "el"; }

package/dist/collection/components/map-draw-tools/map-draw-tools.js

@@ -142,7 +142,7 @@ export class MapDrawTools {
       this._sketchGraphicsLayer = this.mapView.map.layers.getItemAt(sketchIndex);
     }
     else {
-      this._sketchGraphicsLayer = new this.GraphicsLayer({ title });
+      this._sketchGraphicsLayer = new this.GraphicsLayer({ title, listMode: "hide" });
       state.managedLayers.push(title);
       this.mapView.map.layers.add(this._sketchGraphicsLayer);
     }

package/dist/collection/components/map-select-tools/map-select-tools.js

@@ -361,7 +361,7 @@ export class MapSelectTools {
       this._bufferGraphicsLayer = this.mapView.map.layers.getItemAt(bufferIndex);
     }
     else {
-      this._bufferGraphicsLayer = new this.GraphicsLayer({ title });
+      this._bufferGraphicsLayer = new this.GraphicsLayer({ title, listMode: "hide" });
       state.managedLayers.push(title);
       const sketchIndex = this.mapView.map.layers.findIndex((l) => l.title === this._translations.sketchLayer);
       if (sketchIndex > -1) {

package/dist/collection/components/public-notification/public-notification.js

@@ -85,17 +85,6 @@ export class PublicNotification {
       void this._home();
     }
   }
-  /**
-   * Called each time the selectionSets prop is changed.
-   */
-  async selectionSetsWatchHandler(v, oldV) {
-    if (v && v !== oldV && v.length > 0) {
-      const nonRefineSets = v.filter(ss => ss.workflowType !== EWorkflowType.REFINE);
-      if (nonRefineSets.length === 0) {
-        this._selectionSets = [];
-      }
-    }
-  }
   /**
    * Called each time the sketchLineSymbol prop is changed.
    */
@@ -338,7 +327,7 @@ export class PublicNotification {
    * @protected
    */
   _getListPage() {
-    const hasSets = this._selectionSets.filter(ss => ss.workflowType !== EWorkflowType.REFINE).length > 0;
+    const hasSets = this._hasSelections();
     const total = utils.getTotal(this._selectionSets);
     return hasSets ? (h("calcite-panel", null, h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "font-bold" }, this._translations.myLists)), this._getNotice(this._translations.listHasSetsTip, "padding-sides-1 padding-bottom-1"), this._getMapLayerPicker(), h("div", { class: "display-block padding-sides-1 height-1-1-2" }, h("div", { class: "display-block float-left" }, h("calcite-label", { alignment: "start", class: "font-bold" }, this._translations.notifications)), h("div", { class: "display-block float-right" }, h("calcite-input-message", { active: true, class: "info-blue margin-top-0", scale: "m" }, this._translations.uniqueCout.replace("{{n}}", total.toString())))), hasSets ? this._getSelectionSetList() : (h("div", { class: "info-message" }, h("calcite-input-message", { active: true, class: "info-blue", scale: "m" }, this._translations.noNotifications))), h("div", { class: "display-flex padding-1" }, h("calcite-button", { onClick: () => { this._setPageType(EPageType.SELECT); }, width: "full" }, this._translations.add)), this._showModal(this._showLayerSelectionChangeModal))) : (h("calcite-panel", null, h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "font-bold" }, this._translations.myLists)), h("div", { class: "padding-sides-1" }, h("calcite-label", null, this._translations.notifications)), h("div", { class: "info-message padding-bottom-1" }, h("calcite-input-message", { active: true, class: "info-blue", scale: "m" }, this._translations.noNotifications)), this._getNotice(this._translations.selectLayerAndAdd, "padding-sides-1 padding-bottom-1"), this._getMapLayerPicker(), h("div", { class: "display-flex padding-1" }, h("calcite-button", { onClick: () => { this._setPageType(EPageType.SELECT); }, width: "full" }, this._translations.add))));
   }
@@ -363,7 +352,8 @@ export class PublicNotification {
     // REFINE is handled seperately from the core selection sets
     // You can only access after clicking the refine action
     this._selectionSets.reduce((prev, cur, i) => {
-      if (cur.workflowType !== EWorkflowType.REFINE) {
+      const validSet = this._isValidSet(cur);
+      if (validSet) {
         prev.push((h("calcite-list-item", { description: this._translations.selectedFeatures.replace("{{n}}", cur.selectedIds.length.toString()), label: cur.label, onClick: () => this._gotoSelection(cur, this.mapView) }, this._getAction(true, "pencil", "", (evt) => this._openSelection(cur, evt), false, "actions-end"), this._getAction(true, "x", "", (evt) => this._deleteSelection(i, evt), false, "actions-end"))));
       }
       return prev;
@@ -404,14 +394,38 @@ export class PublicNotification {
     await this._updateAddresseeLayer(id);
   }
   /**
-   * Check if any selection sets exist.
+   * Check if any valid selection sets exist.
    *
-   * @returns true if selection sets exist
+   * @returns true if valid selection sets exist
    *
    * @protected
    */
   _hasSelections() {
-    return this._selectionSets.length > 0;
+    return this._selectionSets.filter(ss => this._isValidSet(ss)).length > 0;
+  }
+  /**
+   * Check if any duplicates exist
+   *
+   * @returns true if duplicates are found
+   *
+   * @protected
+   */
+  _hasDuplicates() {
+    const selectedIds = this._selectionSets.reduce((prev, cur) => {
+      return prev.concat(cur.download ? cur.selectedIds : []);
+    }, []);
+    return selectedIds.length > new Set(selectedIds).size;
+  }
+  /**
+   * Check if a selection set is valid (exists or has at least one added if its a refine set)
+   *
+   * @returns true if selection set is valid
+   *
+   * @protected
+   */
+  _isValidSet(ss) {
+    var _a, _b;
+    return ss.workflowType === EWorkflowType.REFINE ? ((_b = (_a = ss === null || ss === void 0 ? void 0 : ss.refineIds) === null || _a === void 0 ? void 0 : _a.addIds) === null || _b === void 0 ? void 0 : _b.length) > 0 : true;
   }
   /**
    * Create the Select page that shows the selection workflows
@@ -480,7 +494,8 @@ export class PublicNotification {
   _getDownloadPage(type) {
     const isPdf = type === EExportType.PDF;
     const hasSelections = this._hasSelections();
-    return (h("calcite-panel", null, h("div", null, h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "font-bold" }, isPdf ? this._translations.downloadPDF : this._translations.downloadCSV)), hasSelections ? (h("div", null, h("div", { class: "padding-top-sides-1" }, h("calcite-label", null, this._translations.notifications)), this._getSelectionLists(), h("div", { class: "margin-side-1 padding-top-1 border-bottom" }), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: isPdf ? "display-none" : "", layout: "inline" }, h("calcite-checkbox", { disabled: !this._downloadActive, ref: (el) => { this._removeDuplicatesCSV = el; } }), this._translations.removeDuplicate), h("calcite-label", { class: isPdf ? "" : "display-none", layout: "inline" }, h("calcite-checkbox", { disabled: !this._downloadActive, ref: (el) => { this._removeDuplicatesPDF = el; } }), this._translations.removeDuplicate)), h("div", { class: isPdf ? "" : "display-none" }, this._getLabel(this._translations.selectPDFLabelOption, false), h("div", { class: "padding-sides-1" }, h("pdf-download", { disabled: !this._downloadActive, layerView: this.addresseeLayer, ref: (el) => { this._downloadTools = el; } }))), h("div", { class: "padding-1 display-flex" }, h("calcite-button", { disabled: !this._downloadActive, onClick: isPdf ? () => this._downloadPDF() : () => this._downloadCSV(), width: "full" }, isPdf ? this._translations.downloadPDF : this._translations.downloadCSV)))) : (this._getNotice(this._translations.downloadNoLists, "padding-sides-1 padding-bottom-1")))));
+    const hasDuplicates = this._hasDuplicates();
+    return (h("calcite-panel", null, h("div", null, h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "font-bold" }, isPdf ? this._translations.downloadPDF : this._translations.downloadCSV)), hasSelections ? (h("div", null, h("div", { class: "padding-top-sides-1" }, h("calcite-label", null, this._translations.notifications)), this._getSelectionLists(), h("div", { class: "margin-side-1 padding-top-1 border-bottom" }), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: isPdf ? "display-none" : "", disabled: !hasDuplicates, layout: "inline" }, h("calcite-checkbox", { disabled: !hasDuplicates, ref: (el) => { this._removeDuplicatesCSV = el; } }), this._translations.removeDuplicate), h("calcite-label", { class: isPdf ? "" : "display-none", disabled: !hasDuplicates, layout: "inline" }, h("calcite-checkbox", { disabled: !hasDuplicates, ref: (el) => { this._removeDuplicatesPDF = el; } }), this._translations.removeDuplicate)), h("div", { class: isPdf ? "" : "display-none" }, this._getLabel(this._translations.selectPDFLabelOption, false), h("div", { class: "padding-sides-1" }, h("pdf-download", { disabled: !this._downloadActive, layerView: this.addresseeLayer, ref: (el) => { this._downloadTools = el; } }))), h("div", { class: "padding-1 display-flex" }, h("calcite-button", { disabled: !this._downloadActive, onClick: isPdf ? () => this._downloadPDF() : () => this._downloadCSV(), width: "full" }, isPdf ? this._translations.downloadPDF : this._translations.downloadCSV)))) : (this._getNotice(this._translations.downloadNoLists, "padding-sides-1 padding-bottom-1")))));
   }
   /**
    * Create the stacked navigation buttons for a page
@@ -530,7 +545,8 @@ export class PublicNotification {
    */
   _getSelectionLists() {
     return this._selectionSets.reduce((prev, cur) => {
-      if (cur.workflowType !== EWorkflowType.REFINE) {
+      const validSet = this._isValidSet(cur);
+      if (validSet) {
         if (!this._downloadActive && cur.download) {
           this._downloadActive = true;
         }
@@ -693,7 +709,7 @@ export class PublicNotification {
    * @protected
    */
   async _updateSelectionSets(layerView) {
-    const _selectionSets = this._selectionSets.filter(selectionSet => selectionSet.workflowType !== EWorkflowType.REFINE);
+    const _selectionSets = this._selectionSets;
     const oidDefs = [];
     _selectionSets.forEach(selectionSet => {
       selectionSet.layerView = layerView;
@@ -777,11 +793,16 @@ export class PublicNotification {
    */
   _openSelection(selectionSet, evt) {
     evt.stopPropagation();
-    this._activeSelection = selectionSet;
-    this._distance = this._activeSelection.distance;
-    this._unit = this._activeSelection.unit;
-    this._customLabel = this._activeSelection.label;
-    this._pageType = EPageType.SELECT;
+    if (selectionSet.workflowType === EWorkflowType.REFINE) {
+      this._pageType = EPageType.REFINE;
+    }
+    else {
+      this._activeSelection = selectionSet;
+      this._distance = this._activeSelection.distance;
+      this._unit = this._activeSelection.unit;
+      this._customLabel = this._activeSelection.label;
+      this._pageType = EPageType.SELECT;
+    }
   }
   /**
    * Highlight any selected features in the map
@@ -1217,9 +1238,6 @@ export class PublicNotification {
       }, {
         "propName": "searchConfiguration",
         "methodName": "watchSearchConfigurationHandler"
-      }, {
-        "propName": "_selectionSets",
-        "methodName": "selectionSetsWatchHandler"
       }, {
         "propName": "sketchLineSymbol",
         "methodName": "sketchLineSymbolWatchHandler"

package/dist/collection/components/refine-selection-tools/refine-selection-tools.js

@@ -205,7 +205,7 @@ export class RefineSelectionTools {
       this._sketchGraphicsLayer = this.mapView.map.layers.getItemAt(sketchIndex);
     }
     else {
-      this._sketchGraphicsLayer = new this.GraphicsLayer({ title });
+      this._sketchGraphicsLayer = new this.GraphicsLayer({ title, listMode: "hide" });
       state.managedLayers.push(title);
       this.mapView.map.layers.add(this._sketchGraphicsLayer);
     }

package/dist/collection/demos/crowdsource-manager.html

@@ -22,26 +22,9 @@
     | limitations under the License.
     -->
     <style>
-      #viewDiv {
-        padding: 0;
-        margin: 0;
-        height: 100%;
-        width: 100%;
-      }
-      .over-map {
-        position: absolute;
-        right: 0px;
-        background-color: var(--calcite-ui-foreground-1);
-      }
-      .column {
-        min-width: 300px;
-        padding: 1rem;
-        border: 1px solid var(--calcite-ui-border-2);
-        height: -webkit-fill-available;
-        height: 100%;
-      }
-      .column[dir="rtl"] {
-        float: left;
+      .crowdsource {
+        height: 100vh;
+        width: 100vw;
       }
     </style>
 
@@ -56,30 +39,20 @@
     <script type="module" src="../solutions-components.esm.js"></script>
 
     <script>
-      require(["esri/WebMap", "esri/views/MapView"], (
-        WebMap,
-        MapView
-      ) => {
-        var webMap = new WebMap({
-          portalItem: {
-            // solutions
-            // id: "3715f4899bea4b2a948347c5c2357e58"
-            // InstantApps
-            id: "863e4f6f2a7840db896cc1b1606d552d"
-          }
-        });
-
+      function addValues() {
         const demo = document.getElementById("demo");
-        demo.mapView = new MapView({
-          container: "viewDiv",
-          map: webMap
-        });
-      });
+        demo.mapInfos = [{
+          id: "863e4f6f2a7840db896cc1b1606d552d",
+          name: "Name of map 1"
+        }, {
+          id: "3715f4899bea4b2a948347c5c2357e58",
+          name: "Name of map 2"
+        }];
+      }
     </script>
   </head>
 
-  <body>
-    <div id="viewDiv"></div>
-    <crowdsource-manager id="demo" class="over-map column"></crowdsource-manager>
+  <body onload="addValues()">
+    <crowdsource-manager id="demo" class="crowdsource"/>
   </body>
 </html>