diff --git a/dep-graph/client-e2e/cypress-release.json b/dep-graph/client-e2e/cypress-release.json new file mode 100644 index 0000000000..67cbd761a6 --- /dev/null +++ b/dep-graph/client-e2e/cypress-release.json @@ -0,0 +1,12 @@ +{ + "fileServerFolder": ".", + "fixturesFolder": "./src/fixtures", + "integrationFolder": "./src/release-integration", + "modifyObstructiveCode": false, + "pluginsFile": "./src/plugins/index", + "supportFile": "./src/support/index.ts", + "video": true, + "videosFolder": "../../dist/cypress/dep-graph/client-e2e/videos", + "screenshotsFolder": "../../dist/cypress/dep-graph/client-e2e/screenshots", + "chromeWebSecurity": false +} diff --git a/dep-graph/client-e2e/project.json b/dep-graph/client-e2e/project.json index a5952dc686..33e00ce6d4 100644 --- a/dep-graph/client-e2e/project.json +++ b/dep-graph/client-e2e/project.json @@ -21,6 +21,15 @@ "baseUrl": "http://localhost:4200" } }, + "e2e-release-disabled": { + "executor": "@nrwl/cypress:cypress", + "options": { + "cypressConfig": "dep-graph/client-e2e/cypress-release.json", + "tsConfig": "dep-graph/client-e2e/tsconfig.e2e.json", + "devServerTarget": "dep-graph-client:serve-for-e2e:release", + "baseUrl": "http://localhost:4200" + } + }, "lint": { "executor": "@nrwl/linter:eslint", "outputs": ["{options.outputFile}"], diff --git a/dep-graph/client-e2e/src/integration/app.spec.ts b/dep-graph/client-e2e/src/integration/app.spec.ts index ce7eae370f..8b3ab792c2 100644 --- a/dep-graph/client-e2e/src/integration/app.spec.ts +++ b/dep-graph/client-e2e/src/integration/app.spec.ts @@ -68,7 +68,7 @@ describe('dep-graph-client', () => { describe('selecting a different project', () => { it('should change the available projects', () => { - getProjectItems().should('have.length', 55); + getProjectItems().should('have.length', 53); cy.get('[data-cy=project-select]').select('Ocean', { force: true }); getProjectItems().should('have.length', 124); }); @@ -77,14 +77,14 @@ describe('dep-graph-client', () => { describe('select all button', () => { it('should check all project items', () => { getSelectAllButton().scrollIntoView().click({ force: true }); - getCheckedProjectItems().should('have.length', 55); + getCheckedProjectItems().should('have.length', 53); }); }); describe('deselect all button', () => { it('should uncheck all project items', () => { getDeselectAllButton().click(); - getUncheckedProjectItems().should('have.length', 55); + getUncheckedProjectItems().should('have.length', 53); getSelectProjectsMessage().should('be.visible'); }); }); @@ -156,7 +156,7 @@ describe('dep-graph-client', () => { cy.get('[data-project="nx-dev"]').prev('button').click({ force: true }); getUnfocusProjectButton().click(); - getUncheckedProjectItems().should('have.length', 55); + getUncheckedProjectItems().should('have.length', 53); }); }); @@ -263,6 +263,6 @@ describe('loading dep-graph client with url params', () => { // wait for first graph to finish loading cy.wait('@getGraph'); - getCheckedProjectItems().should('have.length', 55); + getCheckedProjectItems().should('have.length', 53); }); }); diff --git a/dep-graph/client-e2e/src/release-integration/release.spec.ts b/dep-graph/client-e2e/src/release-integration/release.spec.ts new file mode 100644 index 0000000000..ed28e89774 --- /dev/null +++ b/dep-graph/client-e2e/src/release-integration/release.spec.ts @@ -0,0 +1,18 @@ +describe('dep-graph-client release', () => { + beforeEach(() => { + cy.intercept('/assets/graphs/*').as('getGraph'); + + cy.visit('/'); + + // wait for first graph to finish loading + cy.wait('@getGraph'); + }); + + it('should not display experimental features', () => { + cy.get('experimental-features').should('not.exist'); + }); + + it('should not display the debugger', () => { + cy.get('debugger-panel').should('not.exist'); + }); +}); diff --git a/dep-graph/client/project.json b/dep-graph/client/project.json index f79717669c..c9633da3b9 100644 --- a/dep-graph/client/project.json +++ b/dep-graph/client/project.json @@ -97,6 +97,12 @@ "npx ts-node -P ./scripts/tsconfig.scripts.json ./scripts/copy-dep-graph-environment.ts watch", "nx serve-base dep-graph-client" ] + }, + "release": { + "commands": [ + "npx ts-node -P ./scripts/tsconfig.scripts.json ./scripts/copy-dep-graph-environment.ts release", + "nx serve-base dep-graph-client" + ] } } }, @@ -117,6 +123,13 @@ "nx serve-base dep-graph-client" ], "readyWhen": "No issues found." + }, + "release": { + "commands": [ + "npx ts-node -P ./scripts/tsconfig.scripts.json ./scripts/copy-dep-graph-environment.ts release", + "nx serve-base dep-graph-client" + ], + "readyWhen": "No issues found." } } } diff --git a/dep-graph/client/src/app/debugger-panel.tsx b/dep-graph/client/src/app/debugger-panel.tsx index 860d83b871..383acb80f9 100644 --- a/dep-graph/client/src/app/debugger-panel.tsx +++ b/dep-graph/client/src/app/debugger-panel.tsx @@ -17,7 +17,7 @@ export const DebuggerPanel = memo(function ({ }: DebuggerPanelProps) { return (
+

+ Experimental Features +

+ {props.children} +
+ ) : null; +} + +export default ExperimentalFeature; diff --git a/dep-graph/client/src/app/interfaces.ts b/dep-graph/client/src/app/interfaces.ts index c7215259d0..c52fb5a3bd 100644 --- a/dep-graph/client/src/app/interfaces.ts +++ b/dep-graph/client/src/app/interfaces.ts @@ -22,6 +22,7 @@ export interface Environment { export interface AppConfig { showDebugger: boolean; + showExperimentalFeatures: boolean; projectGraphs: ProjectGraphList[]; defaultProjectGraph: string; } diff --git a/dep-graph/client/src/app/machines/dep-graph.machine.ts b/dep-graph/client/src/app/machines/dep-graph.machine.ts index ce896bf27c..4a859fb304 100644 --- a/dep-graph/client/src/app/machines/dep-graph.machine.ts +++ b/dep-graph/client/src/app/machines/dep-graph.machine.ts @@ -23,6 +23,7 @@ export const initialContext: DepGraphContext = { searchDepth: 1, searchDepthEnabled: false, groupByFolder: false, + collapseEdges: false, workspaceLayout: { libsDir: '', appsDir: '', @@ -66,6 +67,7 @@ export const depGraphMachine = Machine< affectedProjects: ctx.affectedProjects, workspaceLayout: ctx.workspaceLayout, groupByFolder: ctx.groupByFolder, + collapseEdges: ctx.collapseEdges, }), { to: (context) => context.graphActor, @@ -112,6 +114,39 @@ export const depGraphMachine = Machine< focusProject: { target: 'focused', }, + setCollapseEdges: { + actions: [ + 'setCollapseEdges', + send( + (ctx, event) => ({ + type: 'notifyGraphUpdateGraph', + projects: ctx.projects, + dependencies: ctx.dependencies, + affectedProjects: ctx.affectedProjects, + workspaceLayout: ctx.workspaceLayout, + groupByFolder: ctx.groupByFolder, + collapseEdges: ctx.collapseEdges, + selectedProjects: ctx.selectedProjects, + }), + { + to: (context) => context.graphActor, + } + ), + send( + (ctx, event) => { + if (event.type !== 'setCollapseEdges') return; + + return { + type: 'notifyRouteCollapseEdges', + collapseEdges: event.collapseEdges, + }; + }, + { + to: (context) => context.routeSetterActor, + } + ), + ], + }, setGroupByFolder: { actions: [ 'setGroupByFolder', @@ -123,6 +158,7 @@ export const depGraphMachine = Machine< affectedProjects: ctx.affectedProjects, workspaceLayout: ctx.workspaceLayout, groupByFolder: ctx.groupByFolder, + collapseEdges: ctx.collapseEdges, selectedProjects: ctx.selectedProjects, }), { @@ -183,6 +219,11 @@ export const depGraphMachine = Machine< ctx.groupByFolder = event.groupByFolder; }), + setCollapseEdges: assign((ctx, event) => { + if (event.type !== 'setCollapseEdges') return; + + ctx.collapseEdges = event.collapseEdges; + }), incrementSearchDepth: assign((ctx) => { ctx.searchDepthEnabled = true; ctx.searchDepth = ctx.searchDepth + 1; diff --git a/dep-graph/client/src/app/machines/graph.ts b/dep-graph/client/src/app/machines/graph.ts index c22da2a4c5..7d62f04a72 100644 --- a/dep-graph/client/src/app/machines/graph.ts +++ b/dep-graph/client/src/app/machines/graph.ts @@ -24,6 +24,7 @@ export class GraphService { private renderGraph: cy.Core; private openTooltip: Instance = null; + private collapseEdges = false; constructor( private tooltipService: GraphTooltipService, @@ -52,7 +53,8 @@ export class GraphService { event.groupByFolder, event.workspaceLayout, event.dependencies, - event.affectedProjects + event.affectedProjects, + event.collapseEdges ); break; @@ -62,7 +64,8 @@ export class GraphService { event.groupByFolder, event.workspaceLayout, event.dependencies, - event.affectedProjects + event.affectedProjects, + event.collapseEdges ); this.setShownProjects( event.selectedProjects.length > 0 @@ -112,9 +115,11 @@ export class GraphService { }; if (this.renderGraph) { - this.renderGraph - .elements() - .sort((a, b) => a.id().localeCompare(b.id())) + const elements = this.renderGraph.elements().sort((a, b) => { + return a.id().localeCompare(b.id()); + }); + + elements .layout({ name: 'dagre', nodeDimensionsIncludeLabels: true, @@ -125,6 +130,80 @@ export class GraphService { } as CytoscapeDagreConfig) .run(); + if (this.collapseEdges) { + this.renderGraph.remove(this.renderGraph.edges()); + + elements.edges().forEach((edge) => { + const sourceNode = edge.source(); + const targetNode = edge.target(); + + if ( + sourceNode.parent().first().id() === + targetNode.parent().first().id() + ) { + this.renderGraph.add(edge); + } else { + let sourceAncestors, targetAncestors; + const commonAncestors = edge.connectedNodes().commonAncestors(); + + if (commonAncestors.length > 0) { + sourceAncestors = sourceNode + .ancestors() + .filter((anc) => !commonAncestors.contains(anc)); + targetAncestors = targetNode + .ancestors() + .filter((anc) => !commonAncestors.contains(anc)); + } else { + sourceAncestors = sourceNode.ancestors(); + targetAncestors = targetNode.ancestors(); + } + + let sourceId, targetId; + + if (sourceAncestors.length > 0 && targetAncestors.length === 0) { + sourceId = sourceAncestors.last().id(); + targetId = targetNode.id(); + } else if ( + targetAncestors.length > 0 && + sourceAncestors.length === 0 + ) { + sourceId = sourceNode.id(); + targetId = targetAncestors.last().id(); + } else { + sourceId = sourceAncestors.last().id(); + targetId = targetAncestors.last().id(); + } + + if (sourceId !== undefined && targetId !== undefined) { + const edgeId = `${sourceId}|${targetId}`; + + if (this.renderGraph.$id(edgeId).length === 0) { + const ancestorEdge: cy.EdgeDefinition = { + group: 'edges', + data: { + id: edgeId, + source: sourceId, + target: targetId, + }, + }; + + this.renderGraph.add(ancestorEdge); + } + } else { + console.log(`Couldn't figure out how to draw edge ${edge.id()}`); + console.log( + 'source ancestors', + sourceAncestors.map((anc) => anc.id()) + ); + console.log( + 'target ancestors', + targetAncestors.map((anc) => anc.id()) + ); + } + } + }); + } + this.renderGraph.fit().center().resize(); selectedProjectNames = this.renderGraph @@ -284,12 +363,14 @@ export class GraphService { if (!!currentFocusedProjectName) { this.renderGraph.$id(currentFocusedProjectName).addClass('focused'); } + this.renderGraph.on('zoom', () => { if (this.openTooltip) { this.openTooltip.hide(); this.openTooltip = null; } }); + this.listenForProjectNodeClicks(); this.listenForProjectNodeHovers(); } @@ -330,8 +411,10 @@ export class GraphService { groupByFolder: boolean, workspaceLayout, dependencies: Record, - affectedProjectIds: string[] + affectedProjectIds: string[], + collapseEdges: boolean ) { + this.collapseEdges = collapseEdges; this.tooltipService.hideAll(); this.generateCytoscapeLayout( diff --git a/dep-graph/client/src/app/machines/interfaces.ts b/dep-graph/client/src/app/machines/interfaces.ts index b2674c6b4f..cf7a5a4001 100644 --- a/dep-graph/client/src/app/machines/interfaces.ts +++ b/dep-graph/client/src/app/machines/interfaces.ts @@ -35,6 +35,7 @@ export type DepGraphUIEvents = | { type: 'deselectAll' } | { type: 'selectAffected' } | { type: 'setGroupByFolder'; groupByFolder: boolean } + | { type: 'setCollapseEdges'; collapseEdges: boolean } | { type: 'setIncludeProjectsByPath'; includeProjectsByPath: boolean } | { type: 'incrementSearchDepth' } | { type: 'decrementSearchDepth' } @@ -73,6 +74,7 @@ export type GraphRenderEvents = appsDir: string; }; groupByFolder: boolean; + collapseEdges: boolean; } | { type: 'notifyGraphUpdateGraph'; @@ -84,6 +86,7 @@ export type GraphRenderEvents = appsDir: string; }; groupByFolder: boolean; + collapseEdges: boolean; selectedProjects: string[]; } | { @@ -124,6 +127,10 @@ export type RouteEvents = type: 'notifyRouteGroupByFolder'; groupByFolder: boolean; } + | { + type: 'notifyRouteCollapseEdges'; + collapseEdges: boolean; + } | { type: 'notifyRouteSearchDepth'; searchDepthEnabled: boolean; @@ -154,6 +161,7 @@ export interface DepGraphContext { searchDepth: number; searchDepthEnabled: boolean; groupByFolder: boolean; + collapseEdges: boolean; workspaceLayout: { libsDir: string; appsDir: string; diff --git a/dep-graph/client/src/app/machines/route-listener.actor.ts b/dep-graph/client/src/app/machines/route-listener.actor.ts index 6bdc6414ae..93c4b39d39 100644 --- a/dep-graph/client/src/app/machines/route-listener.actor.ts +++ b/dep-graph/client/src/app/machines/route-listener.actor.ts @@ -21,11 +21,10 @@ function parseSearchParamsToEvents(searchParams: string): DepGraphUIEvents[] { case 'groupByFolder': events.push({ type: 'setGroupByFolder', groupByFolder: true }); break; + case 'collapseEdges': + events.push({ type: 'setCollapseEdges', collapseEdges: true }); + break; case 'searchDepth': - // events.push({ - // type: 'setSearchDepthEnabled', - // searchDepthEnabled: true, - // }); events.push({ type: 'setSearchDepth', searchDepth: parseInt(value), diff --git a/dep-graph/client/src/app/machines/route-setter.machine.ts b/dep-graph/client/src/app/machines/route-setter.machine.ts index 4de45c61b4..a17da90e2e 100644 --- a/dep-graph/client/src/app/machines/route-setter.machine.ts +++ b/dep-graph/client/src/app/machines/route-setter.machine.ts @@ -3,7 +3,12 @@ import { createBrowserHistory } from 'history'; import { Machine } from 'xstate'; import { RouteEvents } from './interfaces'; -type ParamKeys = 'focus' | 'groupByFolder' | 'searchDepth' | 'select'; +type ParamKeys = + | 'focus' + | 'groupByFolder' + | 'searchDepth' + | 'select' + | 'collapseEdges'; type ParamRecord = Record; function reduceParamRecordToQueryString(params: ParamRecord): string { @@ -25,6 +30,7 @@ export const createRouteMachine = () => { const paramRecord: ParamRecord = { focus: params.get('focus'), groupByFolder: params.get('groupByFolder'), + collapseEdges: params.get('collapseEdges'), searchDepth: params.get('searchDepth'), select: params.get('select'), }; @@ -48,6 +54,7 @@ export const createRouteMachine = () => { groupByFolder: null, searchDepth: null, select: null, + collapseEdges: null, }, }, always: { @@ -98,6 +105,11 @@ export const createRouteMachine = () => { ctx.params.groupByFolder = event.groupByFolder ? 'true' : null; }), }, + notifyRouteCollapseEdges: { + actions: assign((ctx, event) => { + ctx.params.collapseEdges = event.collapseEdges ? 'true' : null; + }), + }, notifyRouteSearchDepth: { actions: assign((ctx, event) => { ctx.params.searchDepth = event.searchDepthEnabled diff --git a/dep-graph/client/src/app/machines/selectors.ts b/dep-graph/client/src/app/machines/selectors.ts index 9b95b741c7..772a1e74bf 100644 --- a/dep-graph/client/src/app/machines/selectors.ts +++ b/dep-graph/client/src/app/machines/selectors.ts @@ -39,6 +39,9 @@ export const includePathSelector: DepGraphSelector = (state) => export const groupByFolderSelector: DepGraphSelector = (state) => state.context.groupByFolder; +export const collapseEdgesSelector: DepGraphSelector = (state) => + state.context.collapseEdges; + export const textFilterSelector: DepGraphSelector = (state) => state.context.textFilter; diff --git a/dep-graph/client/src/app/sidebar/collapse-edges-panel.tsx b/dep-graph/client/src/app/sidebar/collapse-edges-panel.tsx new file mode 100644 index 0000000000..a2a7104828 --- /dev/null +++ b/dep-graph/client/src/app/sidebar/collapse-edges-panel.tsx @@ -0,0 +1,41 @@ +import { memo } from 'react'; + +export interface CollapseEdgesPanelProps { + collapseEdges: boolean; + collapseEdgesChanged: (checked: boolean) => void; +} + +export const CollapseEdgesPanel = memo( + ({ collapseEdges, collapseEdgesChanged }: CollapseEdgesPanelProps) => { + return ( +
+
+
+ collapseEdgesChanged(event.target.checked)} + checked={collapseEdges} + > +
+
+ +

+ Display edges between groups rather than libraries +

+
+
+
+ ); + } +); + +export default CollapseEdgesPanel; diff --git a/dep-graph/client/src/app/sidebar/sidebar.tsx b/dep-graph/client/src/app/sidebar/sidebar.tsx index 9477aaddd6..0773ffc1b1 100644 --- a/dep-graph/client/src/app/sidebar/sidebar.tsx +++ b/dep-graph/client/src/app/sidebar/sidebar.tsx @@ -1,7 +1,9 @@ import { useCallback } from 'react'; +import ExperimentalFeature from '../experimental-feature'; import { useDepGraphService } from '../hooks/use-dep-graph'; import { useDepGraphSelector } from '../hooks/use-dep-graph-selector'; import { + collapseEdgesSelector, focusedProjectNameSelector, groupByFolderSelector, hasAffectedProjectsSelector, @@ -9,6 +11,7 @@ import { searchDepthSelector, textFilterSelector, } from '../machines/selectors'; +import CollapseEdgesPanel from './collapse-edges-panel'; import FocusedProjectPanel from './focused-project-panel'; import GroupByFolderPanel from './group-by-folder-panel'; import ProjectList from './project-list'; @@ -24,6 +27,7 @@ export function Sidebar() { const textFilter = useDepGraphSelector(textFilterSelector); const hasAffectedProjects = useDepGraphSelector(hasAffectedProjectsSelector); const groupByFolder = useDepGraphSelector(groupByFolderSelector); + const collapseEdges = useDepGraphSelector(collapseEdgesSelector); function resetFocus() { depGraphService.send({ type: 'unfocusProject' }); @@ -52,6 +56,10 @@ export function Sidebar() { depGraphService.send({ type: 'setGroupByFolder', groupByFolder: checked }); } + function collapseEdgesChanged(checked: boolean) { + depGraphService.send({ type: 'setCollapseEdges', collapseEdges: checked }); + } + function incrementDepthFilter() { depGraphService.send({ type: 'incrementSearchDepth' }); } @@ -174,6 +182,13 @@ export function Sidebar() { incrementDepthFilter={incrementDepthFilter} decrementDepthFilter={decrementDepthFilter} > + + + + diff --git a/dep-graph/client/src/assets/environment.dev.js b/dep-graph/client/src/assets/environment.dev.js index b3cefabef0..0417156f49 100644 --- a/dep-graph/client/src/assets/environment.dev.js +++ b/dep-graph/client/src/assets/environment.dev.js @@ -5,6 +5,7 @@ window.useXstateInspect = false; window.appConfig = { showDebugger: true, + showExperimentalFeatures: true, projectGraphs: [ { id: 'nx', @@ -41,6 +42,11 @@ window.appConfig = { label: 'Affected', url: 'assets/graphs/affected.json', }, + { + id: 'collapsing-edges-testing', + label: 'Collapsing Edges', + url: 'assets/graphs/collapsing-edges-testing.json', + }, ], defaultProjectGraph: 'nx', }; diff --git a/dep-graph/client/src/assets/environment.release.js b/dep-graph/client/src/assets/environment.release.js new file mode 100644 index 0000000000..68584fcb88 --- /dev/null +++ b/dep-graph/client/src/assets/environment.release.js @@ -0,0 +1,17 @@ +window.exclude = []; +window.watch = false; +window.environment = 'release'; +window.useXstateInspect = false; + +window.appConfig = { + showDebugger: false, + showExperimentalFeatures: false, + projectGraphs: [ + { + id: 'local', + label: 'local', + url: 'assets/graphs/nx-examples.json', + }, + ], + defaultProjectGraph: 'local', +}; diff --git a/dep-graph/client/src/assets/environment.watch.js b/dep-graph/client/src/assets/environment.watch.js index 02c3ffb21e..449135329b 100644 --- a/dep-graph/client/src/assets/environment.watch.js +++ b/dep-graph/client/src/assets/environment.watch.js @@ -5,6 +5,7 @@ window.useXstateInspect = false; window.appConfig = { showDebugger: false, + showExperimentalFeatures: true, projectGraphs: [ { id: 'local', diff --git a/dep-graph/client/src/assets/graphs/collapsing-edges-testing.json b/dep-graph/client/src/assets/graphs/collapsing-edges-testing.json new file mode 100644 index 0000000000..bd1de85083 --- /dev/null +++ b/dep-graph/client/src/assets/graphs/collapsing-edges-testing.json @@ -0,0 +1,222 @@ +{ + "hash": "1c2b69586aa096dc5e42eb252d0b5bfb94f20dc969a1e7b6f381a3b13add6928", + "layout": { + "appsDir": "apps", + "libsDir": "libs" + }, + "projects": [ + { + "name": "web", + "type": "app", + "data": { + "tags": [], + "root": "apps/app1" + } + }, + { + "name": "admin", + "type": "app", + "data": { + "tags": [], + "root": "apps/app2" + } + }, + { + "name": "core-util-auth", + "type": "lib", + "data": { + "tags": [], + "root": "core/util-auth" + } + }, + { + "name": "web-feature-home-page", + "type": "lib", + "data": { + "tags": [], + "root": "web/feature-homepage" + } + }, + { + "name": "web-feature-search", + "type": "lib", + "data": { + "tags": [], + "root": "web/feature-search" + } + }, + { + "name": "web-data-access", + "type": "lib", + "data": { + "tags": [], + "root": "web/feature-search" + } + }, + { + "name": "admin-feature-users", + "type": "lib", + "data": { + "tags": [], + "root": "admin/feature-users" + } + }, + { + "name": "admin-feature-billing", + "type": "lib", + "data": { + "tags": [], + "root": "admin/feature-billing" + } + }, + { + "name": "admin-data-access", + "type": "lib", + "data": { + "tags": [], + "root": "admin/data-access" + } + }, + { + "name": "shared-components-ui-button", + "type": "lib", + "data": { + "tags": [], + "root": "shared/components/ui-button" + } + }, + { + "name": "shared-components-ui-form", + "type": "lib", + "data": { + "tags": [], + "root": "shared/components/ui-form" + } + }, + { + "name": "shared-util", + "type": "lib", + "data": { + "tags": [], + "root": "shared/util" + } + } + ], + "dependencies": { + "web": [ + { + "type": "dynamic", + "source": "web", + "target": "web-feature-home-page" + }, + { + "type": "dynamic", + "source": "web", + "target": "web-feature-search" + }, + { + "type": "static", + "source": "web", + "target": "core-util-auth" + } + ], + "admin": [ + { + "type": "dynamic", + "source": "admin", + "target": "admin-feature-users" + }, + { + "type": "dynamic", + "source": "admin", + "target": "admin-feature-billing" + }, + { + "type": "static", + "source": "admin", + "target": "core-util-auth" + } + ], + "web-feature-home-page": [ + { + "type": "static", + "source": "web-feature-home-page", + "target": "web-data-access" + }, + { + "type": "static", + "source": "web-feature-home-page", + "target": "shared-components-ui-button" + } + ], + "web-feature-search": [ + { + "type": "static", + "source": "web-feature-search", + "target": "web-data-access" + }, + { + "type": "static", + "source": "web-feature-search", + "target": "shared-components-ui-button" + }, + { + "type": "static", + "source": "web-feature-search", + "target": "shared-components-ui-form" + } + ], + "web-data-access": [ + { + "type": "static", + "source": "web-data-access", + "target": "core-util-auth" + } + ], + "admin-feature-users": [ + { + "type": "static", + "source": "admin-feature-users", + "target": "admin-data-access" + }, + { + "type": "static", + "source": "admin-feature-users", + "target": "shared-components-ui-button" + } + ], + "admin-feature-billing": [ + { + "type": "static", + "source": "admin-feature-billing", + "target": "admin-data-access" + }, + { + "type": "static", + "source": "admin-feature-billing", + "target": "shared-components-ui-button" + } + ], + "admin-data-access": [ + { + "type": "static", + "source": "admin-data-access", + "target": "core-util-auth" + } + ], + "core-util-auth": [], + "shared-components-ui-button": [], + "shared-components-ui-form": [ + { + "type": "static", + "source": "shared-components-ui-form", + "target": "shared-util" + } + ], + "shared-util": [] + }, + "affected": [], + "changes": { + "added": [] + } +} diff --git a/dep-graph/client/src/globals.d.ts b/dep-graph/client/src/globals.d.ts index 0365038711..47826e29de 100644 --- a/dep-graph/client/src/globals.d.ts +++ b/dep-graph/client/src/globals.d.ts @@ -1,6 +1,6 @@ // nx-ignore-next-line import type { DepGraphClientResponse } from '@nrwl/workspace/src/command-line/dep-graph'; -import { AppConfig } from './app/models'; +import { AppConfig } from './app/interfaces'; export declare global { export interface Window { diff --git a/package.json b/package.json index f6c29d9c56..65db8e5a1c 100644 --- a/package.json +++ b/package.json @@ -132,7 +132,7 @@ "css-minimizer-webpack-plugin": "^3.1.1", "cypress": "^9.1.0", "cytoscape": "^3.18.2", - "cytoscape-dagre": "^2.3.2", + "cytoscape-dagre": "^2.4.0", "cytoscape-popper": "^2.0.0", "cz-conventional-changelog": "^3.0.2", "cz-customizable": "^6.2.0", diff --git a/packages/workspace/src/command-line/dep-graph.ts b/packages/workspace/src/command-line/dep-graph.ts index 7721033abe..659fa309be 100644 --- a/packages/workspace/src/command-line/dep-graph.ts +++ b/packages/workspace/src/command-line/dep-graph.ts @@ -64,6 +64,7 @@ function buildEnvironmentJs( window.appConfig = { showDebugger: false, + showExperimentalFeatures: false, projectGraphs: [ { id: 'local', diff --git a/scripts/copy-dep-graph-environment.ts b/scripts/copy-dep-graph-environment.ts index 00e60a7386..2f78e2a34c 100644 --- a/scripts/copy-dep-graph-environment.ts +++ b/scripts/copy-dep-graph-environment.ts @@ -1,7 +1,7 @@ import { copyFileSync } from 'fs'; import { argv } from 'yargs'; -type Mode = 'dev' | 'watch'; +type Mode = 'dev' | 'watch' | 'release'; const mode = argv._[0]; console.log(`Setting up graph for ${mode}`); diff --git a/yarn.lock b/yarn.lock index 4e2ddd6448..6bc1fb4c0d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10342,10 +10342,10 @@ cypress@^9.1.0: url "^0.11.0" yauzl "^2.10.0" -cytoscape-dagre@^2.3.2: - version "2.3.2" - resolved "https://registry.npmjs.org/cytoscape-dagre/-/cytoscape-dagre-2.3.2.tgz" - integrity sha512-dL9+RvGkatSlIdOKXiFwHpnpTo8ydFMqIYzZFkImJXNbDci3feyYxR46wFoaG9GFiWimc6XD9Lm0x29b1wvWpw== +cytoscape-dagre@^2.4.0: + version "2.4.0" + resolved "https://registry.yarnpkg.com/cytoscape-dagre/-/cytoscape-dagre-2.4.0.tgz#abf145b1c675afe3b7d531166e6727dc39dc350d" + integrity sha512-jfOtKzKduCnruBs3YMHS9kqWjZKqvp6loSJwlotPO5pcU4wLUhkx7ZBIyW3VWZXa8wfkGxv/zhWoBxWtYrUxKQ== dependencies: dagre "^0.8.5"