metacell / geppetto-meta Goto Github PK

Also a requested feature for react-sortabe-tree: frontend-collective/react-sortable-tree#245

Use development branch of geppetto-client instead of splitRefactoring

Find out how to use yarn alias if project is sub-dependency.
Currently, aliased npm package cannot be found

In order to get the props we are using react-docgen, which in theory should work with typescript:

If you are using flow or typescript then react-docgen can also extract the type annotations.

In reality, parsing FlexLayout Layout.tsx currently is not working with an error occurring at this line.

In order to surpass this problem a dummy js file called FlexLayoyt.Layout.js was created to define the proptypes in a standard react/javascript format.

Ideally that would not be necessary, and that's the reason of this card.

Depends on #2

API Doc (https://github.com/openworm/org.geppetto.docs/blob/feature_geppettomodel/source/api-workflows.md).

As orientation: we need the documented methods + last 4 for import/export.

Can use a Github action for this: https://github.com/marketplace/actions/npm-publish

The latest deployed on https://geppetto.metacell.us/ doesn't load dicom viewer with error:

ami 0.32.0 (three 0.99.0)
ami.js:33395 TypeError: Class constructor eA cannot be invoked without 'new'
invalid slice geometry - exiting...
oops... something went wrong...

Currently the conversion of the README.md of a component to a rendered showcase entry in the geppetto-showcase has a rule that states that the filename of the ComponentToShowcase and the component name itself should be the same. (f.e. ConnectivityComponent should be written in a file named ConnectivityComponent.js)

We should have an optional parameter to allow different names between components and filenames.

as per image, this is what I get from the search component readme that has a quite long description and code snippet.

In continuation of the work performed for #13 on #62 a couple of new enhancements are required:

Core changes:

The goal of these changes is to decrease the coupling between the canvas and Geppetto 'opinionated' VisualCapability (which in turn relies on the ModelFactory initialization, interaction with SceneController).

the actual mantra of the Canvas is

Show every instance that has VisualCapability and take the 3d specs from its VisualType

The main improvement is to add compatibility of the Canvas with ASimpleInstance. The VisualCapability and VisualType are in SimpleInstance replaced with a direct reference to the VisualValue.

So tha mantra will change in

Show every instance that has a Position, a VisualType or a VisualValue and take the position from its VisualType/VisualValue.

• Collect/evaluate any reference to VisualCapability type and functions (notice that the capability methods are added to instances
• Remove all capability function calls (like show, hide, getColor, select etc.) and replace with props callbacks to the SceneController (if given)
• Use the presence of VisualType or VisualValue to recognize the instances to be shown
• Use the VisualType/VisualValue to extract visualization information

Small changes:

• Add flip feature to Canvas
• Handle question:

If, on the application, I do not setup the color I want for an instance that I provide to the Canvas (proxyinstance) and the Canvas automatically sets up a color for it, how does the application knows which color was assigned?

• Handle:

We (now) control the camera (position, rotation) through props (camOptions).
However, the movement in the scene doesn't go through the canvas component but rather affects the scene directly (using Threejs TrackballControls).
If we don't keep track of the cameraUpdates (using the camera handler) future renders of the canvas component will pass a past position in the camOptions props (making the camera jump to a previous place)
I can see this being problematic if the canvas render happens before the position is updated in the handler

• I haven't confirmed yet but it seems cameraHandler is not being called on rotation changes

• Improve logic and provide default selection handler

• Add example to showcase with simple instances

• short project description of subfolders
• git subtree workflow

Tasks

• Add geppetto-ui as dependency to a new React application without using geppetto-client and geppetto-core
• Resolve any issues that might arise
• Resolve any dependency issues with React version 17.x.x
• Create bundle and compile TS to JS (example: https://github.com/ccnokes/dom-event-utils, https://github.com/Microsoft/TypeScript-Babel-Starter )
• Publish first version to npm so that we can use it in other projects

Nice overview: https://betterstack.dev/blog/npm-package-best-practices/#heading-publishing-process

Goal. the published version should work without issues in a new create-react-app project

Known issues

• geppetto-ui defines react and react-dom dependency with 16.x.x version. Causes Invalid Hook error when parent app has React 17.x.x. version
• @fortawesome/fontawesome-svg-core is missing as dependency, it is present in geppetto-client and since packages are often used together this wasn't noticed so far
• TreeViewer won't work with React 17.x.x (#65)
• geppetto-ui implicitly assumes the presence of a material-ui theme together with some specific attributes such as theme.palette.button.main (CustomToolbar.js). That's not an issue per se, but we have to document it or provide a fallback.

When double-clicking in the dicom viewer the application crashes with "Invalid dimension provided." error

When I zoom into the image in the showcase, I see the screenshot. Having worked on the dataset myself, I think it is possible that the viewer is having one of two issues:

1. Either not loading the bottom most images from the image pyramid -- I think there may actually be more detailed images in the pyramid that it just is failing to load - OR -
2. Allowing the user to zoom in too far into the images at the bottom of the pyramid

Either way, the experience should be that the user never sees something like the screen shot; if there are no more detailed images to load it should prevent the user from zooming in beyond a "good looking" resolution at the bottom.

In the frontend, developers can utilize jupyter-geppetto to enable bidirectional websocket communication to synchronize models.

The ComponentSync Jupyter widget in jupyter_geppetto.js updates the state of an associated component by calling the setState function. That only works for Class components though.

Functional Components
Since React encourages to use functional components and since this is already widely practiced, we should support this as well.

Redux
If the application uses redux, developers might want to store the data in the redux store instead of a component.

Generic
Instead of implementing different integrations in the ComponentSync widget, we could also provide a callback that the developer implements, the developer should be able to choose where and how the value updates of a model should be stored.

react-sortable-tree doesn't work with 17.x.x React version: frontend-collective/react-sortable-tree#840

I noticed that the menu showcase is very slow loading and, which is unexpected considered that it shouldn't depend on a lot of data.

A nice improvement would be to see the menu configuration file when expanding the code to see the full example directly in the showcase. An option would be to inline the content of that json file rather than importing it.

Allow the use of images with relative path.
For now it should only work with full path to hosted images like:

![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png 'Logo Title Text 1')

Maybe try out https://github.com/wclr/yalc

From slack:

It appears that the geppetto-showcase+geppetto.js development flow is now broken with the geppetto-meta structure.
What I mean with that is: if we change something under geppetto.js it won't automatically update its content for the geppetto-showcase (because yarn install of local files appears to only copy the content at installation time).
Before the geppetto-meta changes we were able to have this hot reload / watch behavior.
I spent some time trying to detect what I might have missed but unfortunately without success (The only difference I can spot is the location of the package.json file).
I read online comments suggesting yarn link but I remember that we stopped using that command on purpose (but I don't remember why, do you @tarelli?).
Either way, I tried the yarn link and I have the following problem:
a) If I run yarn on the geppetto.js folder:
We have the error shown on image 1. This seems to happen because we have multiple react packages in our workspace
b) If I don't run yarn on the geppetto.js folder:
It complains that we don't have all the packages (image 2)
I'm sharing this with you so you would be aware of this and potentially get your input on the topic

The difference is the structure of the repo.
Previously we had one application which contained geppetto-showcase and geppetto-client.
And now we want to have geppetto-showcase application to use geppetto.js.
I can't find a documented explanation to justify this issue, but I created a branch with the changes that are required to make it work. This is just a POC to show you clearly the difference
You can compare it against meta here

Running npm install results in multiple packages missing:

Curiously, running yarn install does not.

• geppettoengine -> geppetto-meta
• prepare each project to be published as independent package
• resolve geppettoengine/.. imports
• check dependencies between geppetto-core/client/ui and add to peer dependency list
• test each project in a create-react-app blank setup

Known broken functionality

• Absolute paths
  • Example: used in TreeVisualizerControllerDat.js: geppetto/node_modules/@geppettoengine/geppetto-client/js/components/widgets/treevisualiser/treevisualiserdat/TreeVisualiserDAT.js
  • geppetto/node_modules/@geppettoengine/geppetto-client/geppetto-client/js/components/interface/3dCanvas/3dparticle.png

But I don't think they work in most projects since they expect a geppetto folder to be present.

From @vidhya-metacell

I see style, innerStyle and className in the package
that could be added
gives more flexibility

Upon clicking in tree viewer I get the following error:

See https://openseadragon.github.io/docs/OpenSeadragon.html # navImages

3D Canvas
VR Canvas

• Ordered lists
• Unordered lists
• Links

Possible cause might be the custom generation of HTML from the markdown files

Potentially a package version problem

• https://github.com/MetaCell/geppetto-website/tree/meta

There are some broken paths assuming geppetto-client to be located in a sub directory, we should use the package path here instead of relative file paths

• Update alias paths in webpack config
• Update Pages.js component imports
• Broken path in ShowcaesUtils.js::getProps
• CanvasVRMarkdown and Canvas3DMarkdown components are missing in geppetto-client/geppetto-ui but are used in Pages.js -> add missing components (feature brach 218)

Add an example of the search component to geppetto-showcase

See https://stackoverflowteams.com/c/metacell/questions/27/28#28 for a step by step guide on adding new components to the geppetto showcase

Image below shows webpack memory consumption for geppetto-website and ifn respectively. The goal of this issue is to try to understand if the disparity between memory usage is reasonable or if there's something we can improve on geppetto-website

When user returns to the homepage of the geppetto showcase, by clicking back or in the page title, the component that was previously shown should no longer be highlighted in the drawer.

Follow up of Redux integration

https://github.com/sass/node-sass/releases

Currently used version (4.x.x) only supports node version <= 14

• Current documentation: https://github.com/openworm/org.geppetto.docs (http://docs.geppetto.org/en/latest/devdocs.html)
• Geppetto Meta website will be the new entry point
• Reuse Geppetto Showcase Markdown approach
• For development documentation we can also think about using github wiki or gitbook https://www.gitbook.com/
• Or other tools: Sphinx, etc...

From #17

Potentially allow more code snippets on the markdown, if that's something interesting to have