How to use the @jupyter-widgets/base.DOMWidgetView function in @jupyter-widgets/base

var HiGlassDisplayModel = widgets.DOMWidgetModel.extend({
  defaults: _.extend(
    _.result(this, 'widgets.DOMWidgetModel.prototype.defaults'),
    {
      _model_name : 'HiGlassDisplayModel',
      _view_name : 'HiGlassDisplayView',
      _model_module : 'higlass-jupyter',
      _view_module : 'higlass-jupyter',
      _model_module_version : packageJson.version,
      _view_module_version : packageJson.version
    }
  )
});

// Custom View. Renders the widget model.
var HiGlassDisplayView = widgets.DOMWidgetView.extend({
  render: function render() {
    this.height = this.model.get('height');
    this.viewConfig = this.model.get('viewconf');
    this.authToken = this.model.get('auth_token');
    this.bounded = this.model.get('bounded');
    this.defaultTrackOptions = this.model.get('default_track_options');
    this.darkMode = this.model.get('dark_mode');
    this.renderer = this.model.get('renderer');
    this.selectMode = this.model.get('select_mode');
    this.selectionOnAlt = this.model.get('selection_on_alt');
    this.options = this.model.get('options');

    // Create a random 6-letter string
    // From https://gist.github.com/6174/6062387
    var randomStr = (
      Math.random().toString(36).substring(2, 5) +

*
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import * as widgets from '@jupyter-widgets/base';
import * as d3 from 'd3';
// var d3 =Object.assign({}, require("d3-hierarchy"), require("d3-scale"), require("d3-selection"));
import _ from 'underscore';

export const SquareMarketMap = widgets.DOMWidgetView.extend({

    render: function() {
        this.width = this.model.get("width");
        this.height = this.model.get("height");
        this.margin = this.model.get('margin');

        this.el.style["width"] = this.width + this.margin.left + this.margin.right;
        this.el.style["height"] = this.height + this.margin.top + this.margin.bottom;

        var sector_data = this.model.get('data');
        this.colors = this.model.get('colors');
        this.mode = this.model.get('mode');

        var color= d3.scaleOrdinal(d3.schemeCategory10);
        this.d3el.append("div")
            .style("position", "relative")

serialize: js2py_serializer}
    }, widgets.DOMWidgetModel.serializers)
});

// View
// ====
/**
 * A FigureView manages the visual presentation of a single Plotly.js
 * figure for a single notebook output cell. Each FigureView has a
 * reference to FigureModel.  Multiple views may share a single model
 * instance, as is the case when a Python FigureWidget is displayed in
 * multiple notebook output cells.
 *
 * @type {widgets.DOMWidgetView}
 */
var FigureView = widgets.DOMWidgetView.extend({

    /**
     * The perform_render method is called by processPhosphorMessage
     * after the widget's DOM element has been attached to the notebook
     * output cell. This happens after the initialize of the
     * FigureModel, and it won't happen at all if the Python FigureWidget
     * is never displayed in a notebook output cell
     */
    perform_render: function() {

        var that = this;

        // Wire up message property callbacks
        // ----------------------------------
        // Python -> JS event properties
        this.model.on("change:_py2js_addTraces",

// differ from the defaults will be specified.

export const KeplerGlModal = widgets.DOMWidgetModel.extend({
  defaults: {
    ...widgets.DOMWidgetModel.prototype.defaults(),
    _model_name: 'KeplerGlModal',
    _view_name: 'KeplerGlView',
    _model_module: 'keplergl-jupyter',
    _view_module: 'keplergl-jupyter',

    data: {},
    config: {}
  }
});

export const KeplerGlView = widgets.DOMWidgetView.extend({
  render() {
    log('KeplerGlModal start render');
    this.keplergl = new KeplerGlJupyter();

    this.keplergl.create(this);

    // event listener
    this.model.on('change:data', this.data_changed, this);
    this.model.on('change:config', this.config_changed, this);

    window.dom = this.el;
  },

  data_changed() {
    log('KeplerGlModal start data_changed');

// differ from the defaults will be specified.
var HelloModel = widgets.DOMWidgetModel.extend({
    defaults: _.extend(widgets.DOMWidgetModel.prototype.defaults(), {
        _model_name : 'HelloModel',
        _view_name : 'HelloView',
        _model_module : 'higlass-jupyter',
        _view_module : 'higlass-jupyter',
        _model_module_version : '0.1.0',
        _view_module_version : '0.1.0',
        value : 'Hello World'
    })
});


// Custom View. Renders the widget model.
var HelloView = widgets.DOMWidgetView.extend({
    render: function() {
        this.value_changed();
        this.model.on('change:value', this.value_changed, this);
    },

    value_changed: function() {
        this.el.textContent = this.model.get('value');
    }
});


module.exports = {
    HelloModel : HelloModel,
    HelloView : HelloView
};

if (v.hasOwnProperty(p)) {
                    res[p] = py2js_serializer(v[p]);
                }
            }
        }
    } else if (v === '_undefined_') {
        res = undefined;
    } else {
        res = v;
    }
    return res
}

// Figure View
// ===========
var FigureView = widgets.DOMWidgetView.extend({

    render: function() {

        var that = this;

        // Wire up property callbacks
        // --------------------------
        // Python -> JS event properties
        this.model.on('change:_py2js_addTraces', this.do_addTraces, this);
        this.model.on('change:_py2js_deleteTraces', this.do_deleteTraces, this);
        this.model.on('change:_py2js_moveTraces', this.do_moveTraces, this);
        this.model.on('change:_py2js_restyle', this.do_restyle, this);
        this.model.on("change:_py2js_relayout", this.do_relayout, this);
        this.model.on("change:_py2js_update", this.do_update, this);
        this.model.on("change:_py2js_animate", this.do_animate, this);
        this.model.on("change:_py2js_requestSvg", this.do_requestSvg, this);

});

const TimeSeriesModel = widgets.DOMWidgetModel.extend({
  defaults: _.extend(widgets.DOMWidgetModel.prototype.defaults(), {
    _model_name: TIME_SERIES_MODEL_NAME,
    _view_name: TIME_SERIES_VIEW_NAME,
    _model_module: MODULE_NAME,
    _view_module: MODULE_NAME,
    _model_module_version: MODEL_VERSION,
    _view_module_version: VIEW_VERSION,
    config: {},
    data: [],
  })
});

const TimeSeriesView = widgets.DOMWidgetView.extend({
  render: function() {
    loadVulcanizedTemplate();

    this.view_ = document.createElement(TIME_SERIES_ELEMENT_NAME);
    this.el.appendChild(this.view_);

    delayedRender(() => {
      this.configChanged_();
      this.dataChanged_();
      this.model.on('change:config', this.configChanged_, this);
      this.model.on('change:data', this.dataChanged_, this);
    });
  },
  dataChanged_: function() {
    this.view_.data = this.model.get('data');
  },

}

    captureStream() {
        throw new Error('Not implemented');
    }
}

const captureStream = function(widget) {
    if (widget.captureStream) {
        return widget.captureStream();
    } else {
        return widget.stream;
    }
};

export class MediaStreamView extends widgets.DOMWidgetView {
    render() {
        super.render.apply(this, arguments);
        window.last_media_stream_view = this;
        this.video = document.createElement('video');
        this.video.controls = true;
        this.pWidget.addClass('jupyter-widgets');
        this.pWidget.addClass('widget-image');

        this.initPromise = this.model.captureStream();

        this.initPromise.then((stream) => {
            this.video.srcObject = stream;
            this.el.appendChild(this.video);
            this.video.play();
        }, (error) => {
            const text = document.createElement('div');

_deregisterCurrentFeatureListeners() {
        this.currentFeatures.forEach(feature => feature.restoreClickable());
        this.eventBus.stopListening();
    }

    _registerFeatureListeners(features) {
        features.forEach(feature => {
            feature.ensureClickable();
            this.eventBus.listenTo(feature, 'click', () =>
                this.onDeleteFeature(feature)
            );
        });
    }
}

export class DrawingControlsView extends widgets.DOMWidgetView {
    render() {
        this._createLayout();
        this._setInitialState();
    }

    _createLayout() {
        const $container = $('<span>');
        $container
            .addClass('gmaps-toolbar-btn-group')
            .attr('data-toggle', 'buttons');

        const $disableButton = this._createModeButton(
            'fa fa-ban',
            'Disable drawing layer'
        );
        this._createButtonEvent($disableButton, 'DISABLED');</span>

}

    initialize() {
        super.initialize.apply(this, arguments);
        window.last_audio_stream = this;

        this.type = 'audio';
    }

    static serializers = {
        ...StreamModel.serializers,
        audio: { deserialize: widgets.unpack_models },
    };
}

export class AudioStreamView extends widgets.DOMWidgetView {
    render() {
        super.render.apply(this, arguments);
        window.last_audio_stream_view = this;
        this.audio = document.createElement('audio');
        this.audio.controls = true;
        this.pWidget.addClass('jupyter-widgets');

        this.model.captureStream().then((stream) => {
            this.audio.srcObject = stream;
            this.el.appendChild(this.audio);
            this.audio.play();
        }, (error) => {
            const text = document.createElement('div');
            text.innerHTML = 'Error creating view for mediastream: ' + error.message;
            this.el.appendChild(text);
        });