☰

Araigoshi's Wanikani Stage Breakdown

Show SRS and leech breakdown on dashboard, with ability to expand and view detailed lists.

// ==UserScript==
// @name          Araigoshi's Wanikani Stage Breakdown
// @namespace     https://www.wanikani.com
// @description   Show SRS and leech breakdown on dashboard, with ability to expand and view detailed lists.
// @author        araigoshi
// @version       1.2.1
// @match         https://www.wanikani.com/*
// @license       MIT
// @grant         none
// ==/UserScript==

(async function () {
  'use strict';

  /* global wkof */

  if (!window.wkof) {
    let response = confirm('Dashboard Stage Breakdown requires WaniKani Open Framework.\n Click "OK" to be forwarded to installation instructions.');

    if (response) {
      window.location.href = 'https://community.wanikani.com/t/instructions-installing-wanikani-open-framework/28549';
    }

    return;
  }

  const SCRIPT_ID = 'araistages';
  const STAGE_NAMES = {
    0: 'Unlearned',
    1: 'Apprentice I',
    2: 'Apprentice II',
    3: 'Apprentice III',
    4: 'Apprentice IV',
    5: 'Guru I',
    6: 'Guru II',
    7: 'Master',
    8: 'Enlightened',
    9: 'Burned',
  };

  const TYPE_LABELS = {
    'radical': 'Radical',
    'kanji': 'Kanji',
    'vocabulary': 'Vocab',
    'kana_vocabulary': 'Vocab'
  };

  const ROMAN_NUMERALS = [0, 'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X'];

  const CSS_TEXT =
    `
        .dashboard section.srs-progress .srs-progress-details-group {
            display: flex;
            margin: 0;
            list-style-type: none;
            gap: 0.3em;
            justify-content: center;
            padding-top: var(--spacing-xtight);
            font-size: var(--font-size-xsmall);
            color: var(--color-text);
        }

        .araistages-items-compact {
            .srs-progress__subject-types {
              display: none !important;
            }
        }

        .araistages-items-expanded {
          .araistages-types-group {
            display: none !important;
          }
        }

        .araistages-hide-leeches-with-details {
          .srs-progress__stage--apprentice, .srs-progress__stage--guru {
            .leeches-group {
              display: none !important;
            }
          }
        }

        .dashboard section.srs-progress .srs-progress-details-group:has(+ .leeches-group:hover),
        .dashboard section.srs-progress .srs-progress-details-group:has(+ .srs-progress-details-group + .leeches-group:hover)
         {
          .group-item-leeches {
            display: initial;
          }
          .group-item-value {
            display: none;
          }
        }

        .dashboard section.srs-progress {
          li.grouped-list {
            padding: var(--spacing-xtight) 0.3em;
            border-radius: var(--border-radius-tight);
            background-color: var(--color-srs-progress-subject-type-background, white);
            flex-grow: 1;
            flex-basis: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;

            &:first-child {
              padding-left: var(--spacing-xtight);
            }

            &:last-child {
              padding-right: var(--spacing-xtight);
            }

            &:hover {
              background-color: #f88;
            }

            .group-item-label {
              flex-grow: 1;
            }

            .group-item-value {
              font-weight: bold;
            }

            &:hover .group-item-value {
              display: none;
            }

            .group-item-leeches {
              font-weight: bold;
              display: none;
            }

            &:hover .group-item-leeches {
              display: initial;
            }
          }

          .srs-progress__stage--apprentice li.grouped-list { .group-item-value, .group-item-leeches { color: var(--color-srs-progress-apprentice); } }
          .srs-progress__stage--guru li.grouped-list { .group-item-value, .group-item-leeches { color: var(--color-srs-progress-guru); } }
          .srs-progress__stage--master li.grouped-list { .group-item-value, .group-item-leeches { color: var(--color-srs-progress-master); } }
          .srs-progress__stage--enlightened li.grouped-list { .group-item-value, .group-item-leeches { color: var(--color-srs-progress-enlightened); } }
        }

        #araistages-info-dialog {
          width: 800px;
          max-height: 80vh;
          flex-direction: column;
          border-radius: var(--border-radius-normal);
          padding: var(--spacing-tight);

          .close-button {
            border-radius: var(--border-radius-normal);
            border-style: solid;
          }

          &[open] {
            display: flex;
          }

          header {
            display: flex;
            gap: 2em;
            align-items: center;
            justify-content: space-between;
            margin: var(--spacing-xtight) 0;

            h2 {
              font-size: var(--font-size-xlarge);
            }

            button {
              border-style: solid;
              border-radius: var(--border-radius-normal);
              font-size: 20px;
              padding: 5px;
              font-weight: bold;
            }
          }

          .table-wrapper {
            flex-grow: 1;
            overflow: auto;
          }

          table {
            width: 100%;
            border-radius: var(--border-radius-normal);

            a {
              color: var(--color-link);
              text-decoration: none;
            }

            thead {
              th {
                background-color: var(--color-character-grid-header-background, #d5d5d5);
              }

              th:first-child {
                border-radius: var(--border-radius-normal) 0 0 0;
              }

              th:last-child {
                border-radius: 0 var(--border-radius-normal) 0 0;
              }
            }

            tbody,
            tbody a {
              color: var(--color-character-text);
            }

            th {
              text-align: left;
              font-variant: small-caps;
            }

            th, td {
              padding: 0.7em 1em;
            }

            wk-character-image {
              width: 14px;
              display: inline-block;
            }

            .row-kanji td {
              background-color: var(--color-kanji);
            }

            .row-kana_vocabulary td, .row-vocabulary td {
              background-color: var(--color-vocabulary);
            }

            .row-radical td {
              background-color: var(--color-radical);
            }

            tbody tr:last-child td:first-child {
              border-radius: 0 0 0 var(--border-radius-normal);
            }

            tbody tr:last-child td:last-child {
              border-radius: 0 0 var(--border-radius-normal) 0;
            }
          }

          .options {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2em;
            margin: var(--spacing-xtight) 0;

            select, input {
              width: fit-content;
            }

            .option {
              display: flex;
              align-items: baseline;
              gap: 0.5em;
            }
          }
        }`

  const state = {
    dialog: createDialog(),
    itemsBySrs: null,
  };
  window.araistages_state = state;

  const requiredWkofModules = 'Menu,ItemData,Settings';
  wkof.include(requiredWkofModules);
  await wkof.ready(requiredWkofModules);
  wkof.Settings.load(SCRIPT_ID, {
    compactItemTypes: true,
    leechThreshold: 1,
    alwaysShowTotalLeeches: false,
    useRMSForLeechScore: false,
    forceClearCache: false,
    tableSortOrder: 'wanikani',
    tablePageSize: 20,
    tableGroupType: 'all',
    tableGroup: 'all',
    tableItemType: 'all',
  });

  loadStylesheet();
  await loadData();

  document.documentElement.addEventListener("turbo:load", async (evt) => {
    const path = new URL(evt.detail.url).pathname;
    if (shouldLoadOnPage(path)) {
      await loadData(true);
    }
    renderer(path);
  });

  renderer(document.location.pathname);


  function loadStylesheet() {
    if (document.getElementById('araistages-styles') === null) {
      let styleSheet = document.createElement('style');
      styleSheet.id = 'araistages-styles';
      styleSheet.textContent = CSS_TEXT;
      document.body.appendChild(styleSheet);
    }
  }

  function shouldLoadOnPage(path) {
    return path === '/dashboard' || path === '/';
  }

  function renderer(path) {
    if (shouldLoadOnPage(path)) {
      setTimeout(() => updatePage(state.itemsBySrs), 0);
    }
  }

  async function loadData(clearCache) {
    if (clearCache && wkof.settings[SCRIPT_ID]?.forceClearCache) {
      wkof.Apiv2.clear_cache();
    }
    const allItems = await wkof.ItemData.get_items({
      wk_items: {
        options: {
          review_statistics: true,
          assignments: true
        }
      }
    });
    const filteredItems = allItems.filter(item => item?.assignments?.srs_stage > 0);
    state.itemsBySrs = mapItemsToSrs(filteredItems);
  }

  function insertMenu() {
    wkof.Menu.insert_script_link({
      name: `${SCRIPT_ID}_settings_open`,
      submenu: 'Settings',
      title: "Araigoshi's Dashboard Stage Breakdown",
      on_click() {
        new wkof.Settings({
          script_id: SCRIPT_ID,
          title: "Araigoshi's Dashboard Stage Breakdown",
          content: {
            compactItemTypes: {
              type: 'checkbox',
              label: 'Compact Item Types',
              hover_tip: 'Display all item types on one line. Turn off to use the Wanikani default item type breakdown.'
            },
            alwaysShowTotalLeeches: {
              type: 'checkbox',
              label: 'Always show total leeches',
              hover_tip: 'Display the total leeches as its own row, even for apprentice and guru',
            },
            useRMSForLeechScore: {
              type: 'checkbox',
              label: 'Use the Root-Mean-Square method for getting final leech score',
              hover_tip: 'Takes the Root-Mean-Square of the reading leech score and meaning leech score instead of the maximum',
            },
            forceClearCache: {
              type: 'checkbox',
              label: 'Clear Cache On Navigation',
              html: 'Useful if your review sessions last under a minute'
            },
            leechThreshold: {
              type: 'number',
              label: 'Leech Threshold',
              min: 1,
              hover_tip: 'How high the leech score needs to be to consider an item a leech.'
            },
            leechNote: {
              type: 'html',
              html: 'Note: Leeches will be recalculated after a page refresh.'
            }
          },
          on_save() {
            setStagesClasses();
          }
        }).open()
      }
    });
  }

  const sortFunctions = {
    wanikani(itemA, itemB) {
      const levelSort = itemA.data.level - itemB.data.level;
      return levelSort != 0 ? levelSort : itemA.data.lesson_position - itemB.data.lesson_position;
    },
    nextReview(itemA, itemB) {
      return Date.parse(itemA.assignments.available_at) - Date.parse(itemB.assignments.available_at);
    },
    leechScore(itemA, itemB) {
      return getLeechScore(itemB) - getLeechScore(itemA);
    }
  }

  function mapItemsToSrs(items) {
    const itemsBySrs = [1, 2, 3, 4, 5, 6, 7, 8, 9].reduce((result, srs) => {
      result[srs] = {
        totals: {
          all: 0,
          radical: 0,
          vocabulary: 0,
          kanji: 0,
        },
        leeches: {
          all: 0,
          radical: 0,
          vocabulary: 0,
          kanji: 0,
        },
        items: [],
      };

      return result;
    }, {});

    for (let item of items) {
      const srsStage = item.assignments.srs_stage;
      let subjectType = item.assignments.subject_type;
      if (subjectType === 'kana_vocabulary') {
        subjectType = 'vocabulary'
      }
      itemsBySrs[srsStage].totals[subjectType]++;
      itemsBySrs[srsStage].totals.all++;

      if (isLeech(item)) {
        itemsBySrs[srsStage].leeches[subjectType]++;
        itemsBySrs[srsStage].leeches.all++;
      }
      itemsBySrs[srsStage].items.push(item);
    }

    return itemsBySrs;
  }

  function rmsOfPair(num1, num2) {
    return Math.sqrt((Math.pow(num1, 2) + Math.pow(num2, 2)) / 2);
  }

  function getLeechScore(item) {
    if (item.review_statistics === undefined) {
      return 0;
    }

    const reviewStats = item.review_statistics;
    const meaningScore = calculateLeechScore(reviewStats.meaning_incorrect, reviewStats.meaning_current_streak);
    const readingScore = calculateLeechScore(reviewStats.reading_incorrect, reviewStats.reading_current_streak);

    return wkof.settings[SCRIPT_ID]?.useRMSForLeechScore ? rmsOfPair(meaningScore, readingScore) : Math.max(meaningScore, readingScore);
  }

  function isLeech(item) {
    return getLeechScore(item) > (wkof.settings[SCRIPT_ID]?.leechThreshold || 1);
  }

  function calculateLeechScore(incorrect, currentStreak) {
    return incorrect / Math.pow((currentStreak || 0.5), 1.5);
  }

  function stagesForSection(section) {
    switch (section) {
        case 'apprentice':
            return [1, 2, 3, 4];
        case 'guru':
            return [5, 6];
        case 'master':
            return [7];
        case 'enlightened':
            return [8];
        case 'burned':
            return [9];
    }
  }

  function setStagesClasses() {
    const el = document.querySelector('.dashboard__srs-progress');
    if(!el) {
      // Settings accessed from non-dashboard page
      return;
    }
    el.classList.remove('araistages-items-expanded', 'araistages-items-compact', 'araistages-always-leeches')
    const itemTypesCls = wkof.settings[SCRIPT_ID]?.compactItemTypes ? 'compact' : 'expanded';
    el.classList.toggle('araistages-hide-leeches-with-details', !wkof.settings[SCRIPT_ID]?.alwaysShowTotalLeeches);
    el.classList.add(`araistages-items-${itemTypesCls}`);
  }

  function updatePage(itemsBySrs) {
    insertMenu();
    setStagesClasses();

    for (var section of ['apprentice', 'guru', 'master', 'enlightened']) {
      addTypes(section, itemsBySrs);
      addSubStages(section, itemsBySrs);
      addTotalLeeches(section, itemsBySrs);
    }
    addTypes('burned', itemsBySrs);
  }

  function makeGroupedListItem(labelText, valueCount, leechesCount, dataProperties) {
    const li = document.createElement('li');
    li.classList.add('grouped-list');
    for (const property of Object.keys(dataProperties)) {
      li.dataset[property] = dataProperties[property];
    }

    const label = document.createElement('span');
    label.classList.add('group-item-label');
    label.textContent = labelText;
    li.appendChild(label);

    const value = document.createElement('span');
    value.classList.add('group-item-value');
    value.textContent = valueCount;
    li.appendChild(value);

    const leeches = document.createElement('span');
    leeches.textContent = leechesCount;
    leeches.classList.add('group-item-leeches');
    li.appendChild(leeches);


    li.addEventListener('click', handleGroupClick);

    return li;
  }

  function selectorForSection(srsSectionId) {
    return `.srs-progress__stage--${srsSectionId}`;
  }

  function addSubStages(srsSectionId, itemsBySrs) {
    const stages = stagesForSection(srsSectionId);
    if (stages.length <= 1) {
      return;
    }
    const items = stages.map((srs, i) => makeGroupedListItem(
      ROMAN_NUMERALS[i + 1],
      itemsBySrs[srs].totals.all,
      itemsBySrs[srs].leeches.all,
      { groupType: 'stage', group: srs, itemType: 'all' }
    ));
    document.querySelector(selectorForSection(srsSectionId)).appendChild(makeGroupList(items, 'stages-group'));
  }

  function addTotalLeeches(srsSectionId, itemsBySrs) {
    const totalLeechCount = sumAll(itemsBySrs, srsSectionId, 'leeches', 'all');
    document.querySelector(selectorForSection(srsSectionId)).appendChild(
      makeGroupList(
        [makeGroupedListItem(
          'Leeches', totalLeechCount,
          totalLeechCount,
          { groupType: 'section', group: srsSectionId, itemType: 'all' }
        )],
        'leeches-group'
      ),
    );
  }

  function sumAll(itemsBySrs, srsSectionId, group, field) {
    return stagesForSection(srsSectionId).reduce((n, stage) => n + itemsBySrs[stage][group][field], 0);
  }

  function makeTypeListItem(itemsBySrs, srsSectionId, abbr, itemType) {
    return makeGroupedListItem(
      abbr,
      sumAll(itemsBySrs, srsSectionId, 'totals', itemType),
      sumAll(itemsBySrs, srsSectionId, 'leeches', itemType),
      { groupType: 'section', group: srsSectionId, itemType }
    );
  }

  function makeGroupList(items, className) {
    const wrapper = document.createElement('ol');
    wrapper.classList.add('srs-progress-details-group', className);
    for (const item of items) {
      wrapper.appendChild(item);
    };
    return wrapper;
  }

  function addTypes(srsSectionId, itemsBySrs) {
    const items = [
      makeTypeListItem(itemsBySrs, srsSectionId, 'R', 'radical'),
      makeTypeListItem(itemsBySrs, srsSectionId, 'K', 'kanji'),
      makeTypeListItem(itemsBySrs, srsSectionId, 'V', 'vocabulary'),
    ];

    document.querySelector(selectorForSection(srsSectionId)).appendChild(makeGroupList(items, 'araistages-types-group'));
  }

  function renderSubject(item) {
    if (item.object !== 'radical') {
      return item.data.characters;
    }
    const primaryMeaning = item.data.meanings.find(meaning => meaning.primary === true).meaning;
    if (item.data.characters !== null) {
      return `${item.data.characters} (${primaryMeaning})`;
    } else {
      const imageUrl = item.data.character_images.find(image => image.content_type === 'image/svg+xml').url;
      return `<wk-character-image class="radical-image" src="${imageUrl}" aria-label=${primaryMeaning} alt="${primaryMeaning} radical"></wk-character-image> (${primaryMeaning})`;
    }
  }

  function rerenderDialogTable(groupType, group, itemType) {
    const resolvedGroupType = groupType ?? wkof.settings[SCRIPT_ID].tableGroupType;
    const resolvedGroup = group ?? wkof.settings[SCRIPT_ID].tableGroup;
    const resolvedItemType = itemType ?? wkof.settings[SCRIPT_ID].tableItemType;
    const items = getItems(resolvedGroupType, resolvedGroup, resolvedItemType);
    const tableRows = items.map(item => {
      const leechScore = new Intl.NumberFormat().format(getLeechScore(item));
      const assignAvailable = item.assignments.available_at;
      const nextReview = assignAvailable === null ? 'Never' : new Date(item.assignments.available_at)
        .toLocaleString(undefined, {
          dateStyle: 'short',
          timeStyle: 'short'
        });
      const subject = renderSubject(item);
      return `<tr class="row-${item.object}">
        <td><a href="${item.data.document_url}">${subject}</a></td>
        <td>${TYPE_LABELS[item.object]}</td>
        <td>${STAGE_NAMES[item.assignments.srs_stage]}</td>
        <td>${item.data.level}</td>
        <td>${leechScore}</td>
        <td>${nextReview}</td>
      </tr>`;
    });
    state.dialog.querySelector('tbody').innerHTML = tableRows.join('');
  }

  function createDialog() {
    const dialogEl = document.createElement('dialog');
    dialogEl.innerHTML = `
      <header>
        <h2>Item Stage Breakdown</h2>
        <button class="close-button">X</button>
      </header>
      <div class="options">
        <div class="option">
          <label for="araistages-table-group">Stage</label>
          <select id="araistages-table-group">
            <option selected value="all-all">All</option>
            <hr>
            <option value="section-apprentice">Apprentice</option>
            <option value="stage-1">-- Apprentice I</option>
            <option value="stage-2">-- Apprentice II</option>
            <option value="stage-3">-- Apprentice III</option>
            <option value="stage-4">-- Apprentice IV</option>
            <hr>
            <option value="section-guru">Guru</option>
            <option value="stage-5">-- Guru I</option>
            <option value="stage-6">-- Guru II</option>
            <hr>
            <option value="section-master">Master</option>
            <hr>
            <option value="section-enlightened">Enlightened</option>
            <hr>
            <option value="section-burned">Burned</option>
          </select>
        </div>
        <div class="option">
          <label for="araistages-table-type">Type</label>
          <select id="araistages-table-type">
            <option value="all">All</option>
            <option value="radical">- Radicals</option>
            <option value="kanji">- Kanji</option>
            <option value="vocabulary">- Vocab</option>
          </select>
        </div>
        <div class="option">
          <label for="araistages-sort-order">Sort</label>
          <select id="araistages-sort-order">
            <option selected value="wanikani">WK Order</option>
            <option value="nextReview">Next Review</option>
            <option value="leechScore">Leech Score</option>
          </select>
        </div>
        <div class="option">
          <label for="araistages-page-size">Max Items</label>
          <select id="araistages-page-size">
            <option selected value="20">20</option>
            <option value="50">50</option>
            <option value="100">100</option>
            <option value="250">250</option>
            <option value="9999">All</option>
          </select>
        </div>
      </div>
      <div class="table-wrapper">
        <table>
          <thead>
            <tr>
              <th>Item</th>
              <th>Type</th>
              <th>Stage</th>
              <th>Level</th>
              <th>Leech Score</th>
              <th>Next Review</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
      </div>
    `;
    dialogEl.id = 'araistages-info-dialog';
    dialogEl.addEventListener('change', (evt) => {
      console.log(evt);
    });
    dialogEl.querySelector('.close-button').addEventListener('click', () => {
      dialogEl.close();
    });
    dialogEl.querySelector('#araistages-sort-order').addEventListener('change', (evt) => {
      wkof.settings[SCRIPT_ID].tableSortOrder = evt.target.value;
      rerenderDialogTable();
    });
    dialogEl.querySelector('#araistages-page-size').addEventListener('change', (evt) => {
      wkof.settings[SCRIPT_ID].tablePageSize = parseInt(evt.target.value, 10);
      rerenderDialogTable();
    });
    dialogEl.querySelector('#araistages-table-group').addEventListener('change', (evt) => {
      const [groupType, group] = evt.target.value.split('-');
      wkof.settings[SCRIPT_ID].tableGroupType = groupType;
      wkof.settings[SCRIPT_ID].tableGroup = group;
      rerenderDialogTable(groupType, group);
    });
    dialogEl.querySelector('#araistages-table-type').addEventListener('change', (evt) => {
      wkof.settings[SCRIPT_ID].tableItemType = evt.target.value;
      rerenderDialogTable();
    });
    document.body.appendChild(dialogEl);
    return dialogEl;
  }

  function handleGroupClick(evt) {
    const data = evt.currentTarget.dataset;
    showDialog(data.groupType, data.group, data.itemType);
  }

  function getItems(group, option, itemType) {
    let stages = Object.keys(state.itemsBySrs).map(x => parseInt(x, 10));
    if(group === 'stage') {
      stages = [parseInt(option, 10)];
    }
    if(group === 'section') {
      stages = stagesForSection(option);
    }

    let items = [];
    for (const stage of stages) {
      items = items.concat(state.itemsBySrs[stage].items);
    }

    if(itemType !== 'all') {
      items = items.filter(item => item.object === itemType || (itemType === 'vocabulary' && item.object === 'kana_vocabulary'));
    }

    const pageSize = wkof.settings[SCRIPT_ID]?.tablePageSize || 20;
    items.sort(sortFunctions[wkof.settings[SCRIPT_ID].tableSortOrder]);
    return items.slice(0, pageSize);
  }

  function showDialog(groupType, group, itemType) {
    rerenderDialogTable(groupType, group, itemType);
    state.dialog.querySelector('#araistages-table-group').value = `${groupType}-${group}`;
    state.dialog.querySelector('#araistages-table-type').value = itemType;
    wkof.settings[SCRIPT_ID].tableGroupType = groupType;
    wkof.settings[SCRIPT_ID].tableGroup = group;
    wkof.settings[SCRIPT_ID].tableItemType = itemType;
    state.dialog.showModal();
  }
})();