TK4 - kokjp1/TechTrack GitHub Wiki

Technische Keuze 4 - Refactoring

Een van de problemen waar ik tegen aan liep met d3 was dat de code erg lang werd. Om hier wat aan te doen heb ik gekeken of het mogelijk was om mijn d3 treemap code op te splitsen. Ik vond het niet nodig om hem ontzettend klein te maken, de treemap code, dus besloot ik te kijken naar de grootste bijdragers aan de lange code. Ik kwam tot de conclusie hierbij dat de sorteerfunctie (d3.sort) uiteindelijk een van de meest visually cluttering delen van de functie was. Ik heb toen aan ChatGPT gevraagd of het mogelijk was deze functie te refactoren naar een apart bestand en hem dan te importeren. Verder heb ik ook gekeken naar mijn eigen code, hoe ik het aangepakt heb.

Uitkomst

Mijn uiteindelijke besluit is geworden om de functie toch in de totale d3 functie te laten. De redenen hiervoor;

• Ik werkte voor de hele codebase al best wel gestructueerd en in componenten en helper functions
• KISS, Als ik voor heel veel dingen aparte bestanden zou maken zou het de d3 functie algeheel veel overzichtelijker maken. Ik vond het niet logisch om een apart bestand te maken voor deze functie als het enige einddoel was dat het iets minder coderegels in het hoofdbestand zou opleveren. De voordelen/KISS verhouding was het niet waard naar mijn mening.
• Daarnaast is het ook makkelijker en overzichtelijker om als je de code probeert te begrijpen een algeheel beeld te hebben van de functie. Omdat deze .sort functie zo belangrijk en fundamenteel is voor de hele treemap functie, is het niet logisch om hem op te delen.
• Tot slot, gebruik ik nergens anders deze grafiek dus zal ik ook nooit mezelf herhalen door deze code te herschrijven (DRY)

.sort((a, b) => {
    const aSong = a.data;
    const bSong = b.data;

    if (sortMode === 'none') {
        return 0;
    }

    if (sortMode === 'duration') {
        const aDur = aSong?.durationMs ?? 0;
        const bDur = bSong?.durationMs ?? 0;
        return bDur - aDur; // lang -> kort
    }

    if (sortMode === 'artistAmount') {
        const aArtists = Array.isArray(aSong?.artists)
            ? aSong.artists
            : [aSong?.artists ?? 'Unknown'];
        const bArtists = Array.isArray(bSong?.artists)
            ? bSong.artists
            : [bSong?.artists ?? 'Unknown'];

        const aArtistName = aArtists[0]?.name ?? aArtists[0] ?? 'Unknown';
        const bArtistName = bArtists[0]?.name ?? bArtists[0] ?? 'Unknown';

        const aCount = artistAmount.get(aArtistName) || 0;
        const bCount = artistAmount.get(bArtistName) || 0;

        if (bCount !== aCount) return bCount - aCount;
        return d3.ascending(aArtistName, bArtistName);
    }

    if (sortMode === 'genreAmount') {
        const aGenre = aSong?.genre || 'Unknown';
        const bGenre = bSong?.genre || 'Unknown';

        const aCount = genreAmount.get(aGenre) || 0;
        const bCount = genreAmount.get(bGenre) || 0;

        if (bCount !== aCount) return bCount - aCount;
        return d3.ascending(aGenre, bGenre);
    }

    return 0;
})