#416 (New Frontend) Refactor Visualizations to AuthorState Usage

- added merge function to codeExpertise
- added filter to be able to search for all children authors in commits to group data by parent

Author: bastianferch

binocular-frontend-new/src/plugins/visualizationPlugins/expertise/codeExpertise/src/chart/chart.tsx

@@ -205,6 +205,29 @@ function drawChart(options: {
     }
   });
 
+  // Merge child authors into their parents according to parent-child relation
+  props.authorList
+    .filter((a) => a.parent > 0)
+    .forEach((child) => {
+      const parent = props.authorList.find((a) => a.id === child.parent);
+      if (!parent) return;
+      const childSig = child.user.gitSignature;
+      const parentSig = parent.user.gitSignature;
+      const childData = devDataMap[childSig];
+      if (!childData) return;
+      if (devDataMap[parentSig]) {
+        devDataMap[parentSig].commits = [...devDataMap[parentSig].commits, ...childData.commits];
+        devDataMap[parentSig].additions = (devDataMap[parentSig].additions || 0) + (childData.additions || 0);
+        devDataMap[parentSig].linesOwned = (devDataMap[parentSig].linesOwned || 0) + (childData.linesOwned || 0);
+      } else {
+        devDataMap[parentSig] = { ...childData };
+      }
+      delete devDataMap[childSig];
+    });
+
+  // Recalculate maxCommitsPerDev after merging
+  maxCommitsPerDev = Object.values(devDataMap).reduce((max, dev) => Math.max(max, dev.commits.length), 0);
+
   const newSegments: React.JSX.Element[] = [];
   let totalPercent = 0;
 
@@ -220,13 +243,15 @@ function drawChart(options: {
     totalPercent = endPercent;
     const palette = generatePalette(props.authorList);
     const devColor = palette[devName]?.main || '#cccccc';
+    const author = props.authorList.find((a) => a.user.gitSignature === devName);
+    const devLabel = author?.displayName || devName;
     newSegments.push(
       <Segment
         key={devName}
         rad={radius}
         startPercent={startPercent}
         endPercent={endPercent}
-        devName={devName}
+        devName={devLabel}
         devData={devData}
         devColor={devColor}
         maxCommitsPerDev={maxCommitsPerDev}
@@ -327,10 +352,7 @@ function generatePalette(authors: AuthorType[]): Palette {
   authors.forEach((author) => {
     if (!author.selected) return;
 
-    const displayName = author.displayName || author.user.gitSignature;
-
-    // Create palette entries for each metric
-    palette[`${displayName}`] = {
+    palette[author.user.gitSignature] = {
       main: chroma(author.color.main).hex(),
       secondary: chroma(author.color.secondary).hex(),
     };

binocular-frontend-new/src/plugins/visualizationPlugins/expertise/codeExpertise/src/utilities/dbUtils.ts

@@ -9,7 +9,7 @@
 //  So it is not enough that `allCommits` contains all commits with date <= the date of the commit in question.
 //  To be safe, `allCommits` should really contain all commits of the project.
 //  Otherwise, this function may return wrong results (if there are commits in the history that have a `date` > the `commit` date).
-import type { DataPluginCommit, DataPluginOwnership } from '../../../../interfaces/dataPluginInterfaces/dataPluginCommits.ts';
+import type { DataPluginCommit, DataPluginOwnership } from '../../../../../interfaces/dataPluginInterfaces/dataPluginCommits';
 
 export const getHistoryForCommit = (commit: DataPluginCommit, allCommits: DataPluginOwnership[]) => {
   // each commit only has the hash of the parent. Build a map, so we can get the actual commit for a given sha.

binocular-frontend-new/src/plugins/visualizationPlugins/expertise/knowledgeRadar/src/chart/authorSelection.tsx

@@ -20,7 +20,7 @@ const AuthorSelection: React.FC<AuthorSelectionProps> = ({ authorList, selectedA
   const inputRef = useRef<HTMLInputElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const availableAuthors = authorList.filter((author) => author.selected);
+  const availableAuthors = authorList.filter((author) => author.selected && author.parent === -1);
 
   // Initialize temp selections when dropdown opens
   useEffect(() => {

binocular-frontend-new/src/plugins/visualizationPlugins/expertise/knowledgeRadar/src/chart/chart.tsx

@@ -89,14 +89,16 @@ function RadarChart(properties: VisualizationPluginProperties<SettingsType, Data
 
     if (selectedDevelopers.length > 0 && data != undefined && data.length > 0) {
       selectedDevelopers.forEach((developer) => {
-        const devData = calculateExpertiseBrowserScores(data, developer.user.gitSignature);
+        const childSignatures = authorList.filter((a) => a.parent === developer.id).map((a) => a.user.gitSignature);
+        const allSignatures = [developer.user.gitSignature, ...childSignatures];
+        const devData = calculateExpertiseBrowserScores(data, allSignatures);
         newIndividualData.set(developer.user.gitSignature, devData);
       });
     }
 
     setIndividualDeveloperData(newIndividualData);
     resetNavigation();
-  }, [data, properties, selectedDevelopers]);
+  }, [data, properties, selectedDevelopers, authorList]);
 
   /**
    * Updates author list and selected developers when author list changes.
@@ -105,6 +107,7 @@ function RadarChart(properties: VisualizationPluginProperties<SettingsType, Data
     setAuthorList(properties.authorList);
     updateSelectedDevelopers(properties.authorList);
   }, [properties.authorList]);
+
   /**
    * Sets up resize observer for responsive chart sizing.
    */
@@ -213,8 +216,9 @@ function RadarChart(properties: VisualizationPluginProperties<SettingsType, Data
    * @param authorList - Current list of available authors
    */
   function updateSelectedDevelopers(authorList: AuthorType[]) {
+    const available = authorList.filter((a) => a.selected && a.parent === -1);
     setSelectedDevelopers((prev) =>
-      prev.filter((developer) => authorList.some((author) => author.user.gitSignature === developer.user.gitSignature)),
+      prev.filter((developer) => available.some((author) => author.user.gitSignature === developer.user.gitSignature)),
     );
   }
 

binocular-frontend-new/src/plugins/visualizationPlugins/expertise/knowledgeRadar/src/chart/drawRadarChart.ts

@@ -72,7 +72,7 @@ function setTooltipContent(
         .style('font-size', '10px')
         .style('color', chroma(developer.color.main).darken(1).hex())
         .style('font-weight', 'bold')
-        .text(developer.user.gitSignature);
+        .text(developer.displayName || developer.user.gitSignature);
 
       devDiv
         .append('span')

binocular-frontend-new/src/plugins/visualizationPlugins/expertise/knowledgeRadar/src/utilities/dataConverter.ts

@@ -4,8 +4,8 @@ import type { DataPluginCommit } from '../../../../../interfaces/dataPluginInter
 /**
  * Extracts file paths touched by a specific developer
  */
-export function extractTouchedFiles(commits: DataPluginCommit[], developer: string): Set<string> {
-  const developerCommits = commits.filter((commit) => commit.user?.gitSignature === developer);
+export function extractTouchedFiles(commits: DataPluginCommit[], developers: string[]): Set<string> {
+  const developerCommits = commits.filter((commit) => developers.includes(commit.user?.gitSignature));
 
   const touchedFiles = new Set<string>();
 
@@ -107,12 +107,12 @@ function calculateOwnershipScores(
 /**
  * Calculates Expertise Browser scores based on academic literature
  */
-export function calculateExpertiseBrowserScores(commits: DataPluginCommit[], targetDeveloper: string): Package[] {
+export function calculateExpertiseBrowserScores(commits: DataPluginCommit[], targetDevelopers: string[]): Package[] {
   const nonMergeCommits = filterNonMergeCommits(commits);
 
-  const developerTouchedFiles = extractTouchedFiles(nonMergeCommits, targetDeveloper);
+  const developerTouchedFiles = extractTouchedFiles(nonMergeCommits, targetDevelopers);
 
-  const developerCommits = nonMergeCommits.filter((commit) => commit.user.gitSignature === targetDeveloper);
+  const developerCommits = nonMergeCommits.filter((commit) => targetDevelopers.includes(commit.user.gitSignature));
 
   const packageCommits = processCommitFiles(developerCommits, developerTouchedFiles);