using reactflow in an app

[gilgi]

Hi, 

On the webinar A Practitioners Guide to "Dynatrace AppEngine: Everything thinkable is now possible (https://www.youtube.com/watch?v=D5SDmLx6Aj4) It was shown how to use reactflow in an app. 

I'm trying to utilize this library as well and even on static data from the getting started tutorial they provide I don't get the flow being written. As I saw it working on the webinar, i have no doubt I'm doing something wrong but can't really find what.

Has anyone integrated reactflow into an app?

This is my simple app code:

import React from 'react';
import ReactFlow, {
  MiniMap,
  Controls,
  Background,
  useNodesState,
  useEdgesState,
  BackgroundVariant,
} from 'reactflow';

import 'reactflow/dist/style.css';

const initialNodes = [
  { id: '1', position: { x: 0, y: 0 }, data: { label: '11' } },
  { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
];
const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
export const App = () => {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        attributionPosition='top-right'
        fitView
>
        <Background variant={BackgroundVariant.Dots} />
      </ReactFlow>
    </div>
  );
}

 and this is the result I see:

@andreas_grabner did you publish the resulting code of the webinar somewhere?

Gil.

[andreas_grabner]

Hi. The technical demo was done by @dirk_wall - maybe he can share his code from back then.

For more guidance and examples you could also reach out to the Dynatrace Platform Advocacy Team, e.g: @sinisa_zubic or @Inder 

[stefan_eggersto · Accepted solution]

Hi @gilgi ,

there were recently some issues in the Dynatrace App Toolkit about injecting stylesheets, see https://developer.dynatrace.com/whats-new/release-notes/app-toolkit/

The version 0.107.3 should have this fixed. Can you please ensure you have the latest version (just run npx dt-app update)? Let me know if you still observe this issue with the latest version.

[gilgi]

Hi @stefan_eggersto , not sure what happened but it started to work suddenly. Thanks.

[gilgi]

@dirk_wall @stefan_eggersto ,

Coming back to this question. When deploying the app (and not working with the local server) I'm getting this vehavior of not being able to load the css of reactflow and have it enabled. I'm using version 0.109 of the app tool kit. Any ideas?

Gil.

[stefan_eggersto]

Hi @gilgi,

I just tried the above code, and it works for me with dt-app 0.109.0, both in the local development environment and deployed.

I currently only know about one issue with CSS injection, and this happens when you change the entry point for main.tsx to something different (see https://developer.dynatrace.com/reference/app-toolkit/configuration/#build-options, option build.ui.entryPoint).

I attached my app code (without the app config file). Can you please try this or compare if there are any obvious differences to your code?

[gilgi]

Hi @stefan_eggersto , 

Just tried it and it acts the same as mine. on local development server everything is fine. When deployed It seems like the CSS is not loaded or something like that.

Gil.

[gilgi]

Hi @stefan_eggersto , 

I've figured out what the problem is. When deployed, the css files are not loaded/not deployed (don't see the css file being called even on dev tools when accessing the page).

To prove that I've created my own test css file and referenced it from a page. Worked on my local dev server, but when deployed - the same symptom as with reactflow.

So the real question: is there anything specific within the configuration files that needs to be done in order to include css files?

[imsingh]

@gilgi I can confirm that this is a bug on windows. I've reported it to responsible team and it will be fixed asap. Thanks for reporting it 🙂