Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

itkwidgets for javascript #668

Open
Tinanuaa opened this issue Jun 1, 2023 · 5 comments
Open

itkwidgets for javascript #668

Tinanuaa opened this issue Jun 1, 2023 · 5 comments

Comments

@Tinanuaa
Copy link

Tinanuaa commented Jun 1, 2023

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
Copy link
Collaborator

PaulHax commented Jun 1, 2023

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.

@aylward
Copy link
Member

aylward commented Jun 1, 2023 via email

@Tinanuaa
Copy link
Author

Tinanuaa commented Jun 2, 2023

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
Copy link
Collaborator

PaulHax commented Jun 5, 2023

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

@floryst floryst mentioned this issue Jun 5, 2023
Closed
@Tinanuaa
Copy link
Author

Tinanuaa commented Jun 6, 2023 •
edited
Loading

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 Kitware/itk-vtk-viewer#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'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@aylward @Tinanuaa @PaulHax