WAB Developer - Launchpad Theme, AnchorBarController Bug

[LanceCole]

We are in the final stages of deploying a custom WAB site, and during final testing, a bug was found in the Launchpad Theme. During testing, it was noted that when you use the application, opening and closing docked widgets becomes slower and eventually significantly lags the application. A browsers refresh clears the issue but reoccurs with continued use. We use WAB v2.23 and have confirmed that the issue occurs in the default configuration from a fresh download.

While monitoring the application, it was found that each time a docked widget is closed, either from the AnchorBarController or the close widget button, the _onNodeClick event is fired an additional time. For example, the first time a widget is closed, the event fires once, the second time the event twice, etc. If you open another widget, the same occurs starting at once the first time it is opened and incrementing after that.

The issue can be demonstrated by placing a counsel.log at line 168 of the setOpened function of the BaseIconItems.js script in the Launchpad Theme, AnchorBarController widget.

setOpened: function(value){
      console.log("BaseIconItem.setOpened")
      // console.trace()
      if(value){
        if(this.iconItemStatus){
          domClass.add(this.iconItemStatus, 'selected');
        }
        if(this.iconItemNode){
          domClass.add(this.iconItemNode, 'selected');
        }

        this.isOpen = true;
      }else{
        if(this.iconItemStatus){
          domClass.remove(this.iconItemStatus, 'selected');
        }
        if(this.iconItemNode){
          domClass.remove(this.iconItemNode, 'selected');
        }
        this.isOpen = false;
        this.panelIndex = -1;
      }
    },

Below is a console.trace() from the setOpened function on the first time closing widget button in the AnchorBarController.

We were planning on releasing our new website this week, and any help would be appreciated.  I am NOT a developer and only know enough JavaScript to get myself into trouble.  @DerekLaw or @RobertScheitlin__GISP  any ideas or suggestions?

Thanks.

[H__DanielRamos_Mendoza]

It is recommended to use the penultimate published version. Use  WAB v2.22

[LanceCole]

Daniel, thanks for the reply.

We also checked WAB v2.22 and the issue occurs in that version as well for the Launchpad Theme.

[LanceCole]

I narrowed the issue down to the _OnDockableNodeClick function in the AnchorBarController - Widget.js file starting at line 630. The following original code creates and shows a panel, in particular lines 30-40. Unfortunately, this loads a panel even when one already exists and the lang.hitch and aspect.after were adding additional ‘onClose’ events each time a panel was opened. 

    _onDockableNodeClick: function(dockableItem){
      var panelId, panelConfig;
      if(dockableItem.config.inPanel === false){
        if(dockableItem.isOpen){
          this.widgetManager.loadWidget(dockableItem.config).then(
              lang.hitch(this, function(widget) {
            this._addToOpenedIds(dockableItem.config.id);

            var position = this._getOffPanelPosition(dockableItem,
                this.widgetManager.getWidgetMarginBox(widget));
            position.zIndex = 100;
            widget.setPosition(position, this.containerNode);
            this.widgetManager.openWidget(widget);

            this.own(aspect.after(widget, 'onClose', lang.hitch(this, function() {
              dockableItem.setOpened(false);
              this._removeFromOpenedIds(dockableItem.config.id);
              dockableItem.iconItemNode.focus();
            })));
          }));
        }else{
          this.widgetManager.closeWidget(dockableItem.config.id);
          this._removeFromOpenedIds(dockableItem.config.id);
        }
      }else{
        panelId = dockableItem.config.id + '_panel';
        if(dockableItem.isOpen){
          dockableItem.setPanelIndex(this._calPanelIndex());
          panelConfig = dockableItem.getConfigForPanel();

          this.panelManager.showPanel(panelConfig).then(lang.hitch(this, function(panel){
            panel.setPosition(panelConfig.panel.position);
            aspect.after(panel, 'onClose', lang.hitch(this, function(){
              dockableItem.setOpened(false);
              this._removeFromOpenedIds(dockableItem.config.id);
              if(dockableItem.iconItemNode){
                dockableItem.iconItemNode.focus();
              }
            }));
          }));

          if(this.popupMore){
            this.popupMore.hide();
          }
          this._addToOpenedIds(dockableItem.config.id);
        }else{
          this.panelManager.closePanel(panelId);
          this._removeFromOpenedIds(dockableItem.config.id);
        }
      }
    },

I added a conditional (Lines 30-32) to only to create the panel if the panel ID does not exist, which seems to have resolved the issue.  I also comment out line 37 as the panel.setPosition is being called twice.  I am not a programmer, so please provide some feedback.  I also did not look at the upper portion, which deals with off Panel widgets.  This revision also does not reset the panel position/size for existing panels or the panelIndex.

_onDockableNodeClick: function(dockableItem){
      var panelId, panelConfig;

      if(dockableItem.config.inPanel === false){
        if(dockableItem.isOpen){
          this.widgetManager.loadWidget(dockableItem.config).then(
              lang.hitch(this, function(widget) {
            this._addToOpenedIds(dockableItem.config.id);

            var position = this._getOffPanelPosition(dockableItem,
                this.widgetManager.getWidgetMarginBox(widget));
            position.zIndex = 100;
            widget.setPosition(position, this.containerNode);
            this.widgetManager.openWidget(widget);

            this.own(aspect.after(widget, 'onClose', lang.hitch(this, function() {
              dockableItem.setOpened(false);
              this._removeFromOpenedIds(dockableItem.config.id);
              dockableItem.iconItemNode.focus();
            })));
          }));
        }else{
          this.widgetManager.closeWidget(dockableItem.config.id);
          this._removeFromOpenedIds(dockableItem.config.id);
        }
      }else{
        panelId = dockableItem.config.id + '_panel';
        if(dockableItem.isOpen){
// CHANGES --- 
          if(this.panelManager.getPanelById(panelId)){
            this.panelManager.openPanel(panelId);
          } else {
// CHANGES ---
            dockableItem.setPanelIndex(this._calPanelIndex());
            panelConfig = dockableItem.getConfigForPanel();
            this.panelManager.showPanel(panelConfig).then(lang.hitch(this, function(panel){
// CHANGES ---  // panel.setPosition(panelConfig.panel.position); 
              aspect.after(panel, 'onClose', lang.hitch(this, function(){
                dockableItem.setOpened(false);
                this._removeFromOpenedIds(dockableItem.config.id);
                if(dockableItem.iconItemNode){
                  dockableItem.iconItemNode.focus();
                }
              }));
            }));
          } // CHANGES ---

[DerekLaw]

Hi @LanceCole,

Unfortunately, I am not a developer so I'm unable to help with your issue. Sorry. Also, I haven't worked closely with the ArcGIS WebAppBuilder team in several years. Please contact Esri tech support and open a ticket - they are the best folks to check if this might be a bug. 

Best,

[LanceCole]

Thanks, Derek.  I have a ticket in with ESRI and they are looking into the issue.

[LanceCole · Accepted solution]

After working with ESRI support the past week, they confirmed this is a bug in v2.22 and v2.23. Bug Number: BUG-000146795