How to use phovea_core - 10 common examples

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)

//if it's not already in there:
            if (this.tableManager.colOrder.filter((a: any) => { return a === arrayVector.desc.name; }).length < 1) {
              this.tableManager.colOrder = [arrayVector.desc.name].concat(this.tableManager.colOrder); // store array of names
            }

          });

          //clear out any attributes that aren't in the top 5
          // Add highly connected nodes to the adj Matrix:
          const allNodes = this.graph.nodes.slice(0).sort((a, b) => { return a.degree > b.degree ? -1 : 1; });
          const connectedNodes = allNodes.slice(0, 5);



          console.profileEnd();
          events.fire(TABLE_VIS_ROWS_CHANGED_EVENT);


        });

.classed('invisibleClass', true)
      .classed('leftMetaBox', true)
      .append('div')
      .style('width', this.boxWidth + 'px')
      .style('height', this.boxHeight + 'px');

    this.$rightMetaBox = this.$node
      .append('div')
      .classed('invisibleClass', true)
      .classed('rightMetaBox', true)
      .append('div')
      .style('width', this.boxWidth + 'px')
      .style('height', this.boxHeight + 'px');

    // wrap view ids from package.json as plugin and load the necessary files
    get(AppConstants.VIEW, 'Histogram2D')
      .load()
      .then((plugin) => {
        const view = plugin.factory(
          this.$node.node(), // parent node
          {} // options
        );
        return view.init();
      });
  }

case 'CELL':
        d3.select(this.$node.node().parentElement).classed('heatmap-has-column-labels', true);
        this.$node.classed('heatmap-row-labels', true).classed('heatmap-column-labels', true);
        scale[0] -= 0.65; // decrease width of heat map to show row labels TODO make it flexible based on the longest label
        break;
      case 'ROW':
        this.$node.classed('heatmap-row-labels', true);
        scale[0] -= 0.65; // decrease width of heat map to show row labels TODO make it flexible based on the longest label
        break;
      case 'COLUMN':
        d3.select(this.$node.node().parentElement).classed('column-labels', true);
        this.$node.classed('heatmap-column-labels', true);
        break;
    }

    const options = mixin({}, this.heatMapOptions, {
      scale,
      labels: showLabels
    });

    this.$node.classed('loading', true);

    return Promise.all([plugins[0].load()])
      .then((args) => {
        this.clearContent();

       // console.log('args from plugins', args);
        const plugin = args[0];
       // console.log('const plugin- args', plugin);
        plugin.factory(
          dataset,
          this.$node.node(),

// add new element to the end
    if (diffAdded.length > 0) {
      diffAdded.forEach((d) => {
        this.orderedSelectionIndicies.push(d);
      });
    }

    // remove elements within, but preserve order
    if (diffRemoved.length > 0) {
      diffRemoved.forEach((d) => {
        this.orderedSelectionIndicies.splice(this.orderedSelectionIndicies.indexOf(d), 1);
      });
    }

    const ids = rlist(this.orderedSelectionIndicies.map((i) => this.idAccessor(this._rows[i])));
    //console.log(this.orderedSelectionIndicies, ids.toString(), diffAdded, diffRemoved);

    const selection: ISelection = {idtype: this.idType, range: ids};
    // Note: listener of that event calls LineUpSelectionHelper.setItemSelection()
    this.fire(LineUpSelectionHelper.SET_ITEM_SELECTION, selection);
  }

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();
    });
  }