How to use higlass - 5 common examples

this.RetrieveViewID = this.RetrieveViewID.bind(this);
    this.RetrieveLocation_Static = this.RetrieveLocation_Static.bind(this);
    this.RetrieveLocation = this.RetrieveLocation.bind(this);
    this.UpdateViewID = this.UpdateViewID.bind(this);
    this.UpdateAPIInfo = this.UpdateAPIInfo.bind(this);
    this.UpdateCNVData = this.UpdateCNVData.bind(this);
    this.UpdateHiglassView = this.UpdateHiglassView.bind(this);
    this.UpdateConfigFile = this.UpdateConfigFile.bind(this);
    this.ProcessCNVFile = this.ProcessCNVFile.bind(this);
    this.LoadConfigFile = this.LoadConfigFile.bind(this);
    this.Reset = this.Reset.bind(this);

    this.chromInfo = null;
    // fetch ChromosomeInfo from HiGlass
    // this needs to be specified in a config file somewhere
    hglib.ChromosomeInfo('http://higlass.io/api/v1/chrom-sizes/?id=Ajn_ttUUQbqgtOD4nOt-IA', chromInfo => {
      this.chromInfo = chromInfo;
    });
  }

Math.random().toString(36).substring(2, 5) +
      Math.random().toString(36).substring(2, 5)
    );
    this.model.set('dom_element_id', randomStr);

    this.hgContainer = document.createElement('div');
    this.hgContainer.setAttribute('id', randomStr);
    this.hgDisplay = document.createElement('div');
    this.hgDisplay.style.border = this.options.theme === 'dark'
      ? '#333333' : '#dddddd';
    this.hgDisplay.style.borderRadius = '2px';

    this.hgContainer.appendChild(this.hgDisplay);
    this.el.appendChild(this.hgContainer);

    this.hg = hglib.viewer(this.hgDisplay, this.viewConfig, this.getOptions());

    this.hgContainer.api = this.hg;

    // Listen to events from the JavaScript world
    this.hg.on('cursorLocation', this.setCursorLocation.bind(this));
    this.hg.on('rangeSelection', this.setSelection.bind(this));
    this.hg.on('viewConfig', this.setViewConfig.bind(this));

    this.locationListeners = [];
    this.setupLocationListeners();

    // Listen to messages from the Python world
    this.model.on("change:height", this.handleChange, this);
    this.model.on("change:select_mode", this.handleChange, this);
    this.model.on("change:viewconf", this.handleChange, this);
    this.model.on("change:auth_token", this.handleChange, this);

componentDidMount() {
    hglib.ChromosomeInfo('http://higlass.io/api/v1/chrom-sizes/?id=Ajn_ttUUQbqgtOD4nOt-IA')
      .then(info => this.setState({chromInfo: info}))

    if (this.state.uid === 'demo' && !ResilientData.servers.get().length)
      demo()

    hamradio.publish('ready/cTracks')
  }

return element => {
      if (element && ViewConfig) {
        hglib.createHgComponent(element, ViewConfig, options, function (api) {
          window.hgApi = api;
        });
      }
    };
  }

self.hg = hglib.viewer(self.hgDisplay, self.viewConfig, self.getOptions());
          break;

        case 'bounded':
          self.bounded = value;
          self.hg = hglib.viewer(self.hgDisplay, self.viewConfig, self.getOptions());
          break;

        case 'default_track_options':
          self.defaultTrackOptions = value;
          self.hg = hglib.viewer(self.hgDisplay, self.viewConfig, self.getOptions());
          break;

        case 'dark_mode':
          self.darkMode = value;
          self.hg = hglib.viewer(self.hgDisplay, self.viewConfig, self.getOptions());
          break;

        case 'renderer':
          self.renderer = value;
          self.hg = hglib.viewer(self.hgDisplay, self.viewConfig, self.getOptions());
          break;

        case 'selection_on_alt':
          self.selectionOnAlt = value;
          self.hg = hglib.viewer(self.hgDisplay, self.viewConfig, self.getOptions());
          break;

        case 'options':
          self.options = value;
          self.hg = hglib.viewer(self.hgDisplay, self.viewConfig, self.getOptions());
          break;