[lockfile-explorer] Move graph generation logic to the server process #5358

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

octogonz merged 27 commits into microsoft:main from octogonz:octogonz/lfx-fixes2

Sep 14, 2025

.gitignore

-Original file line number
+Diff line change
@@ Expand Up / @@ -107,6 +107,7 @@ common/autoinstallers/*/.npmrc @@
     *.lock
     # Common toolchain intermediate files
+    build/
     temp/
     lib/
     lib-amd/
@@ Expand Down @@

apps/api-documenter/package.json

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -25,12 +25,12 @@
  
        "@rushstack/node-core-library": "workspace:*",

        "@rushstack/terminal": "workspace:*",

        "@rushstack/ts-command-line": "workspace:*",

        "js-yaml": "~3.13.1",

        "js-yaml": "~4.1.0",

        "resolve": "~1.22.1"

      },

      "devDependencies": {

        "@rushstack/heft": "workspace:*",

        "@types/js-yaml": "3.12.1",

        "@types/js-yaml": "4.0.9",

        "@types/resolve": "1.20.2",

        "eslint": "~9.25.1",

        "local-node-rig": "workspace:*"

apps/api-documenter/src/documenters/OfficeYamlDocumenter.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -48,8 +48,8 @@ export class OfficeYamlDocumenter extends YamlDocumenter { @@
         console.log('Loading snippets from ' + snippetsFilePath);
         const snippetsContent: string = FileSystem.readFile(snippetsFilePath);
-        this._snippets = yaml.load(snippetsContent, { filename: snippetsFilePath });
-        this._snippetsAll = yaml.load(snippetsContent, { filename: snippetsFilePath });
+        this._snippets = yaml.load(snippetsContent, { filename: snippetsFilePath }) as ISnippetsFile;
+        this._snippetsAll = yaml.load(snippetsContent, { filename: snippetsFilePath }) as ISnippetsFile;
       }
       /** @override */
@@ Expand Down @@

apps/api-documenter/src/documenters/YamlDocumenter.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -756,7 +756,7 @@ export class YamlDocumenter { @@
       ): void {
         JsonFile.validateNoUndefinedMembers(dataObject);
-        let stringified: string = yaml.safeDump(dataObject, {
+        let stringified: string = yaml.dump(dataObject, {
           lineWidth: 120
         });
@@ Expand Down @@

apps/api-documenter/src/utils/ToSdpConvertHelper.ts

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -49,10 +49,10 @@ function convert(inputPath: string, outputPath: string): void {
  
          console.log(`convert file ${fpath} from udp to sdp`);

          const file: IYamlApiFile = yaml.safeLoad(yamlContent) as IYamlApiFile;

          const file: IYamlApiFile = yaml.load(yamlContent) as IYamlApiFile;

          const result: { model: CommonYamlModel; type: string } | undefined = convertToSDP(file);

          if (result && result.model) {

            const stringified: string = `### YamlMime:TS${result.type}\n${yaml.safeDump(result.model, {

            const stringified: string = `### YamlMime:TS${result.type}\n${yaml.dump(result.model, {

              lineWidth: 120

            })}`;

            FileSystem.writeFile(`${outputPath}/${name}`, stringified, {

apps/lockfile-explorer-web/eslint.config.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -3,10 +3,12 @@ @@
     const webAppProfile = require('local-web-rig/profiles/app/includes/eslint/flat/profile/web-app');
     const reactMixin = require('local-web-rig/profiles/app/includes/eslint/flat/mixins/react');
+    const packletsMixin = require('local-web-rig/profiles/app/includes/eslint/flat/mixins/packlets');
     module.exports = [
       ...webAppProfile,
       ...reactMixin,
+      packletsMixin,
       {
         files: ['**/*.ts', '**/*.tsx'],
         languageOptions: {
@@ Expand Down @@

apps/lockfile-explorer-web/package.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -12,7 +12,6 @@ @@
         "_phase:test": "heft run --only test -- --clean"
       },
       "dependencies": {
-        "@lifaon/path": "~2.1.0",
         "@reduxjs/toolkit": "~1.8.6",
         "@rushstack/rush-themed-ui": "workspace:*",
         "react-dom": "~17.0.2",
@@ Expand Down @@

apps/lockfile-explorer-web/src/containers/BookmarksSidebar/index.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -5,7 +5,7 @@ import React, { useCallback } from 'react';
  
    import appStyles from '../../App.scss';

    import styles from './styles.scss';

    import { useAppDispatch, useAppSelector } from '../../store/hooks';

    import type { LockfileEntry } from '../../parsing/LfxGraph';

    import type { LfxGraphEntry } from '../../packlets/lfx-shared';

    import { clearStackAndPush, removeBookmark } from '../../store/slices/entrySlice';

    import { Button, ScrollArea, Text } from '@rushstack/rush-themed-ui';

    @@ -14,13 +14,13 @@ export const BookmarksSidebar = (): JSX.Element => {
  
      const dispatch = useAppDispatch();

      const clear = useCallback(

        (entry: LockfileEntry) => () => {

        (entry: LfxGraphEntry) => () => {

          dispatch(clearStackAndPush(entry));

        },

        [dispatch]

      );

      const deleteEntry = useCallback(

        (entry: LockfileEntry) => () => {

        (entry: LfxGraphEntry) => () => {

          dispatch(removeBookmark(entry));

        },

        [dispatch]

apps/lockfile-explorer-web/src/containers/LockfileEntryDetailsView/index.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -3,14 +3,15 @@
  
    import React, { useCallback, useEffect, useState } from 'react';

    import { ScrollArea, Text } from '@rushstack/rush-themed-ui';

    import styles from './styles.scss';

    import appStyles from '../../App.scss';

    import { DependencyKind, type LockfileDependency } from '../../parsing/LfxGraph';

    import { LfxDependencyKind, type LfxGraphDependency, type LfxGraphEntry } from '../../packlets/lfx-shared';

    import { readPackageJsonAsync } from '../../helpers/lfxApiClient';

    import { useAppDispatch, useAppSelector } from '../../store/hooks';

    import { pushToStack, selectCurrentEntry } from '../../store/slices/entrySlice';

    import { ReactNull } from '../../types/ReactNull';

    import type { LockfileEntry } from '../../parsing/LfxGraph';

    import { logDiagnosticInfo } from '../../helpers/logDiagnosticInfo';

    import { displaySpecChanges } from '../../helpers/displaySpecChanges';

    import type { IPackageJson } from '../../types/IPackageJson';

    @@ -27,7 +28,7 @@ enum DependencyKey {
  
    }

    interface IInfluencerType {

      entry: LockfileEntry;

      entry: LfxGraphEntry;

      type: DependencyType;

    }

    @@ -36,14 +37,14 @@ export const LockfileEntryDetailsView = (): JSX.Element | ReactNull => {
  
      const specChanges = useAppSelector((state) => state.workspace.specChanges);

      const dispatch = useAppDispatch();

      const [inspectDependency, setInspectDependency] = useState<LockfileDependency | null>(null);

      const [inspectDependency, setInspectDependency] = useState<LfxGraphDependency | null>(null);

      const [influencers, setInfluencers] = useState<IInfluencerType[]>([]);

      const [directRefsPackageJSON, setDirectRefsPackageJSON] = useState<Map<string, IPackageJson | undefined>>(

        new Map()

      );

      useEffect(() => {

        async function loadPackageJson(referrers: LockfileEntry[]): Promise<void> {

        async function loadPackageJson(referrers: LfxGraphEntry[]): Promise<void> {

          const referrersJsonMap = new Map<string, IPackageJson | undefined>();

          await Promise.all(

            referrers.map(async (ref) => {

    @@ -80,15 +81,15 @@ export const LockfileEntryDetailsView = (): JSX.Element | ReactNull => {
  
            // Check if we need to calculate influencers.

            // If the current dependencyToTrace is a peer dependency then we do

            if (dependencyToTrace.dependencyType !== DependencyKind.PEER_DEPENDENCY) {

            if (dependencyToTrace.dependencyType !== LfxDependencyKind.Peer) {

              return;

            }

            // calculate influencers

            const stack = [selectedEntry];

            const determinants = new Set<LockfileEntry>();

            const transitiveReferrers = new Set<LockfileEntry>();

            const visitedNodes = new Set<LockfileEntry>();

            const determinants = new Set<LfxGraphEntry>();

            const transitiveReferrers = new Set<LfxGraphEntry>();

            const visitedNodes = new Set<LfxGraphEntry>();

            visitedNodes.add(selectedEntry);

            while (stack.length) {

              const currEntry = stack.pop();

    @@ -179,7 +180,7 @@ export const LockfileEntryDetailsView = (): JSX.Element | ReactNull => {
  
                  package.json spec:{' '}

                </Text>

                <Text type="span">

                  {inspectDependency.dependencyType === DependencyKind.PEER_DEPENDENCY

                  {inspectDependency.dependencyType === LfxDependencyKind.Peer

                    ? `"${inspectDependency.peerDependencyMeta.version}" ${

                        inspectDependency.peerDependencyMeta.optional ? 'Optional' : 'Required'

                      } Peer`

    @@ -203,17 +204,15 @@ export const LockfileEntryDetailsView = (): JSX.Element | ReactNull => {
  
      const renderPeerDependencies = (): JSX.Element | ReactNull => {

        if (!selectedEntry) return ReactNull;

        const peerDeps = selectedEntry.dependencies.filter(

          (d) => d.dependencyType === DependencyKind.PEER_DEPENDENCY

        );

        const peerDeps = selectedEntry.dependencies.filter((d) => d.dependencyType === LfxDependencyKind.Peer);

        if (!peerDeps.length) {

          return (

            <div className={`${appStyles.ContainerCard} ${styles.InfluencerList}`}>

              <Text type="h5">No peer dependencies.</Text>

            </div>

          );

        }

        if (!inspectDependency || inspectDependency.dependencyType !== DependencyKind.PEER_DEPENDENCY) {

        if (!inspectDependency || inspectDependency.dependencyType !== LfxDependencyKind.Peer) {

          return (

            <div className={`${appStyles.ContainerCard} ${styles.InfluencerList}`}>

              <Text type="h5">Select a peer dependency to view its influencers</Text>

    @@ -301,7 +300,7 @@ export const LockfileEntryDetailsView = (): JSX.Element | ReactNull => {
  
              </Text>

              <div className={styles.DependencyListWrapper}>

                <ScrollArea>

                  {selectedEntry.referrers?.map((referrer: LockfileEntry) => (

                  {selectedEntry.referrers?.map((referrer: LfxGraphEntry) => (

                    <div

                      className={styles.DependencyItem}

                      key={referrer.rawEntryId}

    @@ -328,7 +327,7 @@ export const LockfileEntryDetailsView = (): JSX.Element | ReactNull => {
  
              </Text>

              <div className={styles.DependencyListWrapper}>

                <ScrollArea>

                  {selectedEntry.dependencies?.map((dependency: LockfileDependency) => (

                  {selectedEntry.dependencies?.map((dependency: LfxGraphDependency) => (

                    <div

                      className={`${styles.DependencyItem} ${

                        inspectDependency?.entryId === dependency.entryId && styles.SelectedDependencyItem

    @@ -338,7 +337,7 @@ export const LockfileEntryDetailsView = (): JSX.Element | ReactNull => {
  
                    >

                      <Text type="h5" bold>

                        Name: {dependency.name}{' '}

                        {dependency.dependencyType === DependencyKind.PEER_DEPENDENCY

                        {dependency.dependencyType === LfxDependencyKind.Peer

                          ? `${

                              dependency.peerDependencyMeta.optional ? '(Optional)' : '(Non-optional)'

                            } Peer Dependency`

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[lockfile-explorer] Move graph generation logic to the server process #5358

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!