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

// for model attributes, including
//
//  - `_view_name`
//  - `_view_module`
//  - `_view_module_version`
//
//  - `_model_name`
//  - `_model_module`
//  - `_model_module_version`
//
//  when different from the base class.

// When serialiazing the entire widget state for embedding, only values that
// differ from the defaults will be specified.
var ScatterplotModel = widgets.DOMWidgetModel.extend({
    defaults: _.extend(widgets.DOMWidgetModel.prototype.defaults(), {
        _model_name : 'ScatterplotModel',
        _view_name : 'ScatterplotView',
        _model_module : 'progressivis-nb-widgets',
        _view_module : 'progressivis-nb-widgets',
        _model_module_version : '0.1.0',
        _view_module_version : '0.1.0',
        data : 'Hello Scatterplot!',
	value: '{0}'
    })
});


// Custom View. Renders the widget model.
var ScatterplotView = widgets.DOMWidgetView.extend({
    // Defines how the widget gets rendered into the DOM
    render: function() {

// for model attributes, including
//
//  - `_view_name`
//  - `_view_module`
//  - `_view_module_version`
//
//  - `_model_name`
//  - `_model_module`
//  - `_model_module_version`
//
//  when different from the base class.

// When serialiazing the entire widget state for embedding, only values that
// differ from the defaults will be specified.
var JSProxyModel = widgets.DOMWidgetModel.extend({
    defaults: _.extend(widgets.DOMWidgetModel.prototype.defaults(), {
        _model_name : 'JSProxyModel',
        _view_name : 'JSProxyView',
        _model_module : 'jp_proxy_widget',
        _view_module : 'jp_proxy_widget',
        _model_module_version : '1.0.0',
        _view_module_version : '1.0.0',
    })
});

//var loader_defined = false;
var JSProxyLoad = "JSProxyLoad";

// Custom View. Renders the widget model.
var JSProxyView = widgets.DOMWidgetView.extend({

    render: function() {

// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
// IN THE SOFTWARE.
// ----------------------------------------------------------------------------

var widgets = require("@jupyter-widgets/base");
var _ = require("lodash");
var THREE = require("three");
var OrbitControls = require("three-orbit-controls")(THREE);

// Webpack automatically resolves path for assets
import disc_path from "./assets/disc.png";

var JVisualizerModel = widgets.DOMWidgetModel.extend({
    defaults: _.extend(widgets.DOMWidgetModel.prototype.defaults(), {
        _model_name: "JVisualizerModel",
        _model_module: "open3d",
        _model_module_version: "@PROJECT_VERSION_THREE_NUMBER@",
        _view_name: "JVisualizerView",
        _view_module: "open3d",
        _view_module_version: "@PROJECT_VERSION_THREE_NUMBER@",
        geometry_jsons: []
    })
});

var JVisualizerView = widgets.DOMWidgetView.extend({
    camera: null,
    control: null,
    scene: null,
    renderer: null,
    geometry: null,

var widgets = require('@jupyter-widgets/base');
var _ = require('lodash');
var cs = require('cornerstone-core');
var cm = require('cornerstone-math');
var ctools = require('cornerstone-tools');
var $ = require('jquery');


ctools.external.cornerstone = cs;
ctools.external.cornerstoneMath = cm;

// When serialiazing the entire widget state for embedding, only values that
// differ from the defaults will be specified.
var CornerstoneModel = widgets.DOMWidgetModel.extend({
    defaults: _.extend(widgets.DOMWidgetModel.prototype.defaults(), {
        _model_name: 'CornerstoneModel',
        _view_name: 'CornerstoneView',
        _model_module: 'cornerstone_widget',
        _view_module: 'cornerstone_widget',
        _model_module_version: '0.1.0',
        _view_module_version: '0.1.0',
        img_bytes: '',
        img_scale: 1,
        img_width: 0,
        img_height: 0,
        img_min: 0,
        img_max: 1,
        img_color: false,
        _selected_tool: '',
        _tool_state_in: '',

//                                                                           //
// The full license is in the file LICENSE, distributed with this software.  //
///////////////////////////////////////////////////////////////////////////////

window.ws = window.WebSocket;
var widgets = require('@jupyter-widgets/base');
var _ = require('lodash');

var ROSLIB = require('roslib');
var ROS3D = require('ros3d');
var THREE = require('three');

var defaults = require('./defaults.js')

var widget_defaults = widgets.WidgetModel.prototype.defaults;
var domwidget_defaults = widgets.DOMWidgetModel.prototype.defaults;

var default_serializers = function(names) {
    names = names || ['ros', 'tf_client']

    var named_serializers = {}
    for (let idx in names)
    {
        named_serializers[names[idx]] = { deserialize: widgets.unpack_models }
    }
    return {serializers: _.extend(named_serializers, widgets.WidgetModel.serializers)};
}

var fixup_url = function(url) {
    url = url
        .replace("{hostname}", window.location.hostname)
        .replace("{port}", window.location.port);

var widgets = require('@jupyter-widgets/base');
var _ = require('lodash');
var Plotly = require('plotly.js');


// Models
// ======
var FigureModel = widgets.DOMWidgetModel.extend({

    defaults: _.extend(widgets.DOMWidgetModel.prototype.defaults(), {
        _model_name: 'FigureModel',
        _view_name: 'FigureView',
        _model_module: 'ipyplotly',
        _view_module: 'ipyplotly',

        _data: [],
        _layout: {}, // Not synced to python side

        // Message properties
        _py2js_addTraces: null,
        _py2js_deleteTraces: null,
        _py2js_moveTraces: null,
        _py2js_restyle: null,
        _py2js_relayout: null,
        _py2js_update: null,
        _py2js_animate: null,

import * as widgets from '@jupyter-widgets/base';
import * as _  from 'underscore';
require('webrtc-adapter');
import * as html2canvas from 'html2canvas';

// Workaround for JupyterLab: "ws" is not defined
// https://github.com/maartenbreddels/ipywebrtc/issues/55
window.ws = global.WebSocket;

import * as mqtt from 'mqtt';
import * as utils from './utils';
const semver_range = '~' + require('../package.json').version;

import { imageWidgetToCanvas } from './utils';

export class MediaStreamModel extends widgets.DOMWidgetModel {
    defaults() {
        return {...super.defaults(),
            _model_module: 'jupyter-webrtc',
            _view_module: 'jupyter-webrtc',
            _model_name: 'MediaStreamModel',
            _view_name: 'MediaStreamView',
            _model_module_version: semver_range,
            _view_module_version: semver_range,
        };
    }

    get stream() {
        return this.captureStream();
    }

    captureStream() {

// Cytoscape Model. Custom widgets models must at least provide default values
// for model attributes, including
//
//  - `_view_name`
//  - `_view_module`
//  - `_view_module_version`
//
//  - `_model_name`
//  - `_model_module`
//  - `_model_module_version`
//
//  when different from the base class.

// When serialiazing the entire widget state for embedding, only values that
// differ from the defaults will be specified.
var CytoscapeModel = widgets.DOMWidgetModel.extend({
    defaults: _.extend(widgets.DOMWidgetModel.prototype.defaults(), {
        _model_name: 'CytoscapeModel',
        _view_name: 'CytoscapeView',
        _model_module: 'cytoscape-jupyter-widget',
        _view_module: 'cytoscape-jupyter-widget',
        _model_module_version: '0.3.0',
        _view_module_version: '0.3.0'
    })
});


// Custom View. Renders the widget model.
var CytoscapeView = widgets.DOMWidgetView.extend({

    render: function() {
        this.value_changed();

defaults() {
        return {...widgets.DOMWidgetModel.prototype.defaults(),
            _model_name: "ToolbarModel",
            _view_name: "Toolbar",
            _model_module: "bqplot",
            _view_module: "bqplot",
            _model_module_version: semver_range,
            _view_module_version: semver_range,

            figure: undefined,
            _panning: false,
            _panzoom: null
        };
    }

const MODULE_NAME = 'tfma_widget_js';
const MODEL_VERSION = '0.1.0';
const VIEW_VERSION = '0.1.0';
const SLICING_METRICS_MODEL_NAME = 'SlicingMetricsModel';
const SLICING_METRICS_VIEW_NAME = 'SlicingMetricsView';
const SLICING_METRICS_ELEMENT_NAME = 'tfma-nb-slicing-metrics';
const TIME_SERIES_MODEL_NAME = 'TimeSeriesModel';
const TIME_SERIES_VIEW_NAME = 'TimeSeriesView';
const TIME_SERIES_ELEMENT_NAME = 'tfma-nb-time-series';
const PLOT_MODEL_NAME = 'PlotModel';
const PLOT_VIEW_NAME = 'PlotView';
const PLOT_ELEMENT_NAME = 'tfma-nb-plot';

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

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

    this.view_ = document.createElement(SLICING_METRICS_ELEMENT_NAME);