feat: opossumui-2.0

- change default font
- improve color scheme and add background wave
- merge audit and attribution view to reduce duplication and context switching
- group packages by either being an attribution or signal
- replace resource popup with new panel to display linked resources
- replace file search popup with in-component search fields
- introduce bulk actions for signals
- add filtering for signals
- add filter by license name
- add filter for different kinds of incompleteness
- highlight incomplete attributions and the missing attributes at all times
- improve feature to replace attributions by letting the user select the replacement directly in audit view
- improved report view (sticky first column, better display of information, improved scrolling behavior)
- generate autocomplete suggestions from filtered signals and attributions and deduplicate attribute values
- update user guide to reflect changes

closes #2524

Signed-off-by: Maxim Stykow <maxim.stykow@tngtech.com>

Author: mstykow

USER_GUIDE.md

@@ -8,14 +8,14 @@
   "dependencies": {
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
+    "@fontsource-variable/karla": "^5.0.19",
     "@mui/icons-material": "^5.15.10",
     "@mui/material": "^5.15.10",
     "@mui/system": "^5.15.9",
     "@reduxjs/toolkit": "^2.2.1",
     "@tanstack/react-query": "^5.22.2",
     "compare-versions": "^6.1.0",
     "dayjs": "^1.11.10",
-    "electron-devtools-installer": "^3.2.0",
     "electron-log": "^5.1.1",
     "electron-settings": "^4.0.2",
     "fast-csv": "^5.0.1",
@@ -56,7 +56,6 @@
     "@testing-library/user-event": "^14.5.2",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/babel__core": "^7.20.5",
-    "@types/electron-devtools-installer": "^2.2.5",
     "@types/jest": "^29.5.12",
     "@types/js-yaml": "^4.0.9",
     "@types/lodash": "^4.14.202",

docs/user_guide_screenshots/attribution_view.png

@@ -30,7 +30,6 @@
         'dotenv',
         'electron',
         'electron-builder',
-        'electron-devtools-installer',
         'electron-log',
         'electron-playwright-helpers',
         'electron-settings',
@@ -99,6 +98,13 @@
       matchUpdateTypes: ['minor', 'patch'],
       automerge: true,
     },
+    {
+      matchPackagePrefixes: ['@fontsource-variable/'],
+      groupName: 'fontsource dependencies',
+      groupSlug: 'fontsource',
+      matchUpdateTypes: ['minor', 'patch'],
+      automerge: true,
+    },
     {
       matchPackagePrefixes: ['@tanstack/'],
       groupName: 'Tanstack dependencies',

docs/user_guide_screenshots/audit_view.png

@@ -3,10 +3,6 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 import { app } from 'electron';
-import installExtension, {
-  REACT_DEVELOPER_TOOLS,
-  REDUX_DEVTOOLS,
-} from 'electron-devtools-installer';
 
 import { main } from './main/main';
 
@@ -15,13 +11,3 @@ app.on('ready', main);
 app.on('window-all-closed', () => {
   app.quit();
 });
-
-app.on('ready', () => {
-  if (!app.isPackaged) {
-    [REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS].forEach((extension) => {
-      installExtension(extension)
-        .then((name) => console.log(`Added Extension: ${name}`))
-        .catch((err) => console.log('An error occurred: ', err));
-    });
-  }
-});

docs/user_guide_screenshots/exports.png

@@ -8,11 +8,7 @@ import * as zlib from 'zlib';
 
 import { EMPTY_PROJECT_METADATA } from '../../../Frontend/shared-constants';
 import { AllowedFrontendChannels } from '../../../shared/ipc-channels';
-import {
-  Criticality,
-  DiscreteConfidence,
-  ParsedFileContent,
-} from '../../../shared/shared-types';
+import { Criticality, ParsedFileContent } from '../../../shared/shared-types';
 import { writeFile, writeOpossumFile } from '../../../shared/write-file';
 import { faker } from '../../../testing/Faker';
 import {
@@ -433,7 +429,7 @@ describe('Test of loading function', () => {
               comment: 'some comment',
               copyright: '(c) first party',
               preSelected: true,
-              attributionConfidence: DiscreteConfidence.Low,
+              attributionConfidence: 17,
               id: manualAttributionUuid,
             },
           },

docs/user_guide_screenshots/filetree.png

@@ -124,9 +124,9 @@ const correctOutput: OpossumOutputFile = {
   resolvedExternalAttributions: [],
 };
 
-const correctParsedOuput: ParsedOpossumOutputFile = {
+const correctParsedOutput: ParsedOpossumOutputFile = {
   ...correctOutput,
-  resolvedExternalAttributions: new Set(),
+  resolvedExternalAttributions: [],
 };
 
 describe('parseOpossumFile', () => {
@@ -154,7 +154,7 @@ describe('parseOpossumFile', () => {
       opossumFilePath,
     )) as ParsedOpossumInputAndOutput;
     expect(parsingResult.input).toStrictEqual(correctInput);
-    expect(parsingResult.output).toStrictEqual(correctParsedOuput);
+    expect(parsingResult.output).toStrictEqual(correctParsedOutput);
   });
 
   it('returns JSONParsingError on an incorrect .opossum file', async () => {
@@ -248,7 +248,7 @@ describe('parseOutputJsonFile', () => {
 
     const attributions = parseOutputJsonFile(attributionPath);
 
-    expect(attributions).toStrictEqual(correctParsedOuput);
+    expect(attributions).toStrictEqual(correctParsedOutput);
   });
 
   it('throws when reading an incorrect file', async () => {
@@ -272,7 +272,7 @@ describe('parseOutputJsonFile', () => {
       'cff9095a-5c24-46e6-b84d-cc8596b17c58',
     );
     const parsedFileContentWithWrongProjectId: ParsedOpossumOutputFile = set(
-      cloneDeep(correctParsedOuput),
+      cloneDeep(correctParsedOutput),
       'metadata.projectId',
       'cff9095a-5c24-46e6-b84d-cc8596b17c58',
     );

docs/user_guide_screenshots/locator.png

@@ -11,7 +11,6 @@ import { v4 as uuid4 } from 'uuid';
 import { AllowedFrontendChannels } from '../../shared/ipc-channels';
 import {
   Attributions,
-  DiscreteConfidence,
   ParsedFileContent,
   ResourcesToAttributions,
 } from '../../shared/shared-types';
@@ -177,11 +176,11 @@ export async function loadInputAndOutputFromFilePath(
       attributionsToResources: externalAttributionsToResources,
     },
     frequentLicenses,
-    resolvedExternalAttributions: parsedOutputData.resolvedExternalAttributions,
-    attributionBreakpoints: new Set(
-      parsedInputData.attributionBreakpoints ?? [],
+    resolvedExternalAttributions: new Set(
+      parsedOutputData.resolvedExternalAttributions,
     ),
-    filesWithChildren: new Set(parsedInputData.filesWithChildren ?? []),
+    attributionBreakpoints: new Set(parsedInputData.attributionBreakpoints),
+    filesWithChildren: new Set(parsedInputData.filesWithChildren),
     baseUrlsForSources: sanitizeRawBaseUrlsForSources(
       parsedInputData.baseUrlsForSources,
     ),
@@ -261,12 +260,6 @@ function createJsonOutputFile(
       delete packageInfo.source;
       delete packageInfo.preferred;
       delete packageInfo.preferredOverOriginIds;
-      if (packageInfo.attributionConfidence !== undefined) {
-        packageInfo.attributionConfidence =
-          packageInfo.attributionConfidence >= DiscreteConfidence.High
-            ? DiscreteConfidence.High
-            : DiscreteConfidence.Low;
-      }
 
       const newUUID = uuid4();
       manualAttributions[newUUID] = packageInfo;

docs/user_guide_screenshots/locator_project_statistics.png

@@ -31,52 +31,52 @@ export async function parseOpossumFile(
 ): Promise<
   ParsedOpossumInputAndOutput | JsonParsingError | InvalidDotOpossumFileError
 > {
-  let parsedInputData: unknown;
-  let parsedOutputData: unknown = null;
-  let jsonParsingError: JsonParsingError | null = null;
-  let invalidDotOpossumFileError: InvalidDotOpossumFileError | null = null;
+  let parsedInputData: ParsedOpossumInputFile;
+  let parsedOutputData: ParsedOpossumOutputFile | null = null;
 
   const zip: fflate.Unzipped = await readZipAsync(opossumFilePath);
+
   if (!zip[INPUT_FILE_NAME]) {
-    invalidDotOpossumFileError = {
+    return {
       filesInArchive: Object.keys(zip)
         .map((fileName) => `'${fileName}'`)
         .join(', '),
       type: 'invalidDotOpossumFileError',
-    };
-  } else {
-    getGlobalBackendState().inputFileRaw = zip[INPUT_FILE_NAME];
-    const inputJson = fflate.strFromU8(zip[INPUT_FILE_NAME]);
+    } satisfies InvalidDotOpossumFileError;
+  }
+
+  getGlobalBackendState().inputFileRaw = zip[INPUT_FILE_NAME];
+
+  try {
+    parsedInputData = JSON.parse(fflate.strFromU8(zip[INPUT_FILE_NAME]));
+    jsonSchemaValidator.validate(
+      parsedInputData,
+      OpossumInputFileSchema,
+      validationOptions,
+    );
+  } catch (err) {
+    return {
+      message: `Error: ${opossumFilePath} does not contain a valid input file.\n Original error message: ${err?.toString()}`,
+      type: 'jsonParsingError',
+    } satisfies JsonParsingError;
+  }
+
+  if (zip[OUTPUT_FILE_NAME]) {
     try {
-      parsedInputData = parseAndValidateJson(inputJson, OpossumInputFileSchema);
+      const outputJson = fflate.strFromU8(zip[OUTPUT_FILE_NAME]);
+      parsedOutputData = parseOutputJsonContent(outputJson, opossumFilePath);
     } catch (err) {
-      jsonParsingError = {
-        message: `Error: ${opossumFilePath} does not contain a valid input file.\n Original error message: ${err?.toString()}`,
+      return {
+        message: `Error: ${opossumFilePath} does not contain a valid output file.\n${err?.toString()}`,
         type: 'jsonParsingError',
-      };
-    }
-
-    if (zip[OUTPUT_FILE_NAME]) {
-      try {
-        const outputJson = fflate.strFromU8(zip[OUTPUT_FILE_NAME]);
-        parsedOutputData = parseOutputJsonContent(outputJson, opossumFilePath);
-      } catch (err) {
-        jsonParsingError = {
-          message: `Error: ${opossumFilePath} does not contain a valid output file.\n${err?.toString()}`,
-          type: 'jsonParsingError',
-        };
-      }
+      } satisfies JsonParsingError;
     }
   }
 
-  return jsonParsingError
-    ? jsonParsingError
-    : invalidDotOpossumFileError
-      ? invalidDotOpossumFileError
-      : {
-          input: parsedInputData as ParsedOpossumInputFile,
-          output: parsedOutputData as ParsedOpossumOutputFile,
-        };
+  return {
+    input: parsedInputData,
+    output: parsedOutputData,
+  };
 }
 
 async function readZipAsync(opossumFilePath: string): Promise<fflate.Unzipped> {
@@ -160,34 +160,17 @@ export function parseOutputJsonContent(
   fileContent: string,
   filePath: fs.PathLike,
 ): ParsedOpossumOutputFile {
-  let outputJsonContent;
   try {
-    outputJsonContent = parseAndValidateJson(
-      fileContent,
+    const jsonContent = JSON.parse(fileContent);
+    jsonSchemaValidator.validate(
+      jsonContent,
       OpossumOutputFileSchema,
+      validationOptions,
     );
+    return jsonContent;
   } catch (err) {
     throw new Error(
       `Error: ${filePath.toString()} contains an invalid output file.\n Original error message: ${err?.toString()}`,
     );
   }
-
-  const resolvedExternalAttributions = (
-    outputJsonContent as Record<string, unknown>
-  ).resolvedExternalAttributions;
-  return {
-    ...(outputJsonContent as Record<string, unknown>),
-    resolvedExternalAttributions: resolvedExternalAttributions
-      ? new Set(resolvedExternalAttributions as Array<string>)
-      : new Set(),
-  } as ParsedOpossumOutputFile;
-}
-
-function parseAndValidateJson(
-  content: string,
-  schema: typeof OpossumInputFileSchema | typeof OpossumOutputFileSchema,
-): unknown {
-  const jsonContent = JSON.parse(content);
-  jsonSchemaValidator.validate(jsonContent, schema, validationOptions);
-  return jsonContent;
 }

docs/user_guide_screenshots/open_file.png

@@ -223,6 +223,7 @@ export function serializeAttributions(
           count,
           followUp,
           id,
+          relation,
           resources,
           source,
           suffix,

docs/user_guide_screenshots/report_view.png

@@ -258,37 +258,6 @@ export async function createMenu(mainWindow: BrowserWindow): Promise<Menu> {
           accelerator: 'CmdOrCtrl+A',
           role: 'selectAll',
         },
-        { type: 'separator' },
-        {
-          icon: getIconBasedOnTheme(
-            'icons/search-white.png',
-            'icons/search-black.png',
-          ),
-          label: 'Search for Files and Directories',
-          accelerator: 'CmdOrCtrl+F',
-          click(): void {
-            if (isFileLoaded(getGlobalBackendState())) {
-              webContents.send(AllowedFrontendChannels.ShowSearchPopup, {
-                showSearchPopup: true,
-              });
-            }
-          },
-        },
-        {
-          icon: getIconBasedOnTheme(
-            'icons/location-searching-white.png',
-            'icons/location-searching-black.png',
-          ),
-          label: 'Locate Signals',
-          accelerator: 'CmdOrCtrl+L',
-          click(): void {
-            if (isFileLoaded(getGlobalBackendState())) {
-              webContents.send(AllowedFrontendChannels.ShowLocatorPopup, {
-                showSearchPopup: true,
-              });
-            }
-          },
-        },
       ],
     },
     {
@@ -356,7 +325,7 @@ export async function createMenu(mainWindow: BrowserWindow): Promise<Menu> {
             );
             void UserSettings.set('qaMode', false);
           },
-          visible: qaMode,
+          visible: !!qaMode,
         },
       ],
     },

docs/user_guide_screenshots/search.png

@@ -4,26 +4,14 @@
 // SPDX-License-Identifier: Apache-2.0
 import { BrowserWindow } from 'electron';
 import settings from 'electron-settings';
-import { isEqual } from 'lodash';
 
 import { AllowedFrontendChannels } from '../../shared/ipc-channels';
 import { UserSettings as IUserSettings } from '../../shared/shared-types';
 
 export class UserSettings {
   public static async init() {
-    const current: Partial<IUserSettings> = await settings.get();
-    const reset = process.argv.includes('--reset');
-
-    const updated = {
-      ...current,
-      showProjectStatistics: reset
-        ? false
-        : current.showProjectStatistics ?? true,
-      qaMode: reset ? false : current.qaMode ?? false,
-    } satisfies IUserSettings;
-
-    if (!isEqual(current, updated)) {
-      await settings.set(updated);
+    if (process.argv.includes('--reset')) {
+      await settings.set({});
     }
   }
 

docs/user_guide_screenshots/selected_resource_panel.png

@@ -62,7 +62,7 @@ export interface ParsedOpossumOutputFile {
   };
   manualAttributions: RawAttributions;
   resourcesToAttributions: ResourcesToAttributions;
-  resolvedExternalAttributions: Set<string>;
+  resolvedExternalAttributions: Array<string> | undefined;
 }
 
 export interface ParsedOpossumInputAndOutput {