xyflow / web Goto Github PK

• implement filter functionality

The current dagre example initialises the layouting graph just once and will not work if new nodes are added or removed.

We should either clarify this limitation of the example (and suggest how one may overcome it) or update the example to work on dynamic graphs.

We need to find a way to define a separate index for React Flow and Svelte Flow, so that you only get Svelte related results when you are under /svelte-flow.

Ideas to solve this:

• create a docsearch for the current staging domain and see if that's configurable somehow
• create our own index with algolia
• check out other search frameworks / services

• How to add/remove nodes
• How to add/remove edges
• Simple tricks for better performance
• ???

It's confusing that width and height can be passed as node options but they don't have any effect. The recommended way of passing an initial size to a node is to set the style option. Maybe we can document that somewhere?

When there are two authors on a blog post (see image on /blog page), the profile images get squished horizontally.

We need more space for the content sections of the Docs/API/Examples. How can we break out of the max width of the page. Is there any way to define the max width on page level?

I'm not super happy with how our current API reference is organised; although it surfaces all the important information quickly it does so in a seemingly unstructured way. I want to use this issue to collect some references of other package and API docs and see if we can come up with something clearer.

Component docs:

• Radix-UI (obviously)
• MUI
• floating-ui

Hook docs:

• useHooks
• react-hook-form
• ahooks

API docs:

These ones are not so relevant to us (we're not documenting a HTTP API) but I still find the way they present information interesting.

• Stripe (duh)

• /react-flow/pro
• /react-flow/pro/pricing
• /react-flow/pro/enterprise
• /react-flow/pro/examples

Inspiration:

• https://swiperjs.com/swiper-api#parameters
• https://swiperjs.com/swiper-api#manipulation-methods

the newly published blog post from our old website should be available in the new one. https://reactflow.dev/blog/svelte-flow-alpha-xyflow/

Currently we can't display svelte examples on our website. We wanted to use sandpack / codesandbox but for some reasons it doesn't work.

I opened an issue in the sandpack repo codesandbox/sandpack#961 and one in the codesandbox-client repo codesandbox/codesandbox-client#7750 . My hope is that by updating their internal Svelte transpiling pipeline the issues just go away, but that's not for sure. For now I would like to wait for another one or two weeks and see if there is any progress with those issues. On Discord they told me that someone will look into it.

If there are any other ideas besides embedding a Stackblitz iframe, here is the place to collect those ideas.

Before publishing it, we should add some more context and information to the repo and explain what you can do with it.

• readme
  • intro image (ask facu for dark mode)
  • overview on what the repo contains and how its structured
  • installation and turborepo
  • how to run individual apps
  • staging and production urls
  • xyflow pro ad
  • contact us
• contributing
  • git workflow (also for ourselves)
• license
  • MIT
• ethical standards / code of conduct
  • same as in react-flow repo or just reference to it?
• issue template?
  • this will most often be used for issues in the docs
• changelog?
  • not sure how we'll do it for the individual apps
• sponsor button?
  • can we add a link to xyflow pro?

instead of xyflow | react | svelte -> xyflow | React Flow | Svelte Flow

• implement design

The intro section of the xyflow homepage is overlapping on smaller devices. This should be adjusted to match the website design (see figma).

Description

I want to implement full diagram PNG export.
The documentation contains an example using html-to-image library about downloading the diagram as PNG:

• documentation
• Code sandbox

Unfortunately, the image downloaded from the example is cropped on large diagrams. This should not happen judging by the comment:

// we calculate a transform for the nodes so that all nodes are visible

In addition the image is very pixelated.

Setting pixelRatio: 4 seems to fix the pixelation, but I was unable to stop the image cropping.

Expected behavior

The documentation should contain an example on downloading full diagram as PNG that:

• Is high quality
• Does not crop the image

Investigate which service is suitable for us and connect our contact forms (general + enterprise) to it.

Our blog post previews are the classic "buttons that work like links". I found this really surprising when, for example, cmd+clicking one of these cards didn't open a new tab but instead navigated the current tab.

I think it would be better if the whole card were an anchor rather than the Read more (which incidentally cmd+clicking on will still navigate the current page).

1. open https://xyflow-docs-staging.vercel.app/react-flow/docs
2. click any item from a category in the sidebar
3. the "The Viewport" item is removed

• redefine final content and structure @johnrobbjr (basically redo the format)
• implement design
• make a better version of the thincrust/opencore graphic
• styling for mobile
• update links
• Code embedded github star chart

Make it a bit more interesting by showing three handles at the bottom (green/orange/red) - depending where you start the edge, the connection line should be green, orange or red.

implement the showcase slider

• Implement design
  • Warning/notice components
  • Widescreen images and code snippets.
  • Image captions

• Hydration errors

I think these can be fixed by removing the <Link /> component within a <ContentGridItem /> that has a route prop (for example in LibraryCards).

• hydration error on http://localhost:3001/
• hydration error on http://localhost:3001/blog

• Next Image Warnings

Not sure what's the best way to configure the Next image components in the showcase slider.

Mastodon, Bluesky, Twitter, and Discord links should be in the footer
Contact should also be there!

• make the 4 cards clickable somehow
• Make sure all the links on the page go to the right place

with the new release, we are introducing CSS variables as another option to customize the default styling of xyflow. We should document the available variables somehow:

--edge-stroke-default: #b1b1b7;
  --edge-stroke-width-default: 1;
  --edge-stroke-selected-default: #555;

  --connectionline-stroke-default: #b1b1b7;
  --connectionline-stroke-width-default: 1;

  --attribution-background-color-default: rgba(255, 255, 255, 0.5);

  --minimap-background-color-default: #fff;

  --background-pattern-dot-color-default: #91919a;
  --background-pattern-line-color-default: #eee;
  --background-pattern-cross-color-default: #e2e2e2;
  --node-color-default: inherit;
  --node-border-default: 1px solid #1a192b;
  --node-background-color-default: #fff;
  --node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
  --node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;

  --handle-background-color-default: #1a192b;
  --handle-border-color-default: #fff;

  --selection-background-color-default: rgba(0, 89, 220, 0.08);
  --selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);

  --controls-button-background-color-default: #fefefe;
  --controls-button-background-color-hover-default: #f4f4f4;
  --controls-button-color-default: inherit;
  --controls-button-color-hover-default: inherit;
  --controls-button-border-color-default: #eee;
  --controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

• Add content for the other case studies
• make the OneSignal screenshot better (refer to the Doubleloop screenshot)
• change drop shadow behind image to the nice gradient border in Facu's design
• Make this linked from the Pro page
• Add closing element above footer on overview page (check Facu's designs)
• Improve readability with font style changes (reference other newspaper interview websites, how they style the questions vs. answers (waiting for #56)
• change button to pro variation at the bottom of case study page

Describe the Bug

The demo code on https://reactflow.dev/docs/examples/overview/ does not run correctly on the latest version because of the missing width and height

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Initialize project with npm init react-app <app_name>
2. Copy the code for App.js and initial-elements.js from https://reactflow.dev/docs/examples/overview/
3. npm start

Expected behavior

What's shown in the feature overview

Screenshots or Videos

The app worked after adding the height

Platform

• OS: Linux
• Browser: Chrome/Firefox
• Version: Chrome 103.0.5060.53 , Firefox 103.0.2

Additional context

No response

When adding a component inside of a case study markdown file, an error is thrown. Maybe because it's inside of the component?

See commit (this code throws the below error): bf8b12a

Server Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

This error happened while generating the page. Any console logs will be displayed in the terminal window.

Trying to make this change to make the answer text in the Case Studies more easily scannable, referencing style of interviews like this one

it seems like the layouting guide is missing in the new docs: https://xyflow-docs-staging.vercel.app/react-flow/docs

• Make the timeline UI into just a paragraph of text (maybe with an image above it?)
• Find / create a new image for our footer that includes the whole team
• Create high-fidelity image to use at top of about page to replace current draft image

urls linking to pro platform and svelte examples are currently hardcoded. To have an encapsulated staging and production environment we should link these urls should be set in vercel for each environment seperately

• implement design

With the current React Flow docs site, we hand-maintain an object that contains the type information for things like interfaces and functions and then use that to render an API reference. It'd be much nicer if we could derive that object as JSON by just parsing the modules we care about documenting.

This kills two birds with one stone because it'll encourage us to better document the source code!

I did some initial experimentation with TSDoc, which seemed ideal because it even had a built-in JSON export option. Unfortunately it seems entirely geared up to work at the level of "packages" rather than on individual modules, and I fear that may just be overkill.

Ideally we have a local utility package that let's us do xy-export-types react/types/edges and we get just the types in that module back as JSON. Unfortunately that means the path forward looks like...

Using the typescript compiler API

The good news is you can import typescript as a package and start calling the compiler, walking the AST, etc straight from any ol' script: https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API

The bad news is the compiler API is basically undocumented and quite complicated.

Here's the todo list in order-ish of complexity:

• Scan a single file and export any public interfaces.
• Export any public non-function consts.
• Export any public functions.
• Export any public types including union types.
• Squash multiple source files into a single JSON output.

As a first-pass I'd like to end up with output like this:

[ { "kind": "interface"
  , "name": "EdgeLabelOptions"
  , "docs": "..."
  , "fields": 
    [ { "name": "label", "type", "string | ReactNode", "optional": true }
    , ...
    ]
  }
]

On a second go round I'd like a better representation for referenced types, so we can generate links and all that.

This issue is frustrating because there are a couple of tools out there but they seemed far more geared towards generating entirely automated docs sites, but we have Opinions about how to show off our API reference that make these unsuitable.

Opening this so I can keep track of what I'm up to and abandon it if it's eating too much time.

By having the API docs be purely reference material, it can be hard for users to discover slightly buried things like the NodeProps type that tells you what props are passed to a custom node.

To keep the API docs a strict reference, we think it would be useful to rethink the current "Guides" sidebar on the docs to group things based on their category or concept and then also link out to relevant API reference too.

Instead of:

• Guides
  • Custom Nodes
  • Sub Flows
  • Layouting
  • ...

We could have

• Nodes
  • Creating custom nodes
  • Custom node props
  • ...
• Layouting
  • Sub flows
  • ...
• Troubleshooting
  • Removing attribution
  • Migrating to ...

• Svelte: Replace "latest release" in stats section with current version
• Svelte: Come up with closing element before footer (maybe the same as bottom of a Case Study page?)
• React: Come up with closing element before footer (maybe the same as bottom of a Case Study page?)
• Add flows inside boxes in features section @moklick
• use Facu's node design thing for preview of Getting Started guide image in pre-footer section

Mastodon, Bluesky, Twitter, and Discord links should be in the footer
Contact should also be there!