fix(nx-dev): make sure graph height works and render mode is nx-docs (#27776)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
<!-- This is the behavior we have today -->
Graphs in nx.dev not working

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->
Graphs in nx.dev works

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #

nx-dev/ui-markdoc/src/lib/tags/graph.component.tsx

@@ -97,16 +97,19 @@ export function Graph({
         {title}
       </div>
       {type === 'project' ? (
-        <NxProjectGraphViz
+        <div style={{ height }}>
-          height={height}
+          <NxProjectGraphViz
-          groupByFolder={false}
+            renderMode="nx-docs"
-          theme={theme}
+            groupByFolder={false}
-          projects={parsedProps.projects}
+            theme={theme}
-          workspaceLayout={parsedProps.workspaceLayout}
+            projects={parsedProps.projects}
-          dependencies={parsedProps.dependencies}
+            fileMap={{}}
-          affectedProjectIds={parsedProps.affectedProjectIds}
+            workspaceLayout={parsedProps.workspaceLayout}
-          enableTooltips={parsedProps.enableTooltips}
+            dependencies={parsedProps.dependencies}
-        />
+            affectedProjectIds={parsedProps.affectedProjectIds}
+            enableTooltips={parsedProps.enableTooltips}
+          />
+        </div>
       ) : (
         <NxTaskGraphViz
           height={height}

package.json

@@ -319,7 +319,7 @@
     "@markdoc/markdoc": "0.2.2",
     "@monaco-editor/react": "^4.4.6",
     "@napi-rs/canvas": "^0.1.52",
-    "@nx/graph": "0.0.1-alpha.13",
+    "@nx/graph": "0.0.1-alpha.15",
     "@react-spring/three": "^9.7.3",
     "@react-three/drei": "^9.108.3",
     "@react-three/fiber": "^8.16.8",

pnpm-lock.yaml

@@ -31,8 +31,8 @@ importers:
         specifier: ^0.1.52
         version: 0.1.52
       '@nx/graph':
-        specifier: 0.0.1-alpha.13
+        specifier: 0.0.1-alpha.15
-        version: 0.0.1-alpha.13(@nx/devkit@19.7.0-beta.1(nx@19.7.0-beta.1(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.3))(@swc/core@1.5.7(@swc/helpers@0.5.11))))(nx@19.7.0-beta.1(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.3))(@swc/core@1.5.7(@swc/helpers@0.5.11)))(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.23.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
+        version: 0.0.1-alpha.15(@nx/devkit@19.7.0-beta.1(nx@19.7.0-beta.1(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.3))(@swc/core@1.5.7(@swc/helpers@0.5.11))))(nx@19.7.0-beta.1(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.3))(@swc/core@1.5.7(@swc/helpers@0.5.11)))(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.23.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
       '@react-spring/three':
         specifier: ^9.7.3
         version: 9.7.3(@react-three/fiber@8.16.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(three@0.166.1))(react@18.3.1)(three@0.166.1)
@@ -5832,8 +5832,8 @@ packages:
       '@zkochan/js-yaml':
         optional: true
 
-  '@nx/graph@0.0.1-alpha.13':
+  '@nx/graph@0.0.1-alpha.15':
-    resolution: {integrity: sha512-sNWhHix9CykuzVUBBsUBOSvTx+OrAen/r9qNZhxNhmGsvmAySIgL5yElShwBGjy09n4AiaCWek+ovkhYb2h9KQ==}
+    resolution: {integrity: sha512-wwotjQcUCz46NknyvZ99Pi0qpvVul6Maa1Y+bvcd6SUgrpmbfW/zyMQejlyq+iKufZCTJv/iiDUIKZEKvvVRjw==}
     peerDependencies:
       '@nx/devkit': '>= 19 < 20'
       nx: '>= 19 < 20'
@@ -25752,7 +25752,7 @@ snapshots:
       - supports-color
       - verdaccio
 
-  '@nx/graph@0.0.1-alpha.13(@nx/devkit@19.7.0-beta.1(nx@19.7.0-beta.1(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.3))(@swc/core@1.5.7(@swc/helpers@0.5.11))))(nx@19.7.0-beta.1(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.3))(@swc/core@1.5.7(@swc/helpers@0.5.11)))(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.23.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
+  '@nx/graph@0.0.1-alpha.15(@nx/devkit@19.7.0-beta.1(nx@19.7.0-beta.1(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.3))(@swc/core@1.5.7(@swc/helpers@0.5.11))))(nx@19.7.0-beta.1(@swc-node/register@1.9.1(@swc/core@1.5.7(@swc/helpers@0.5.11))(@swc/types@0.1.7)(typescript@5.5.3))(@swc/core@1.5.7(@swc/helpers@0.5.11)))(react-dom@18.3.1(react@18.3.1))(react-router-dom@6.23.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@floating-ui/react': 0.26.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@headlessui/react': 1.7.19(react-dom@18.3.1(react@18.3.1))(react@18.3.1)