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

* limitations under the License.
 */

import * as widgets from '@jupyter-widgets/base';
import * as d3 from 'd3';
// var d3 =Object.assign({}, require("d3-array"), require("d3-selection"), require("d3-selection-multi"));
d3.getEvent = function(){return require("d3-selection").event}.bind(this);
import * as _ from 'underscore';

// Check that value is defined and not null
function is_defined(value){
    return value !== null && value !== undefined;
};


export const Mark = widgets.WidgetView.extend({

    initialize : function() {
        this.setElement(document.createElementNS(d3.namespaces.svg, "g"));
        this.d3el = d3.select(this.el);
        Mark.__super__.initialize.apply(this, arguments);
    },

    render: function() {
        this.x_padding = 0;
        this.y_padding = 0;
        this.parent = this.options.parent;
        this.uuid = widgets.uuid();
        var scale_creation_promise = this.set_scale_views();
        this.listenTo(this.model, "scales_updated", function() {
            this.set_scale_views().then(_.bind(this.draw, this));
        }, this);

flat_shading: serialize,
        heights: serialize,
        mesh_detail: serialize,
        voxels: serialize,
        voxels_group: serialize,
        sparse_voxels: serialize,
        space_size: serialize,
        volume: serialize,
        opacity_function: serialize,
        text: serialize,
        size: serialize,
        position: serialize
    }, widgets.WidgetModel.serializers)
});

ObjectView = widgets.WidgetView.extend({});

PlotModel = widgets.DOMWidgetModel.extend({
    defaults: _.extend(_.result({}, 'widgets.DOMWidgetModel.prototype.defaults'), {
        _model_name: 'PlotModel',
        _view_name: 'PlotView',
        _model_module: 'k3d',
        _view_module: 'k3d',
        _model_module_version: semverRange,
        _view_module_version: semverRange
    })
});

// Custom View. Renders the widget model.
PlotView = widgets.DOMWidgetView.extend({
    render: function () {
        var containerEnvelope = window.document.createElement('div'),

*     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-selection"));
import * as _ from 'underscore';
import { BaseModel } from './BaseModel';

export class Interaction extends widgets.WidgetView {

    initialize(parameters) {
        this.setElement(document.createElementNS(d3.namespaces.svg, "rect"));
        this.d3el = d3.select(this.el);
        super.initialize.call(this, parameters);
    }

    render() {
        this.parent = this.options.parent;

        // Opaque interation layer
        this.d3el
            .attr("x", 0)
            .attr("y", 0)
            .attr("width", this.parent.width -
                           this.parent.margin.left -

// Copyright (c) Jupyter Development Team.
// Distributed under the terms of the Modified BSD License.

const widgets = require('@jupyter-widgets/base');

function camel_case(input) {
  // Convert from foo_bar to fooBar
  return input.toLowerCase().replace(/_(.)/g, function(match, group1) {
    return group1.toUpperCase();
  });
}

export class LeafletWidgetView extends widgets.WidgetView {}
export class LeafletDOMWidgetView extends widgets.DOMWidgetView {}

class leafletViewCommon {
  get_options() {
    var o = this.model.get('options');
    var options = {};
    var key;
    for (var i=0; i

static serializers = {
        ...widgets.DOMWidgetModel.serializers,
        markers: {deserialize: widgets.unpack_models},
    };
}

/* Base class for markers.
 * This sets options common to the different types of markers.
 *
 * Subclasses are responsible for implementing the `getStyleOptions`
 * method, which must return an object of additional options
 * to add to the marker, and `setStyleEvents`, which must set
 * up events for those styles.
 */
class BaseMarkerView extends widgets.WidgetView {
    render() {
        const [lat, lng] = this.model.get('location');
        const title = this.model.get('hover_text');
        const styleOptions = this.getStyleOptions();
        const markerOptions = {
            position: {lat, lng},
            draggable: false,
            title,
            ...styleOptions,
        };
        this.marker = new google.maps.Marker(markerOptions);
        this.infoBox = this.renderInfoBox();
        this.restoreClickable();
        this.infoBoxListener = null;
        this.mapView = null;
        this.modelEvents();

import * as widgets from '@jupyter-widgets/base';
import {defaultAttributes} from './defaults';

export class GMapsLayerView extends widgets.WidgetView {
    initialize(parameters) {
        super.initialize(parameters);
        this.mapView = this.options.mapView;
    }
}

export class GMapsLayerModel extends widgets.WidgetModel {
    defaults() {
        return {
            ...super.defaults(),
            ...defaultAttributes,
            _view_name: 'GMapsLayerView',
            _model_name: 'GMapsLayerModel',
        };
    }
}

import {arrayToLatLng} from './services/googleConverters';

export class LineModel extends GMapsLayerModel {
    defaults() {
        return {
            ...super.defaults(),
            _view_name: 'LineView',
            _model_name: 'LineModel',
            stroke_color: '#696969',
            stroke_weight: 2,
            stroke_opacity: 0.6,
        };
    }
}

export class LineView extends widgets.WidgetView {
    render() {
        const start = arrayToLatLng(this.model.get('start'));
        const end = arrayToLatLng(this.model.get('end'));
        const strokeColor = this.model.get('stroke_color');
        const strokeWeight = this.model.get('stroke_weight');
        const strokeOpacity = this.model.get('stroke_opacity');
        const path = new google.maps.MVCArray([start, end]);
        const lineOptions = {
            strokeColor,
            strokeWeight,
            strokeOpacity,
            clickable: false,
        };
        this.line = new google.maps.Polyline({path, ...lineOptions});
        this.line.addListener('click', event => this.trigger('click'));
        this.modelEvents();

* Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     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';

export const Scale = widgets.WidgetView.extend({

    render: function() {
        this.offset = 0;
    },

    create_event_listeners: function() {
        this.listenTo(this.model, "domain_changed", this.model_domain_changed, this);
        this.listenTo(this.model, "highlight_axis", this.highlight_axis, this);
        this.listenTo(this.model, "unhighlight_axis", this.unhighlight_axis, this);
    },

    set_range: function(range, padding) {
        this.scale.range(range);
    },

    compute_and_set_domain: function(array, id) {

_model_name : 'BlockModel',
        _view_name : 'BlockView',
        _model_module : 'odysis',
        _view_module : 'odysis',
        _model_module_version : odysis_version,
        _view_module_version : odysis_version,
        visible: true,
        _blocks: []
    })
}, {
    serializers: _.extend({
        _blocks: { deserialize: widgets.unpack_models }
    }, widgets.WidgetModel.serializers)
});

let BlockView = widgets.WidgetView.extend({
    initialize: function (parameters) {
        BlockView.__super__.initialize.apply(this, arguments);
        this.scene_view = this.options.scene_view;
        this.parent_view = this.options.parent_view;

        this.block_views = new widgets.ViewList(this.add_block, this.remove_block, this);
    },

    render: function () {
        return Promise.resolve(this.create_block()).then(() => {
            this.model_events();

            this.block_views.update(this.model.get('_blocks'));
        });
    },

}, default_serializers(['ros'])
);

var PointCloudModel = widgets.WidgetModel.extend({
    defaults: _.extend(widgets.WidgetModel.prototype.defaults(), defaults.PointCloudModelDefaults),
}, default_serializers());

var OccupancyGridModel = widgets.WidgetModel.extend({
    defaults: _.extend(widget_defaults(), defaults.OccupancyGridDefaults),
}, default_serializers());

var SceneNodeModel = widgets.WidgetModel.extend({
    defaults: _.extend(widgets.WidgetModel.prototype.defaults(), defaults.SceneNodeModelDefaults),
}, default_serializers(['tf_client', 'object']));

var OccupancyGridView = widgets.WidgetView.extend({
    initialize: function(args) {
        OccupancyGridView.__super__.initialize.apply(this, arguments);
        this.viewer = this.options.viewer;
    },
    render: function() {
        this.three_color = new THREE.Color(this.model.get('color'));
        this.rgb_color = {r: this.three_color.r * 255, 
                          g: this.three_color.g * 255,
                          b: this.three_color.b * 255};

        this.view = new ROS3D.OccupancyGridClient({
            rootObject: this.viewer.scene,
            ros: this.model.get('ros').get_connection(),
            tfClient: this.model.get('tf_client').get_client(),
            topic: this.model.get('topic'),
            color: this.rgb_color,