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

plugin: "hypergrid",
            columns: [],
            row_pivots: [],
            column_pivots: [],
            aggregates: {},
            sort: [],
            filters: [],
            plugin_config: {},
            dark: false,
            editable: false,
            client: false
        };
    }

    static serializers: ISerializers = {
        ...DOMWidgetModel.serializers
        // Add any extra serializers here
    };

    static model_name = "PerspectiveModel";
    static model_module = "@finos/perspective-jupyterlab";
    static model_module_version = PERSPECTIVE_VERSION;
    static view_name = "PerspectiveView";
    static view_module = "@finos/perspective-jupyterlab";
    static view_module_version = PERSPECTIVE_VERSION;
}

defaults() {
    return {...super.defaults(),
      _model_name: ExampleModel.model_name,
      _model_module: ExampleModel.model_module,
      _model_module_version: ExampleModel.model_module_version,
      _view_name: ExampleModel.view_name,
      _view_module: ExampleModel.view_module,
      _view_module_version: ExampleModel.view_module_version,
      value : 'javascript set value!!!',
      manual_cat: '{"col":"JS", "row":"JS"}',
      network: ''
    };
  }

  static serializers: ISerializers = {
      ...DOMWidgetModel.serializers,
      // Add any extra serializers here
    }

  static model_name = 'ExampleModel';
  static model_module = MODULE_NAME;
  static model_module_version = MODULE_VERSION;
  static view_name = 'ExampleView';   // Set to null if no view
  static view_module = MODULE_NAME;   // Set to null if no view
  static view_module_version = MODULE_VERSION;
}

function make_viz(args, cgm_model){
  args.container = document.getElementById(args.container_name);
  cgm_fun(args, cgm_model);

  // // exposing all of cgm, eventually want to only expose a few methods

export
class SketchModel extends DOMWidgetModel {
  defaults() {
    return {...super.defaults(),
      _model_name: SketchModel.model_name,
      _model_module: SketchModel.model_module,
      _model_module_version: SketchModel.model_module_version,
      _view_name: SketchModel.view_name,
      _view_module: SketchModel.view_module,
      _view_module_version: SketchModel.view_module_version,
      value : ''
    };
  }

  static serializers: ISerializers = {
      ...DOMWidgetModel.serializers,
      // Add any extra serializers here
    }

  static model_name = 'SketchModel';
  static model_module = MODULE_NAME;
  static model_module_version = MODULE_VERSION;
  static view_name = 'SketchView';
  static view_module = MODULE_NAME;
  static view_module_version = MODULE_VERSION;
}


export
class SketchView extends DOMWidgetView {
  sketch : Sketch

if (!this._palette) {
      // no-op if no palette
      return;
    }
    const { id, category, args, rank } = options;
    const itemId = `${id}-${category}`;
    if (Private.customItems.has(itemId)) {
      // no-op if the item is already in the palette
      return;
    }
    const item = this._palette.addItem({ command: id, category, args, rank });
    Private.customItems.set(itemId, item);
  }

  static serializers: ISerializers = {
    ...DOMWidgetModel.serializers,
  };

  static model_name = 'CommandPaletteModel';
  static model_module = MODULE_NAME;
  static model_module_version = MODULE_VERSION;
  static view_name: string = null;
  static view_module: string = null;
  static view_module_version = MODULE_VERSION;

  private _palette: ICommandPalette;

  static palette: ICommandPalette;
}

/**
 * A namespace for private data

export class ExampleModel extends DOMWidgetModel {
  defaults() {
    return {
      ...super.defaults(),
      _model_name: ExampleModel.model_name,
      _model_module: ExampleModel.model_module,
      _model_module_version: ExampleModel.model_module_version,
      _view_name: ExampleModel.view_name,
      _view_module: ExampleModel.view_module,
      _view_module_version: ExampleModel.view_module_version,
      value: 'Hello World',
    };
  }

  static serializers: ISerializers = {
    ...DOMWidgetModel.serializers,
    // Add any extra serializers here
  };

  static model_name = 'ExampleModel';
  static model_module = MODULE_NAME;
  static model_module_version = MODULE_VERSION;
  static view_name = 'ExampleView'; // Set to null if no view
  static view_module = MODULE_NAME; // Set to null if no view
  static view_module_version = MODULE_VERSION;
}

export class ExampleView extends DOMWidgetView {
  render() {
    this.el.classList.add('custom-widget');

    this.value_changed();

import { DOMWidgetModel, ISerializers } from '@jupyter-widgets/base';

import { NAME, VERSION } from '..';

export class Model extends DOMWidgetModel {
  static model_module = NAME;
  static model_module_version = VERSION;
  static view_module = NAME;
  static view_module_version = VERSION;

  static serializers: ISerializers = { ...DOMWidgetModel.serializers };

  defaults(): T {
    return {
      ...super.defaults(),
      _model_module: NAME,
      _model_module_version: VERSION,
      _view_module: NAME,
      _view_module_version: VERSION,
      icon_class: 'jp-CircleIcon',
      description: 'An Undescribed Widget',
      closable: true
    };
  }
}

export namespace Model {

return {...super.defaults(),
      _model_name: CanvasModel.model_name,
      _model_module: CanvasModel.model_module,
      _model_module_version: CanvasModel.model_module_version,
      _view_name: CanvasModel.view_name,
      _view_module: CanvasModel.view_module,
      _view_module_version: CanvasModel.view_module_version,
      width: 700,
      height: 500,
      sync_image_data: false,
      image_data: null,
    };
  }

  static serializers: ISerializers = {
    ...DOMWidgetModel.serializers,
    image_data: {
      serialize: serializeImageData,
      deserialize: deserializeImageData
    }
  }

  initialize(attributes: any, options: any) {
    super.initialize(attributes, options);

    this.canvas = document.createElement('canvas');
    this.ctx = getContext(this.canvas);

    this.resizeCanvas();
    this.drawImageData();

    this.on_some_change(['width', 'height'], this.resizeCanvas, this);

_view_name: 'XTouchMiniView',
      _view_module: MODULE_NAME,
      _view_module_version: MODULE_VERSION,
      buttons: [],
      side_buttons: [],
      rotary_encoders: [],
      rotary_buttons: [],
      faders: [],

      _controller_input: 0,
      _controller_output: 0,
    };
  }

  static serializers: ISerializers = {
    ...DOMWidgetModel.serializers,
    buttons: { deserialize: unpack_models },
    side_buttons: { deserialize: unpack_models },
    rotary: { deserialize: unpack_models },
    rotary_buttons: { deserialize: unpack_models },
    fader: { deserialize: unpack_models }
  };

  initialize(attributes: any, options: any) {
    super.initialize(attributes, options);
    if (!midi.enabled) {
      throw new Error('WebMidi library not enabled');
    }

    const input = midi.inputs.findIndex(x => x.manufacturer === "Behringer" && x.name.startsWith("X-TOUCH MINI"));
    if (input === -1) {
      throw new Error("Could not find Behringer X-TOUCH MINI input");

export class EasyFormModel extends widgets.DOMWidgetModel {
  defaults() {
    return {
      ...super.defaults(),
      _model_name: 'EasyFormModel',
      _view_name: 'EasyFormView',
      _model_module: 'beakerx',
      _view_module: 'beakerx',
      _model_module_version: BEAKERX_MODULE_VERSION,
      _view_module_version: BEAKERX_MODULE_VERSION,
      children: []
    }
  }

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

export class EasyFormView extends widgets.BoxView {
  public static get isDark(): boolean {
    return document.body.classList.contains('bx-dark-theme');
  }

  render() {
    super.render.apply(this);

    this.$el
      .addClass('beaker-easyform-container')
      .addClass('widget-vbox')
      .addClass('beaker-fieldset');

defaults() {
    return {...super.defaults(), ... {
      _model_module: "jupyter-vtk-datawidgets",
      _model_module_version: "1.0.0",
      _model_name: "VtkRendererModel",
      _view_module: "jupyter-vtk-datawidgets",
      _view_module_version: "1.0.0",
      _view_name: "VtkRendererView",
      background: [0,0,0],
      dataset: undefined,
      size: [600,400],
    }};
  }

  static serializers: ISerializers = {
    ...DOMWidgetModel.serializers,
    dataset: { deserialize: unpack_models },
  }

}