Merge pull request #25 from player-ui/flame-graph

feat: flame-graph

.bazelignore

@@ -32,6 +32,7 @@ copy-to-clipboard/node_modules
 toggle/node_modules
 code-editor/node_modules
 radio-group/node_modules
+flame-graph/node_modules
 
 # Backup files
 _backup

docs/site/config/navigation.ts

@@ -85,6 +85,10 @@ const navigation: Navigation = {
               title: 'Radio Group',
               path: '/assets/radio-group',
             },
+            {
+              title: 'Flame Graph',
+              path: '/assets/flame-graph',
+            },
           ]
         },
       ],

docs/site/pages/assets/flame-graph.mdx

@@ -0,0 +1,86 @@
+# @devtools-ui/flame-graph
+
+## Overview
+
+`@devtools-ui/flame-graph` is a component package designed to be leveraged by a [Player-UI assets plugin](https://player-ui.github.io/next/plugins).
+
+It provides a `flame-graph` component for visualizing profiling data.
+
+## Installation
+
+To install `@devtools-ui/flame-graph`, you can use pnpm or yarn:
+
+```sh
+pnpm i @devtools-ui/flame-graph
+```
+
+or
+
+```sh
+yarn add @devtools-ui/flame-graph
+```
+
+## Usage
+
+You can leverage this asset through the `@devtools-ui/plugin`:
+
+```ts
+import { FlameGraph } from "@devtools-ui/plugin";
+
+// and use it to define your Player-UI content:
+myFlow = {
+  id: "my_flow",
+  views: [<FlameGraph binding={b`my_binding`} height={100} width={200} />],
+};
+```
+
+For more information on how to author Player-UI content using DSL, please check our [Player-UI docs](https://player-ui.github.io/next/dsl#tsxjsx-content-authoring-player-dsl).
+
+Or, your can leverage this asset in your own plugin:
+
+```ts
+// TransformPlugin.ts
+import type { Player, PlayerPlugin } from "@player-ui/player";
+import { AssetTransformPlugin } from "@player-ui/asset-transform-plugin";
+import { flameGraphTransform } from "@devtools-ui/flame-graph";
+
+export class TransformsPlugin implements PlayerPlugin {
+  name = "my-plugin-transforms";
+
+  apply(player: Player) {
+    player.registerPlugin(
+      new AssetTransformPlugin([[{ type: "flame-graph" }, flameGraphTransform]])
+    );
+  }
+}
+```
+
+```ts
+// AssetRegistryPlugin.ts
+import React from "react";
+import type { Player } from "@player-ui/player";
+import type {
+  ExtendedPlayerPlugin,
+  ReactPlayer,
+  ReactPlayerPlugin,
+} from "@player-ui/react";
+import { AssetProviderPlugin } from "@player-ui/asset-provider-plugin-react";
+import { TransformsPlugin } from "./TransformPlugin";
+import { FlameGraphAsset, FlameGraphComponent } from "@devtools-ui/flame-graph";
+
+export class AssetsRegistryPlugin
+  implements ReactPlayerPlugin, ExtendedPlayerPlugin<[FlameGraphAsset]>
+{
+  name = "my-plugin";
+
+  applyReact(reactPlayer: ReactPlayer) {
+    reactPlayer.registerPlugin(
+      new AssetProviderPlugin([["flame-graph", FlameGraphComponent]])
+    );
+  }
+
+  apply(player: Player) {
+    player.registerPlugin(new TransformsPlugin());
+  }
+}
+```

docs/storybook/.storybook/preview.ts

@@ -13,6 +13,7 @@ import DevtoolsUIPlugin, {
   Toggle,
   CodeEditor,
   RadioGroup,
+  FlameGraph,
 } from "@devtools-ui/plugin";
 import { Preview } from "@storybook/react";
 import { CommonTypesPlugin } from "@player-ui/common-types-plugin";
@@ -42,6 +43,7 @@ const components = {
   Toggle,
   CodeEditor,
   RadioGroup,
+  FlameGraph,
 };
 
 export const parameters = {

docs/storybook/src/assets/FlameGraph.mdx

@@ -0,0 +1,20 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as FlameGraphStories from "./FlameGraph.stories";
+
+<Meta of={ FlameGraphStories } />
+
+# FlameGraph Asset
+
+> type: `flame-graph`
+
+It provides a `FlameGraph` component for visualizing profiling data.
+
+## DSL Properties
+
+| Property | Type | Required | Description |
+| --- | --- | --- | --- |
+| `binding` | `string` | true | The binding to the profiling data source (`ProfilerNode`). |
+
+## Basic Use Case
+
+<Canvas of={ FlameGraphStories.Basic } />

docs/storybook/src/assets/FlameGraph.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta } from "@storybook/react";
+import { createDSLStory } from "@player-ui/storybook-addon-player";
+import { FlameGraph } from "@devtools-ui/plugin";
+
+const meta: Meta<typeof FlameGraph> = {
+  title: "Devtools UI Assets/FlameGraph",
+  component: FlameGraph,
+};
+
+export default meta;
+
+export const Basic = createDSLStory(
+  () => import("../flows/flame-graph/basic?raw")
+);

docs/storybook/src/flows/flame-graph/basic.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import { FlameGraph } from "@devtools-ui/plugin";
+import type { DSLFlow } from "@player-tools/dsl";
+import { expression as e, makeBindingsForObject } from "@player-tools/dsl";
+import type { Schema } from "@player-ui/types";
+
+const RecordType: Schema.DataType<Record<string, unknown>> = {
+  type: "RecordType",
+};
+
+const schema = {
+  profilerData: RecordType,
+};
+
+const data = makeBindingsForObject(schema);
+
+const view1 = <FlameGraph binding={data.profilerData} />;
+
+const flow: DSLFlow = {
+  id: "flame-graph-basic",
+  views: [view1],
+  data: {
+    profilerData: {
+      name: "root",
+      value: 12,
+      tooltip: "root tooltip",
+      children: [
+        {
+          name: "child1",
+          value: 5,
+          children: [
+            {
+              name: "child1.1",
+              value: 2,
+              tooltip: "child 1.1 tooltip",
+              children: [],
+            },
+            {
+              name: "child1.2",
+              value: 3,
+              tooltip: "child 1.2 tooltip",
+              children: [],
+            },
+          ],
+        },
+        {
+          name: "child2",
+          value: 5,
+          children: [
+            {
+              name: "child2.1",
+              value: 2,
+              tooltip: "child 2.1 tooltip",
+              children: [],
+            },
+            {
+              name: "child2.2",
+              value: 2,
+              tooltip: "child 2.2 tooltip",
+              children: [],
+            },
+            { name: "child2.3", value: 1, children: [] },
+          ],
+        },
+        {
+          name: "child2",
+          value: 2,
+          children: [],
+        },
+      ],
+    },
+  },
+  schema,
+  navigation: {
+    BEGIN: "FLOW_1",
+    FLOW_1: {
+      startState: "VIEW_1",
+      VIEW_1: {
+        state_type: "VIEW",
+        ref: view1,
+        transitions: {
+          "*": "END_Done",
+        },
+      },
+      END_Done: {
+        state_type: "END",
+        outcome: "DONE",
+      },
+    },
+  },
+};
+
+export default flow;

flame-graph/BUILD

@@ -0,0 +1,32 @@
+load("@npm//:defs.bzl", "npm_link_all_packages")
+load("@rules_player//javascript:defs.bzl", "js_pipeline")
+load("//helpers:defs.bzl", "tsup_config", "vitest_config")
+
+npm_link_all_packages(name = "node_modules")
+
+tsup_config(name = "tsup_config")
+
+vitest_config(name = "vitest_config")
+
+js_pipeline(
+    package_name = "@devtools-ui/flame-graph",
+    test_deps = [
+        ":node_modules",
+        "//:vitest_config",
+    ],
+    deps = [
+        "//:node_modules/@chakra-ui/react",
+        "//:node_modules/@emotion/react",
+        "//:node_modules/@emotion/styled",
+        "//:node_modules/@player-tools/dsl",
+        "//:node_modules/@player-ui/asset-transform-plugin",
+        "//:node_modules/@player-ui/player",
+        "//:node_modules/@player-ui/react",
+        "//:node_modules/@player-ui/types",
+        "//:node_modules/@types/react",
+        "//:node_modules/dlv",
+        "//:node_modules/framer-motion",
+        "//:node_modules/react",
+        "//:node_modules/react-flame-graph"
+    ],
+)

flame-graph/README.md

@@ -0,0 +1,86 @@
+# @devtools-ui/flame-graph
+
+## Overview
+
+`@devtools-ui/flame-graph` is a component package designed to be leveraged by a [Player-UI assets plugin](https://player-ui.github.io/next/plugins).
+
+It provides a `flame-graph` component for visualizing profiling data.
+
+## Installation
+
+To install `@devtools-ui/flame-graph`, you can use pnpm or yarn:
+
+```sh
+pnpm i @devtools-ui/flame-graph
+```
+
+or
+
+```sh
+yarn add @devtools-ui/flame-graph
+```
+
+## Usage
+
+You can leverage this asset through the `@devtools-ui/plugin`:
+
+```ts
+import { FlameGraph } from "@devtools-ui/plugin";
+
+// and use it to define your Player-UI content:
+myFlow = {
+  id: "my_flow",
+  views: [<FlameGraph binding={b`my_binding`} height={100} width={200} />],
+};
+```
+
+For more information on how to author Player-UI content using DSL, please check our [Player-UI docs](https://player-ui.github.io/next/dsl#tsxjsx-content-authoring-player-dsl).
+
+Or, your can leverage this asset in your own plugin:
+
+```ts
+// TransformPlugin.ts
+import type { Player, PlayerPlugin } from "@player-ui/player";
+import { AssetTransformPlugin } from "@player-ui/asset-transform-plugin";
+import { flameGraphTransform } from "@devtools-ui/flame-graph";
+
+export class TransformsPlugin implements PlayerPlugin {
+  name = "my-plugin-transforms";
+
+  apply(player: Player) {
+    player.registerPlugin(
+      new AssetTransformPlugin([[{ type: "flame-graph" }, flameGraphTransform]])
+    );
+  }
+}
+```
+
+```ts
+// AssetRegistryPlugin.ts
+import React from "react";
+import type { Player } from "@player-ui/player";
+import type {
+  ExtendedPlayerPlugin,
+  ReactPlayer,
+  ReactPlayerPlugin,
+} from "@player-ui/react";
+import { AssetProviderPlugin } from "@player-ui/asset-provider-plugin-react";
+import { TransformsPlugin } from "./TransformPlugin";
+import { FlameGraphAsset, FlameGraphComponent } from "@devtools-ui/flame-graph";
+
+export class AssetsRegistryPlugin
+  implements ReactPlayerPlugin, ExtendedPlayerPlugin<[FlameGraphAsset]>
+{
+  name = "my-plugin";
+
+  applyReact(reactPlayer: ReactPlayer) {
+    reactPlayer.registerPlugin(
+      new AssetProviderPlugin([["flame-graph", FlameGraphComponent]])
+    );
+  }
+
+  apply(player: Player) {
+    player.registerPlugin(new TransformsPlugin());
+  }
+}
+```

flame-graph/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@devtools-ui/flame-graph",
+  "version": "0.0.0-PLACEHOLDER",
+  "main": "src/index.ts"
+}

flame-graph/src/component/index.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { FlameGraph } from "react-flame-graph";
+import { useFlameGraphProps } from "../hooks";
+import type { TransformedFlameGraph } from "../types";
+
+export const FlameGraphComponent = (props: TransformedFlameGraph) => {
+  const transformedProps = useFlameGraphProps(props);
+
+  return <FlameGraph {...transformedProps} />;
+};