How to use the phovea_core/src/event.on function in phovea_core

private attachListener() {
         const self = this;
         events.on(TABLE_VIS_ROWS_CHANGED_EVENT, () => {
           self.update();
        //   console.log('fire table row')
         })
         events.on(MAP_ATTRIBUTE_CHANGE_EVENT,()=>{
           self.update();
         })
         events.on(SHOW_TOP_100_EVENT,()=>{
           self.update();
        //   console.log('fire top 100')
         })
         events.on(SHOW_DETAIL_VIEW, (evt, vector) => {
           if(!self.detailViewAttribute.includes(vector.name)){
              self.detailViewAttribute.unshift(vector.name);
           }
           if(self.detailViewAttribute.length>3){
              self.detailViewAttribute = self.detailViewAttribute.slice(0,3)

this.drawTree();
        } else {
          select('#allBars').style('visibility', 'hidden');
          // select('#col3').style('visibility', 'hidden');

          select('#col2').select('svg')
            .attr('width', this.forceDirectedWidth)
            .attr('height', this.forceDirectedHeight);

          this.drawGraph();
        }
      };
    });

    events.on(ROOT_CHANGED_EVENT, (evt, info) => {


      //layout is already expanded.
      this.graph.root = [info.root.uuid];
      //change root to tree mode
      const root = info.root;
      const rootAggMode = root.aggMode;

      //remove visited status for all edges;
      this.graph.links.map((l) => l.visited = false);

      //un-aggregate
      this.clearLevelModeNodes(undefined, true);
      this.graph.nodes.map((n) => {
        n.summary = undefined;
        n.pinned = false;

private attachListeners() {

    events.on(TABLE_VIS_ROWS_CHANGED_EVENT, (evt, item) => {
      this.update();
    });

    events.on(PRIMARY_SELECTED, (evt, attribute) => {

      this.primaryAttribute = attribute;

      this.update_graph();
      // this.update_visible_nodes();

      this.update_legend();
    });

    events.on(POI_SELECTED, (evt, affectedState) => {
      this.data.defineAffected(affectedState);
      this.data.aggregateTreeWrapper(undefined, undefined);

this.resize();
        this.updateItems(this.items);
      }
    });

    events.on(AppConstants.EVENT_DATA_COLLECTION_SELECTED, (evt, items: ITacoTimePoint[]) => {
      this.items = items;
      this.barScaling.domain([0, 1]);
      this.updateItems(items);
    });

    events.on(AppConstants.EVENT_SHOW_CHANGE, (evt, changeType: IChangeType) => {
      this.scaleBarsHeight(); // just rescale the height of the bars
    });

    events.on(AppConstants.EVENT_HIDE_CHANGE, (evt, changeType: IChangeType) => {
      this.scaleBarsHeight(); // just rescale the height of the bars
    });
  }

private attachListener() {
    events.on(AppConstants.EVENT_DATA_SET_ADDED, (evt, ds: MalevoDataset) => {
      if (this.timeline === null) {
        const marginLabelTimeline = 10; // 10 pixel margin between label and timeline
        const tmData = new TimelineData(ds.epochInfos);
        this.timeline = new Timeline(ds.name, this.$node);
        this.timeline.data = tmData;
        this.timeline.render(this.$node, marginLabelTimeline, 0);
        this.updateSvg(1, this.timeline.getWidth());
        this.width = this.timeline.getWidth();
      }
    });

    events.on(AppConstants.EVENT_DATA_SET_REMOVED, (evt, ds: MalevoDataset) => {
      if (dataStoreRuns.size === 0) {
        this.timeline.node().remove();
        this.updateSvg(0, this.width);
        this.timeline = null;

private attachListener() {
    // Call the resize function whenever a resize event occurs
    events.on(AppConstants.EVENT_RESIZE, () => this.resize());

    events.on(AppConstants.EVENT_DATA_COLLECTION_SELECTED, () => {
      this.clearContent();
    });

    events.on(AppConstants.EVENT_TIME_POINTS_SELECTED, (evt, items: ITacoTimePoint[]) => {
      if (items.length === 2) {
        this.updateItems(items);
      } else {
        this.clearContent();
      }
    });

    events.on(AppConstants.EVENT_DATASET_SELECTED, (evt, items: ITacoTimePoint[]) => {
      this.clearContent();
    });
  }

return {whiskerTop, whiskerDown, Q};
  }


  event.on('groupingChanged', function (e, groupName, ids) {
    if (ids && ids.length > 0) {
      that.data.retainGroup(groupName);
    } else {
      groupSelect(null, groupName, false);
      that.data.releaseGroup(groupName);
    }
  });

  event.on('newDataLoaded', updateData);

  event.on('axisChange', axisUpdate);

  event.on('updateVis', drawIsoforms);


  return head.node();

};

private attachListener() {

    //Set listener for added attribute to the active list
    events.on('attribute_added', (evt, item )=> {
      this.addColumn(item.name , item.newIndex);
    });

    //Set listener for removed attribute from the active list
    events.on('attribute_reordered', (evt, item )=> {
      this.reorderColumn(item.name, item.newIndex);
    });
    //Set listener for reordering attribute within the active list
    events.on('attribute_removed', (evt, item )=> {
      this.removeColumn(item.name)
    });
  }

}
           if(self.detailViewAttribute.length>3){
              self.detailViewAttribute = self.detailViewAttribute.slice(0,3)
           }
           self.currentViewType = 'Detail';
           self.update();

         })
         events.on(HIGHLIGHT_MAP_BY_ID,(evt,id)=>{
           self.highlightID(id);
         })
         events.on(CLEAR_MAP_HIGHLIGHT,()=>{
           self.clearAllHighlight();
         })

         events.on(COL_ORDER_CHANGED_EVENT,()=>{
           self.update()
         })
       }

if (info.clear === undefined) {
        this.pathwayBFS();
      }

      this.layoutTree();
      this.updateEdgeInfo();
      this.exportYValues();
      this.drawTree();

      select('#pathViewer')
        .style('visibility', 'visible');

    });

    events.on(TREE_PRESERVING_SORTING, (evt, info) => {
      this.layoutTree(info);
      this.updateEdgeInfo();
      this.exportYValues();
      this.drawTree();
    });


    events.on(DB_CHANGED_EVENT, (evt, info) => {

      //clear data
      this.graph = undefined;

      //clear display
      this.svg.select('.visibleLinks').html('');
      this.svg.select('.hiddenLinks').html('');
      this.svg.select('.nodes').html('');