support plotly figure

.flake8

@@ -0,0 +1,11 @@
+[flake8]
+extend-ignore = E124,E128,E301,E302,E305,E402,E501,E261,W504
+# E124: closing bracket does not match visual indentation
+# E128: continuation line under-indented for visual indent
+# E301: expected 1 blank line, found 0
+# E302: expected 2 blank lines, found 1
+# E305: expected 2 blank lines after class or function definition, found 1
+# E402: module level import not at top of file
+# E501: line too long (82 > 79 characters)
+# E261: at least two spaces before inline comment
+# W504: line break after binary operator

examples/example_plotly.py

@@ -0,0 +1,21 @@
+import sortingview.views as vv
+import kachery_cloud as kcl
+import plotly.graph_objects as go
+
+
+def main():
+    kcl.use_sandbox()
+    view = example_plotly()
+
+    url = view.url(label="Plotly example")
+    print(url)
+
+
+def example_plotly():
+    fig = go.Figure(data=[go.Scatter(x=[1, 2, 3, 4], y=[10, 11, 12, 13], mode='markers')])
+    view = vv.PlotlyFigure(fig=fig)
+    return view
+
+
+if __name__ == "__main__":
+    main()

gui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fi-sci/figurl-sortingview",
   "private": false,
-  "version": "12.0.9",
+  "version": "12.0.10",
   "scripts": {
     "dev": "vite --port 3000",
     "build": "tsc && vite build && node devel/generate_file_manifest.js",
@@ -32,11 +32,13 @@
     "github-markdown-css": "^5.4.0",
     "mathjs": "^12.0.0",
     "object-hash": "^3.0.0",
+    "plotly.js": "^2.33.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.6",
     "react-icons": "^4.11.0",
     "react-markdown": "^4.3.1",
+    "react-plotly.js": "^2.6.0",
     "react-scripts": "5.0.1",
     "react-select": "^5.8.0",
     "react-syntax-highlighter": "^15.5.0",
@@ -47,6 +49,7 @@
     "@types/chroma-js": "^2.4.2",
     "@types/node": "^20.6.1",
     "@types/object-hash": "^3.0.6",
+    "@types/react-plotly.js": "^2.6.3",
     "@typescript-eslint/eslint-plugin": "^5.57.1",
     "@typescript-eslint/parser": "^5.57.1",
     "@vitejs/plugin-react": "^4.0.0",

gui/src/View.tsx

@@ -19,6 +19,7 @@ import {loadView as loadTimeseriesView} from './libraries/timeseries-views'
 import {default as loadSpikeSortingView} from './libraries/spike-sorting-views/loadView'
 import {default as loadFranklabView} from './libraries/franklab-views/loadView'
 import { EphysTracesView } from './libraries/view-ephys-traces-dev';
+import { PlotlyFigureView } from './libraries/core-views/view-plotly-figure';
 
 export type TimeseriesLayoutOpts = {
     hideToolbar?: boolean
@@ -83,6 +84,9 @@ const View: FunctionComponent<Props> = ({data, width, height, opts}) => {
             else if (data.type === 'EphysTraces') {
                 return <EphysTracesView data={data} width={width} height={height} />
             }
+            else if (data.type === 'PlotlyFigure') {
+                return <PlotlyFigureView data={data} width={width} height={height} />
+            }
         }
         else {
             const viewLoaders = [loadCoreView, loadTimeseriesView, loadSpikeSortingView, loadFranklabView]
@@ -93,7 +97,7 @@ const View: FunctionComponent<Props> = ({data, width, height, opts}) => {
             return undefined
         }
     }, [data, height, width, opts])
-    
+
     if (v) return v
 
     console.warn('Unsupported view data', data)

gui/src/ViewData.ts

@@ -14,6 +14,7 @@ import { isSortingSelectionViewData, SortingSelectionViewData } from './librarie
 import { isSummaryViewData, SummaryViewData } from "./libraries/view-summary"
 import { isTest1ViewData, Test1ViewData } from './libraries/view-test-1'
 import { EphysTracesViewData, isEphysTracesViewData } from './libraries/view-ephys-traces-dev'
+import { isPlotlyFigureViewData, PlotlyFigureViewData } from './libraries/core-views/view-plotly-figure'
 
 export type ViewData =
     CompositeViewData |
@@ -30,7 +31,8 @@ export type ViewData =
     SortingSelectionViewData |
     ExperimentalSelector1ViewData |
     Test1ViewData |
-    EphysTracesViewData
+    EphysTracesViewData |
+    PlotlyFigureViewData
 
 export const isViewData = (x: any): x is ViewData => {
     return isOneOf([
@@ -48,6 +50,7 @@ export const isViewData = (x: any): x is ViewData => {
         isSortingSelectionViewData,
         isExperimentalSelector1ViewData,
         isTest1ViewData,
-        isEphysTracesViewData
+        isEphysTracesViewData,
+        isPlotlyFigureViewData
     ])(x)
 }

gui/src/libraries/core-views/view-plotly-figure/PlotlyFigureView.tsx

@@ -0,0 +1,41 @@
+import React, { FunctionComponent, Suspense } from 'react';
+import { isEqualTo, validateObject } from '../../core-utils';
+
+const Plot = React.lazy(() => (import('react-plotly.js')))
+
+export type PlotlyFigureViewData = {
+    type: 'PlotlyFigure'
+    fig: any
+}
+export const isPlotlyFigureViewData = (x: any): x is PlotlyFigureViewData => {
+    return validateObject(x, {
+        type: isEqualTo('PlotlyFigure'),
+        fig: () => true
+    })
+}
+
+type Props = {
+    data: PlotlyFigureViewData
+    width: number
+    height: number
+}
+
+const PlotlyFigureView: FunctionComponent<Props> = ({data, width, height}) => {
+    const {fig} = data
+    return (
+        <div style={{position: 'absolute', width, height}}>
+            <Suspense fallback={<div>Loading plotly</div>}>
+				<Plot
+					data={fig.data}
+					layout={{
+                        ...fig.layout,
+                        width: width,
+                        height: height
+                    }}
+				/>
+			</Suspense>
+        </div>
+    )
+}
+
+export default PlotlyFigureView

gui/src/libraries/core-views/view-plotly-figure/index.ts

@@ -0,0 +1,3 @@
+export { default as PlotlyFigureView } from './PlotlyFigureView'
+export { isPlotlyFigureViewData } from './PlotlyFigureView'
+export type { PlotlyFigureViewData } from './PlotlyFigureView'