feat: Update Matplotlib plugin to register widget view (#189)

- Now can be embedded and/or used in deephaven.ui
- Renamed components from MatPlotLib to Matplotlib to match the product
name
- Styling set directly on element... can't register a styles component,
should we have an app level render for components?
- Tested with deephaven.ui:
```
from deephaven import ui

@ui.component
def foo():
    import matplotlib.pyplot as plt
    import numpy as np

    from matplotlib.patches import PathPatch
    from matplotlib.path import Path

    N = 400
    t = np.linspace(0, 2 * np.pi, N)
    r = 0.5 + np.cos(t)
    x, y = r * np.cos(t), r * np.sin(t)

    fig, ax = plt.subplots()
    ax.plot(x, y, "k")
    ax.set(aspect=1)
    return fig

f = foo()
```

plugins/matplotlib/src/js/package.json

@@ -35,11 +35,13 @@
     "react": "^17.0.2"
   },
   "dependencies": {
-    "@deephaven/components": "^0.40.0",
-    "@deephaven/dashboard": "^0.40.0",
-    "@deephaven/jsapi-bootstrap": "^0.40.0",
-    "@deephaven/jsapi-types": "^0.40.0",
-    "@deephaven/log": "^0.40.0",
+    "@deephaven/components": "^0.58.0",
+    "@deephaven/dashboard": "^0.58.0",
+    "@deephaven/icons": "^0.58.0",
+    "@deephaven/jsapi-bootstrap": "^0.58.0",
+    "@deephaven/jsapi-types": "^0.58.0",
+    "@deephaven/log": "^0.58.0",
+    "@deephaven/plugin": "^0.58.0",
     "shortid": "^2.2.16"
   },
   "publishConfig": {

plugins/matplotlib/src/js/src/MatplotlibPlugin.ts

@@ -0,0 +1,13 @@
+import { type WidgetPlugin, PluginType } from '@deephaven/plugin';
+import { vsGraph } from '@deephaven/icons';
+import { MatplotlibView } from './MatplotlibView';
+
+export const MatplotlibPlugin: WidgetPlugin = {
+  name: '@deephaven/js-plugin-matplotlib',
+  type: PluginType.WIDGET_PLUGIN,
+  supportedTypes: 'matplotlib.figure.Figure',
+  component: MatplotlibView,
+  icon: vsGraph,
+};
+
+export default MatplotlibPlugin;

plugins/matplotlib/src/js/src/MatPlotLibPanel.tsx → plugins/matplotlib/src/js/src/MatplotlibView.tsx

@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import React, { CSSProperties, useEffect, useState } from 'react';
 import { useApi } from '@deephaven/jsapi-bootstrap';
-import type { Table } from '@deephaven/jsapi-types';
+import type { Table, ViewportData } from '@deephaven/jsapi-types';
 import Log from '@deephaven/log';
-import { PanelProps } from '@deephaven/dashboard';
+import { WidgetComponentProps } from '@deephaven/plugin';
 
-const log = Log.module('@deephaven/js-plugin-matplotlib.MatPlotLibPanel');
+const log = Log.module('@deephaven/js-plugin-matplotlib.MatplotlibView');
 
 enum InputColumn {
   key = 'key',
@@ -15,28 +15,22 @@ enum InputKey {
   revision = 'revision',
 }
 
-export type MatPlotLibExportedObject = {
-  fetch: () => unknown;
+export const MatplotlibViewStyle: CSSProperties = {
+  height: '100%',
+  width: '100%',
+  display: 'contents',
 };
 
-export type MatPlotLibWidget = {
-  type: string;
-  getDataAsBase64: () => string;
-  exportedObjects: MatPlotLibExportedObject[];
-};
-
-export type MatPlotLibPanelProps = {
-  fetch: () => Promise<MatPlotLibWidget>;
-} & PanelProps;
-
-export type MatPlotLibPanelState = {
-  imageData?: string;
+export const MatplotlibViewImageStyle: CSSProperties = {
+  height: '100%',
+  width: '100%',
+  objectFit: 'contain',
 };
 
 /**
  * Displays a rendered matplotlib from the server
  */
-export function MatPlotLibPanel(props: MatPlotLibPanelProps): React.ReactNode {
+export function MatplotlibView(props: WidgetComponentProps): JSX.Element {
   const { fetch } = props;
   const [imageSrc, setImageSrc] = useState<string>();
   const [inputTable, setInputTable] = useState<Table>();
@@ -59,11 +53,14 @@ export function MatPlotLibPanel(props: MatPlotLibPanelProps): React.ReactNode {
         table.applyFilter([
           keyColumn.filter().eq(dh.FilterValue.ofString(InputKey.revision)),
         ]);
-        table.addEventListener(dh.Table.EVENT_UPDATED, ({ detail: data }) => {
-          const newRevision = data.rows[0].get(valueColumn);
-          log.debug('New revision', newRevision);
-          setRevision(newRevision);
-        });
+        table.addEventListener(
+          dh.Table.EVENT_UPDATED,
+          ({ detail: data }: CustomEvent<ViewportData>) => {
+            const newRevision = data.rows[0].get(valueColumn);
+            log.debug('New revision', newRevision);
+            setRevision(newRevision);
+          }
+        );
         table.setViewport(0, 0, [valueColumn]);
       }
       openTable();
@@ -96,12 +93,16 @@ export function MatPlotLibPanel(props: MatPlotLibPanelProps): React.ReactNode {
   );
 
   return (
-    <div className="mat-plot-lib-panel">
-      {imageSrc !== undefined && <img src={imageSrc} alt="MatPlotLib render" />}
+    <div className="matplotlib-view" style={MatplotlibViewStyle}>
+      {imageSrc !== undefined && (
+        <img
+          src={imageSrc}
+          alt="Matplotlib render"
+          style={MatplotlibViewImageStyle}
+        />
+      )}
     </div>
   );
 }
 
-MatPlotLibPanel.COMPONENT = 'MatPlotLibPanel';
-
-export default MatPlotLibPanel;
+export default MatplotlibView;

plugins/matplotlib/src/js/src/index.ts

@@ -1,2 +1,3 @@
-export * from './MatPlotLibPanel';
-export * from './DashboardPlugin';
+import { MatplotlibPlugin } from './MatplotlibPlugin';
+
+export default MatplotlibPlugin;

plugins/matplotlib/src/js/vite.config.ts

@@ -11,7 +11,16 @@ export default defineConfig(({ mode }) => ({
       formats: ['cjs'],
     },
     rollupOptions: {
-      external: ['react', 'react-dom', '@deephaven/jsapi-bootstrap'],
+      external: [
+        'react',
+        'react-dom',
+        '@deephaven/components',
+        '@deephaven/dashboard',
+        '@deephaven/icons',
+        '@deephaven/jsapi-bootstrap',
+        '@deephaven/log',
+        '@deephaven/plugin',
+      ],
     },
   },
   define: