Add React component #255

trentfridey · 2024-04-12T17:49:33Z

What

This PR adds the react-component package, which exports a <GenomeSpy /> React component. It also adds documentation on usage and an example in the embed-examples package.

Why

This component should make it is easier to get started with GS in an existing React application.

How

The component is a thin wrapper around the embed function. Its only rendered element is the container, whose ref is passed to the embed function. It has a spec prop for initialization, and a onEmbed prop that returns the JS api object, so the user has access to updateNamedData, etc.

Notes

As it currently stands, the spec is not a reactive prop, i.e. if someone decides to update the object passed to <GenomeSpy/>, this won't trigger an update of the visualization. They should use the existing API (as returned in onEmbed). Not sure if this would be obvious to a React dev, but I don't have an idea yet as to a better compromise.

Hope this makes sense (not sure if I configured the inter-package dependencies properly). Comments welcome.

tuner · 2024-04-17T05:29:37Z

Thanks, Trent!

I'll have a look at this today or tomorrow. Meanwhile, could you update package-lock.json to get tests running: https://github.com/genome-spy/genome-spy/pull/255/checks

tuner

Seems to work! I added some comments.

When it comes to changing the spec, etc., could we implement it in pretty much the same way as react-vega does? https://vega.github.io/react-vega/?path=/story/react-vega--vegalite

Thus, when the identity of the provided spec object changes, i.e., the user provides a new spec, the component destroys the existing GenomeSpy instance and calls embed function again with the new spec?

It would be convenient to allow dynamic data to be updated in a similar way. When the user provides a new data object (which maps dataset names to data arrays) through the data attribute, those dataset arrays that have a new identity would be updated using updateNamedData.

tuner · 2024-04-17T12:08:19Z

packages/react-component/src/main.tsx

+    const [error, setError] = useState<string | undefined>()
+
+    useEffect(() => {
+        async function embedToDoc(container: HTMLDivElement | null, config: RootSpec) {


Not embedding to docs. Function name should be changed.

Thanks, should be in 093b914

tuner · 2024-04-17T12:09:40Z

packages/doc-embed/package.json

@@ -12,6 +12,7 @@
  },
  "dependencies": {
    "@genome-spy/core": "^0.51.0",
+    "@genome-spy/react-component": "^0.51.0",


Not necessary (?)

tuner · 2024-04-17T12:12:49Z

packages/embed-examples/src/reactComponent.html

+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="style.scss" />
+    <title>React Component example</title>
+    <script type="module" src="/reactComponent.jsx"></script>


<script> should be at the end of body. To make it consistent with other examples.

Fixed in a514424

tuner · 2024-04-17T12:15:46Z

packages/embed-examples/tsconfig.json

@@ -1,3 +1,6 @@
 {
+  "compilerOptions": {
+    "jsx": "react"


A path entry to packages/react-component/src could be added here to fix typings. See the /tsconfig.json at the repo root.

Added in 1abffe2

tuner · 2024-04-17T12:19:21Z

packages/react-component/src/main.tsx

+}
+
+export default function GenomeSpy ({ spec, onEmbed }: IGenomeSpyProps) {
+    const embedRef = useRef<HTMLDivElement>(null)


Could containerRef be more specific?

Thanks, should be in 093b914

tuner · 2024-04-17T12:20:50Z

packages/react-component/src/main.tsx

+    useEffect(() => {
+        async function embedToDoc(container: HTMLDivElement | null, config: RootSpec) {
+            try {
+               const api = await embed(container, config, { bare: true })


If the component is removed from the dom, embed api's finalize method should be called to ensure that all resources are released, possible listeners in the document root are removed, etc.

Thanks, should be in 093b914

tuner · 2024-04-17T12:28:29Z

packages/embed-examples/src/reactComponent.jsx

+        ],
+    }
+
+    const generateData = () => {


This is overly complex for a simple example with static data. I would provide a flat, static array of objects.

Should be fixed in 0ba4f7a

…ypes

for consistency

trentfridey · 2024-04-26T23:14:05Z

I'll have a look at this today or tomorrow. Meanwhile, could you update package-lock.json to get tests running: https://github.com/genome-spy/genome-spy/pull/255/checks

Sorry for being dense but I've looked at the workflow definition file and I'm not sure what I need to do here to get tests running.

tuner · 2024-04-30T12:59:41Z

Thanks, Trent. I'll have a look at this later this week.

tuner · 2024-05-03T12:51:37Z

Thanks, @trentfridey! I merged this PR and made some fixes in 3389e5c. In particular, resolution of types is quite difficult to get right in a monorepo that uses JavaScript with typings in JSDoc.

I still need to fix the build & publishing steps in the react-component package. I'm a bit busy right now, but I hope to be able to do it next week.

I'd like to have a separate data property, which would also be reactive. However, I'll probably create a <genome-spy> web component at some point, and it should have equivalent reactive properties. They should be aligned so that both components behave in a similar way.

And congrats, you are the first contributor to this repo! 🍾

tuner · 2024-05-16T11:23:54Z

Hi @trentfridey!

I published new versions of GenomeSpy packages. The @genome-spy/react-component package is now available for use.

I also created a small test app to ensure that packaging, etc. works. It's here: https://github.com/genome-spy/genomespy-react-example

An again, thanks for the contribution!

trentfridey added 4 commits April 12, 2024 13:45

feat(react-component): scaffold react component

4bcf855

chore: remove unused file

ba84238

fix: clean up errors in first draft of react-component

40dc186

docs(react-component): add docs for react-component

c428a43

trentfridey marked this pull request as ready for review April 17, 2024 04:34

tuner reviewed Apr 17, 2024

View reviewed changes

tuner linked an issue Apr 17, 2024 that may be closed by this pull request

Make a React example and/or component #226

Closed

trentfridey added 7 commits April 19, 2024 18:10

fix(embed-examples): simplify react component data

0ba4f7a

fix(embed-examples): add path to react-component in tsconfig to fix t…

1abffe2

…ypes

fix(react-component): rename internal functions, add finalize call

093b914

Merge branch 'master' into react-component

1027c99

build(react-component): remove default comments in vite config

5760f43

fix(embed-examples): move reactComponent script to body

a514424

for consistency

fix(embed-examples): fix dependency versions

78ffa28

tuner merged commit f676ff6 into genome-spy:master May 3, 2024
1 check failed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add React component #255

Add React component #255

trentfridey commented Apr 12, 2024 •

edited

tuner commented Apr 17, 2024

tuner left a comment

tuner Apr 17, 2024

trentfridey Apr 26, 2024

tuner Apr 17, 2024

tuner Apr 17, 2024 •

edited

trentfridey Apr 26, 2024

tuner Apr 17, 2024

trentfridey Apr 26, 2024

tuner Apr 17, 2024

trentfridey Apr 26, 2024

tuner Apr 17, 2024

trentfridey Apr 26, 2024

tuner Apr 17, 2024

trentfridey Apr 26, 2024

trentfridey commented Apr 26, 2024

tuner commented Apr 30, 2024

tuner commented May 3, 2024

tuner commented May 16, 2024

Add React component #255

Add React component #255

Conversation

trentfridey commented Apr 12, 2024 • edited

What

Why

How

Notes

tuner commented Apr 17, 2024

tuner left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tuner Apr 17, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

trentfridey commented Apr 26, 2024

tuner commented Apr 30, 2024

tuner commented May 3, 2024

tuner commented May 16, 2024

trentfridey commented Apr 12, 2024 •

edited

tuner Apr 17, 2024 •

edited