search

InsightSoftwareConsortium / itkwidgets

An elegant Python interface for visualization on the web platform to interactively generate insights into multidimensional images, point sets, and geometry.
https://itkwidgets.readthedocs.io/
Apache License 2.0
576 stars 83 forks source link

itkwidgets for javascript #668

Open Tinanuaa opened 1 year ago

Tinanuaa commented 1 year ago

Hi, I am trying to use itkwidgets in my react app, I found the itkwidgets package here https://npm.io/package/itkwidgets. After I install itkwidgets in my react app, I can import the viewer etc in a js file, the js file is like below

import {
    ViewerModel,
    ViewerView,
    LineProfilerModel,
    LineProfilerView 
  } from "itkwidgets";

  import {
    Grid 
  } from "@mui/material";
export const LiveViewer=()=>{
    return (<Grid></Grid>)
}

Then, I import LiveViewer in another tsx file and use the LiveViewer component defined above,

import React, { useEffect, useState, useRef, useMemo } from "react";
// import { useStyles } from "./Monitoring.styles";
import { useTheme } from "@mui/material/styles";
import {
  Box,
  Typography,
  Grid,
  Snackbar,
  Alert,
  avatarClasses,
  Stack,
  Button,
} from "@mui/material";

import {LiveViewer} from "./LiveViewer";

const Monitoring = () => {

  return (
    <Box sx={{ width: "100%", height: "100%" }}>

      <Grid>

        <LiveViewer/>
      </Grid>
    </Box>
  );
};
export default Monitoring;

I got the following errors, is itkwidgets compatible with typescript?

ERROR in ./node_modules/itk-vtk-viewer/src/UserInterface/icons/length-tool.svg
Module build failed (from ./node_modules/@svgr/webpack/lib/index.js):
SyntaxError: unknown file: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.
   5 |   ...props
   6 | }, svgRef) {
>  7 |   return <svg xmlnsDc="http://purl.org/dc/elements/1.1/" xmlnsCc="http://creativecommons.org/ns#" xmlnsRdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlnsSvg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="svg2" viewBox="0 0 62.221396 60.130392" height="16.970133mm" width="17.560261mm" ref={svgRef} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<defs id="defs4" /><metadata id="metadata7"><rdf:RDF><cc:Work rdf:about=""><dc:format>{"image/svg+xml"}</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><g transform="translate(-204.3732,-426.67465)" id="layer1"><rect transform="matrix(0.67893789,0.73419571,-0.73419571,0.67893789,0,0)" y={107.51627} x={484.44534} height={59.38089} width={21.540062} id="rect4140" style={{
     |                                                                                                                                                                                                                                                                                                                                                                                                                                                                           ^^^^^^^
   8 |         fill: "none",
   9 |         fillOpacity: 1,
  10 |         stroke: "#000000",
    at File.buildCodeFrameError (/workspaces/{repo}/node_modules/@babel/core/lib/transformation/file/file.js:249:12)
    at NodePath.buildCodeFrameError (/workspaces/{repo}/node_modules/@babel/traverse/lib/path/index.js:145:21)
    at PluginPass.JSXNamespacedName (/workspaces/{repo}/node_modules/@babel/plugin-transform-react-jsx/lib/create-plugin.js:97:24)
    at newFn (/workspaces/{repo}/node_modules/@babel/traverse/lib/visitors.js:181:21)
    at NodePath._call (/workspaces/{repo}/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call (/workspaces/{repo}/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (/workspaces/{repo}/node_modules/@babel/traverse/lib/path/context.js:100:31)
    at TraversalContext.visitQueue (/workspaces/{repo}/node_modules/@babel/traverse/lib/context.js:105:16)
    at TraversalContext.visitSingle (/workspaces/{repo}/node_modules/@babel/traverse/lib/context.js:79:19)
    at TraversalContext.visit (/workspaces/{repo}/node_modules/@babel/traverse/lib/context.js:133:19)
    at traverseNode (/workspaces/{repo}/node_modules/@babel/traverse/lib/traverse-node.js:24:17)
    at NodePath.visit (/workspaces/{repo}/node_modules/@babel/traverse/lib/path/context.js:107:52)
    at TraversalContext.visitQueue (/workspaces/{repo}/node_modules/@babel/traverse/lib/context.js:105:16)
    at TraversalContext.visitSingle (/workspaces/{repo}/node_modules/@babel/traverse/lib/context.js:79:19)
    at TraversalContext.visit (/workspaces/{repo}/node_modules/@babel/traverse/lib/context.js:133:19)
    at traverseNode (/workspaces/{repo}/node_modules/@babel/traverse/lib/traverse-node.js:24:17)
    at NodePath.visit (/workspaces/{repo}/node_modules/@babel/traverse/lib/path/context.js:107:52)
    at TraversalContext.visitQueue (/workspaces/{repo}/node_modules/@babel/traverse/lib/context.js:105:16)
    at TraversalContext.visitMultiple (/workspaces/{repo}/node_modules/@babel/traverse/lib/context.js:74:17)
    at TraversalContext.visit (/workspaces/{repo}/node_modules/@babel/traverse/lib/context.js:131:19)
    at traverseNode (/workspaces/{repo}/node_modules/@babel/traverse/lib/traverse-node.js:24:17)
    at NodePath.visit (/workspaces/{repo}/node_modules/@babel/traverse/lib/path/context.js:107:52)
    at TraversalContext.visitQueue (/workspaces/{repo}/node_modules/@babel/traverse/lib/context.js:105:16)
    at TraversalContext.visitSingle (/workspaces/{repo}/node_modules/@babel/traverse/lib/context.js:79:19)
    at TraversalContext.visit (/workspaces/{repo}/node_modules/@babel/traverse/lib/context.js:133:19)
    at traverseNode (/workspaces/{repo}/node_modules/@babel/traverse/lib/traverse-node.js:24:17)
    at NodePath.visit (/workspaces/{repo}/node_modules/@babel/traverse/lib/path/context.js:107:52)
    at TraversalContext.visitQueue (/workspaces/{repo}/node_modules/@babel/traverse/lib/context.js:105:16)
    at TraversalContext.visitSingle (/workspaces/{repo}/node_modules/@babel/traverse/lib/context.js:79:19)
    at TraversalContext.visit (/workspaces/{repo}/node_modules/@babel/traverse/lib/context.js:133:19)
    at traverseNode (/workspaces/{repo}/node_modules/@babel/traverse/lib/traverse-node.js:24:17)
    at NodePath.visit (/workspaces/{repo}/node_modules/@babel/traverse/lib/path/context.js:107:52)
    at TraversalContext.visitQueue (/workspaces/{repo}/node_modules/@babel/traverse/lib/context.js:105:16)
    at TraversalContext.visitSingle (/workspaces/{repo}/node_modules/@babel/traverse/lib/context.js:79:19)
    at TraversalContext.visit (/workspaces/{repo}/node_modules/@babel/traverse/lib/context.js:133:19)
    at traverseNode (/workspaces/{repo}/node_modules/@babel/traverse/lib/traverse-node.js:24:17)
    at NodePath.visit (/workspaces/{repo}/node_modules/@babel/traverse/lib/path/context.js:107:52)
    at TraversalContext.visitQueue (/workspaces/{repo}/node_modules/@babel/traverse/lib/context.js:105:16)
    at TraversalContext.visitQueue (/workspaces/{repo}/node_modules/@babel/traverse/lib/context.js:111:21)
    at TraversalContext.visitMultiple (/workspaces/{repo}/node_modules/@babel/traverse/lib/context.js:74:17)
    at TraversalContext.visit (/workspaces/{repo}/node_modules/@babel/traverse/lib/context.js:131:19)
    at traverseNode (/workspaces/{repo}/node_modules/@babel/traverse/lib/traverse-node.js:24:17)
    at NodePath.visit (/workspaces/{repo}/node_modules/@babel/traverse/lib/path/context.js:107:52)
    at TraversalContext.visitQueue (/workspaces/{repo}/node_modules/@babel/traverse/lib/context.js:105:16)
    at TraversalContext.visitSingle (/workspaces/{repo}/node_modules/@babel/traverse/lib/context.js:79:19)
    at TraversalContext.visit (/workspaces/{repo}/node_modules/@babel/traverse/lib/context.js:133:19)
    at traverseNode (/workspaces/{repo}/node_modules/@babel/traverse/lib/traverse-node.js:24:17)
    at NodePath.visit (/workspaces/{repo}/node_modules/@babel/traverse/lib/path/context.js:107:52)
    at TraversalContext.visitQueue (/workspaces/{repo}/node_modules/@babel/traverse/lib/context.js:105:16)
    at TraversalContext.visitMultiple (/workspaces/{repo}/node_modules/@babel/traverse/lib/context.js:74:17)

ERROR in ./node_modules/itk-vtk-viewer/node_modules/vtk.js/Sources/Interaction/Widgets/PiecewiseGaussianWidget/index.js 490:25-47
export 'default' (imported as 'ComputeHistogramWorker') was not found in './ComputeHistogram.worker' (module has no exports)

ERROR in ./node_modules/itk-vtk-viewer/node_modules/vtk.js/Sources/Rendering/Core/Camera/index.js 502:6-17
export 'quat'.'toMat4' (imported as 'quat') was not found in 'gl-matrix' (possible exports: add, calculateW, clone, conjugate, copy, create, dot, equals, exactEquals, exp, fromEuler, fromMat3, fromValues, getAngle, getAxisAngle, identity, invert, len, length, lerp, ln, mul, multiply, normalize, pow, random, rotateX, rotateY, rotateZ, rotationTo, scale, set, setAxes, setAxisAngle, slerp, sqlerp, sqrLen, squaredLength, str)

ERROR in ./node_modules/itk-vtk-viewer/src/ViewerStore.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /workspaces/{repo}/node_modules/itk-vtk-viewer/src/ViewerStore.js: Support for the experimental syntax 'decorators' isn't currently enabled (23:3):

  21 | class MainUIStore {
  22 |   uiContainer = null
> 23 |   @observable collapsed = false
     |   ^
  24 |   @observable annotationsEnabled = true
  25 |   @observable axesEnabled = false
  26 |   @observable fullscreenEnabled = false

Add @babel/plugin-proposal-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-proposal-decorators) to the 'plugins' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-decorators) to the 'plugins' section to enable parsing.
    at instantiate (/workspaces/{repo}/node_modules/@babel/parser/lib/index.js:72:32)
    at constructor (/workspaces/{repo}/node_modules/@babel/parser/lib/index.js:367:12)
    at Parser.raise (/workspaces/{repo}/node_modules/@babel/parser/lib/index.js:3706:19)
    at Parser.expectOnePlugin (/workspaces/{repo}/node_modules/@babel/parser/lib/index.js:3763:18)
    at Parser.parseDecorator (/workspaces/{repo}/node_modules/@babel/parser/lib/index.js:15071:10)
    at /workspaces/{repo}/node_modules/@babel/parser/lib/index.js:15754:32
    at Parser.withSmartMixTopicForbiddingContext (/workspaces/{repo}/node_modules/@babel/parser/lib/index.js:14547:14)
    at Parser.parseClassBody (/workspaces/{repo}/node_modules/@babel/parser/lib/index.js:15741:10)
    at Parser.parseClass (/workspaces/{repo}/node_modules/@babel/parser/lib/index.js:15715:22)
    at Parser.parseStatementContent (/workspaces/{repo}/node_modules/@babel/parser/lib/index.js:14919:21)
    at Parser.parseStatement (/workspaces/{repo}/node_modules/@babel/parser/lib/index.js:14871:17)
    at Parser.parseBlockOrModuleBlockBody (/workspaces/{repo}/node_modules/@babel/parser/lib/index.js:15531:25)
    at Parser.parseBlockBody (/workspaces/{repo}/node_modules/@babel/parser/lib/index.js:15522:10)
    at Parser.parseProgram (/workspaces/{repo}/node_modules/@babel/parser/lib/index.js:14785:10)
    at Parser.parseTopLevel (/workspaces/{repo}/node_modules/@babel/parser/lib/index.js:14772:25)
    at Parser.parse (/workspaces/{repo}/node_modules/@babel/parser/lib/index.js:16799:10)
    at parse (/workspaces/{repo}/node_modules/@babel/parser/lib/index.js:16826:26)
    at parser (/workspaces/{repo}/node_modules/@babel/core/lib/parser/index.js:52:34)
    at parser.next (<anonymous>)
    at normalizeFile (/workspaces/{repo}/node_modules/@babel/core/lib/transformation/normalize-file.js:87:38)
    at normalizeFile.next (<anonymous>)
    at run (/workspaces/{repo}/node_modules/@babel/core/lib/transformation/index.js:31:50)
    at run.next (<anonymous>)
    at transform (/workspaces/{repo}/node_modules/@babel/core/lib/transform.js:29:41)
    at transform.next (<anonymous>)
    at step (/workspaces/{repo}/node_modules/gensync/index.js:261:32)
    at /workspaces/{repo}/node_modules/gensync/index.js:273:13
    at async.call.result.err.err (/workspaces/{repo}/node_modules/gensync/index.js:223:11)
    at /workspaces/{repo}/node_modules/gensync/index.js:189:28
    at /workspaces/{repo}/node_modules/@babel/core/lib/gensync-utils/async.js:84:7
    at /workspaces/{repo}/node_modules/gensync/index.js:113:33
    at step (/workspaces/{repo}/node_modules/gensync/index.js:287:14)
    at /workspaces/{repo}/node_modules/gensync/index.js:273:13
    at async.call.result.err.err (/workspaces/{repo}/node_modules/gensync/index.js:223:11)

webpack compiled with 4 errors and 1 warning
PaulHax commented 1 year ago

Let me suggest using the JavaScript project that backs itkwidgets: https://github.com/Kitware/itk-vtk-viewer

And see PR https://github.com/Kitware/itk-vtk-viewer/pull/485 for how to bundle the viewer into your project.

aylward commented 1 year ago

Also, if you are looking for a javascript medical image viewer to integrate into a new app, you may also want to look at VolView: Try it: https://volview.netlify.app/ See the open-source code: https://github.com/Kitware/VolView

s

On Thu, Jun 1, 2023 at 9:09 AM Paul Elliott @.***> wrote:

Let me suggest using the JavaScript project that backs itkwidgets: https://github.com/Kitware/itk-vtk-viewer

And see PR Kitware/itk-vtk-viewer#485 https://github.com/Kitware/itk-vtk-viewer/pull/485 for how to bundle the viewer into your project.

— Reply to this email directly, view it on GitHub https://github.com/InsightSoftwareConsortium/itkwidgets/issues/668#issuecomment-1572026273, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACEJLYK4UM5EDACMKRKKFTXJCIBBANCNFSM6AAAAAAYW2KBBE . You are receiving this because you are subscribed to this thread.Message ID: @.*** com>

-- Stephen R. Aylward, Ph.D. Senior Director of Strategic Initiatives Chair of MONAI Advisory Board

Kitware: Delivering innovation.

Tinanuaa commented 1 year ago

Let me suggest using the JavaScript project that backs itkwidgets: https://github.com/Kitware/itk-vtk-viewer

And see PR Kitware/itk-vtk-viewer#485 for how to bundle the viewer into your project.

Hi Paul, thanks for the recommendation, but the errors I had above are all related to itk-vtk-viewer and the PR doesn't seem to relate to the errors above.

PaulHax commented 1 year ago

Your right, the errors are from itk-vtk-viewer. Seems your setup is trying to build itk-vtk-viewer directly. You should not need to. I dont think the itkwidget npm package is maintained.

If you want to use the viewer in your project, follow the pattern in https://github.com/Kitware/itk-vtk-viewer/pull/485

Or pull the pre-build itkVtkViewer.js bundle from the CDN, like this project: https://github.com/InsightSoftwareConsortium/itk-viewer-bootstrap-ui/blob/main/index.html

Tinanuaa commented 1 year ago

Your right, the errors are from itk-vtk-viewer. Seems your setup is trying to build itk-vtk-viewer directly. You should not need to. I dont think the itkwidget npm package is maintained.

If you want to use the viewer in your project, follow the pattern in Kitware/itk-vtk-viewer#485

Or pull the pre-build itkVtkViewer.js bundle from the CDN, like this project: https://github.com/InsightSoftwareConsortium/itk-viewer-bootstrap-ui/blob/main/index.html

Hi PaulHax, I tried to play with itk-vtk-viewer, I'm using create-react-app typescript template as a start, and I followed this link(https://kitware.github.io/itk-vtk-viewer/docs/embeddedViewer.html), I can display the image like this image

but I can't see a histogram like this image

Is there an example for react-app so I can try to set up a live viewer with histogram just like what itkwidgets has?(https://hub.ovh2.mybinder.org/user/insightsoftware-tium-itkwidgets-ip6sy2yi/doc/tree/examples/Hello3DWorld.ipynb)

I tried to follow https://github.com/Kitware/itk-vtk-viewer/pull/485 to set up itk-vtk-viewer in the create-react-app typescript template, I can set the publicPath to '', but I can't find the pipeline.worker.js and I don't know how I can lift it. I'm using craco to change the config for the create-react-app app. And after I changed the publicPath, I still can't import itk-vtk-viewer, the error is 

Failed to parse source map from '/workspaces/itk-vtk-viewer-pg/my-app-ts-itk-vtk-viewer/node_modules/itk-vtk-viewer/dist/itkVtkViewer.js.map' file: Error: ENOENT: no such file or directory, open '/workspaces/itk-vtk-viewer-pg/my-app-ts-itk-vtk-viewer/node_modules/itk-vtk-viewer/dist/itkVtkViewer.js.map'