How to use the base/component.extend function in base

import Dialog from "./_dialog";
import * as utils from "base/utils";
import Component from "base/component";

/*!
 * VIZABI DIALOGS
 * Reusable dialogs component
 */

//default existing dialogs
const class_active = "vzb-active";
const class_expand_dialog = "vzb-dialog-side";

const Dialogs = Component.extend({

  /**
   * Initializes the dialogs
   * @param config component configuration
   * @param context component context (parent)
   */
  init(config, context) {

    // set properties
    this.name = "gapminder-dialogs";
    this._curr_dialog_index = 20;


    this.model_expects = [{
      name: "state",
      type: "model"

import * as utils from "base/utils";
import Component from "base/component";

/*!
 * VIZABI MIN MAX INPUT FIELDS
 */

const DOMAINMIN = "domainMin";
const DOMAINMAX = "domainMax";
const ZOOMEDMIN = "zoomedMin";
const ZOOMEDMAX = "zoomedMax";

const MinMaxInputs = Component.extend({

  /**
   * Initializes the Component.
   * Executed once before any template is rendered.
   * @param config The options passed to the component
   * @param context The component's parent
   */
  init(config, context) {

    this.name = "gapminder-minmaxinputs";
    this.template = require("./minmaxinputs.html");

    this.model_expects = [{
      name: "marker",
      type: "marker"
    }, {

* VIZABI LINECHART
 */

import * as utils from "base/utils";
import Component from "base/component";

import axisSmart from "helpers/d3.axisWithLabelPicker";
import collisionResolver from "helpers/d3.collisionResolver";

import {
  warn as iconWarn,
  question as iconQuestion
} from "base/iconset";

//LINE CHART COMPONENT
const LCComponent = Component.extend({

  init(config, context) {
    const _this = this;
    this.name = "linechart";
    this.template = require("./linechart.html");

    //define expected models for this component
    this.model_expects = [{
      name: "time",
      type: "time"
    }, {
      name: "entities",
      type: "entities"
    }, {
      name: "marker",
      type: "model"

import * as utils from "base/utils";
import Component from "base/component";

/*!
 * VIZABI SHOW PANEL CONTROL
 * Reusable show panel dialog
 */

const Show = Component.extend({

  init(config, parent) {
    this.name = "show";
    const _this = this;

    this.template = this.template || require("./show.html");

    this.model_expects = this.model_expects ||
    [{
      name: "state"
    }, {
      name: "locale",
      type: "locale"
    }];

    this.tabsConfig = ((config.ui.dialogs.dialog || {}).find || {}).showTabs || {};

import Component from "base/component";
import { warn as iconWarn, question as iconQuestion } from "base/iconset";

import Exporter from "helpers/svgexport";
import axisSmart from "helpers/d3.axisWithLabelPicker";
import MountainChartMath from "tools/mountainchart/mountainchart-math";
import Selectlist from "tools/mountainchart/mountainchart-selectlist";
import Probe from "tools/mountainchart/mountainchart-probe";
import DynamicBackground from "helpers/d3.dynamicBackground";
import globals from "base/globals";

const THICKNESS_THRESHOLD = 0.001;
const COLOR_WHITEISH = "#d3d3d3";

//MOUNTAIN CHART COMPONENT
const MountainChartComponent = Component.extend({

    /**
     * Initialize the component
     * Executed once before any template is rendered.
     * @param {Object} config The config passed to the component
     * @param {Object} context The component's parent
     */
  init(config, context) {

    const _this = this;
    this.name = "mountainchart";
    this.template = require("./mountainchart.html");

        //define expected models for this component
    this.model_expects = [
            { name: "time", type: "time" },

import * as utils from "base/utils";
import Component from "base/component";
import { drag as iconDrag, pin as iconPin } from "base/iconset";
import requireAll from "helpers/requireAll";
const dialogTemplates = requireAll(require.context("components/dialogs/", true, /\.html$/));

/*!
 * VIZABI DIALOG
 * Reusable Dialog component
 */

const Dialog = Component.extend({

  isDialog: true,

  /**
   * Initializes the dialog
   * @param {Object} config Initial config, with name and placeholder
   * @param {Object} parent Reference to tool
   */
  init(config, parent) {
    this.name = this.name || "";

    this.model_expects = this.model_expects || [{
      name: "state",
      type: "model"
    }, {
      name: "ui",

const label = this.entity.select("." + css.list_item_label).select("span");
    this.entity.classed("marquee", false);
    label.style("width", "");
    if (toggle) {
      if (label.node().scrollWidth > label.node().offsetWidth) {
        label.attr("data-content", label.text());
        const space = 30;
        const offset = space + label.node().scrollWidth;
        label.style("width", offset + "px");
        this.entity.classed("marquee", true);
      }
    }
  }
});

const TreeMenu = Component.extend({

  //setters-getters
  indicatorsTree(input) {
    if (!arguments.length) return this._indicatorsTree;
    this._indicatorsTree = input;
    return this;
  },
  callback(input) {
    if (!arguments.length) return this._callback;
    this._callback = input;
    return this;
  },
  markerID(input) {
    if (!arguments.length) return this._markerID;
    this._markerID = input;
    this.targetModel(this.model.marker[this._markerID]);

marqueeToggle: function(toggle) {
    var label = this.entity.select('.' + css.list_item_label).select('span');
    this.entity.classed('marquee', false);
    label.style("left", '');
    if(toggle) {
      if(label.node().scrollWidth > label.node().offsetWidth) {
        label.attr("data-content", label.text());
        var space = 30;
        label.style("left", (-space - label.node().scrollWidth) + 'px');
        this.entity.classed('marquee', true);
      }
    }
  }
});

var TreeMenu = Component.extend({

  //setters-getters
  tree: function(input) {
    if(!arguments.length) return this._tree;
    this._tree = input;
    return this;
  },
  lang: function(input) {
    if(!arguments.length) return this._lang;
    this._lang = input;
    return this;
  },
  langStrings: function(input) {
    if(!arguments.length) return this._langStrings;
    this._langStrings = input;
    return this;

import Trail from './bubblechart-trail';
import PanZoom from './bubblechart-panzoom';
import Exporter from 'helpers/svgexport';
import axisSmart from 'helpers/d3.axisWithLabelPicker';
import DynamicBackground from 'helpers/d3.dynamicBackground';

import {
  warn as iconWarn,
  question as iconQuestion,
  close as iconClose
} from 'base/iconset';



//BUBBLE CHART COMPONENT
var BubbleChartComp = Component.extend({

  /**
   * Initializes the component (Bubble Chart).
   * Executed once before any template is rendered.
   * @param {Object} config The options passed to the component
   * @param {Object} context The component's parent
   */
  init: function(config, context) {
    var _this = this;
    this.name = 'bubblechart';
    this.template = 'bubblechart.html';

    //define expected models for this component
    this.model_expects = [{
      name: "time",
      type: "time"

import * as utils from 'base/utils';
import Component from 'base/component';

import {warn as iconWarn, close as iconClose} from 'base/iconset';

var hidden = true;

var DataWarning = Component.extend({

  init: function(config, context) {
    var _this = this;

    this.name = 'gapminder-datawarning';

    this.model_expects = [{
      name: "locale",
      type: "locale"
    }];

    this.context = context;

    this.model_binds = {
      "translate:locale": function(evt) {
        if(!_this._ready) return;