feat: show cumulative maximum score probability in timeline tooltip

src/routes/analysis/+page.svelte

@@ -18,6 +18,7 @@
   import { releasedSongCharts } from '$lib/data/song-release.ts';
   import PresetManager from '$lib/components/PresetManager.svelte';
   import ScoreTimelineChart from '$lib/components/ScoreTimelineChart.svelte';
+  import { calculateMaximumScoreProbabilityTimeline } from '$lib/engine/score-probability.ts';
   import SongPicker from '$lib/components/SongPicker.svelte';
   import { buildExactSkillWindows, calculateBoardEffects, calculateExactScore, calculateUnitPower, countOptimizationCandidates, finalNoteScore, memoryParameterPermil, optimizeBoardConnectionCards, optimizeExactOrderAndCooldowns, perfectNoteScoreFromPower, toOptimizerCard } from '$lib/engine/index.ts';
   import type { ExactScoreOptions, OptimizerCard, CooldownReduction, EffectiveSkillWindow, ExactOptimizationResult, ExactSongChart, OptimizableConnectionCard, OptimizationProgress, ScoreAchievementProbabilities, SkillWindow } from '$lib/engine/index.ts';
@@ -134,6 +135,13 @@
     excludedActiveWindows = [];
   }
   $: displayedResult = simulatedResult ?? result;
+  $: maximumScoreProbabilities = result && simulationContext
+    ? calculateMaximumScoreProbabilityTimeline(
+      result.order.map((id) => simulationContext!.cards.find((card) => card.id === id)!),
+      result.cooldownReductions, simulationContext.chart,
+      { ...simulationContext.options, excludedActiveWindows }
+    )
+    : [];
   $: activeImpacts = result && simulationContext && mode === 'analysis'
     ? calculateActiveImpacts(
       result.order.map((id) => simulationContext!.cards.find((card) => card.id === id)!),
@@ -1215,7 +1223,7 @@
         {/if}
         <div class="timeline-scroll" role="region" aria-label="스킬 발동 시간대 그래프">
           <div class="timeline-canvas" style={`width: ${timelineWidth + 156}px;`}>
-            <ScoreTimelineChart notes={displayedResult!.notes} durationSeconds={timelineDuration} minimumWidth={timelineWidth} timeTicks={timelineTicks} />
+            <ScoreTimelineChart notes={displayedResult!.notes} {maximumScoreProbabilities} durationSeconds={timelineDuration} minimumWidth={timelineWidth} timeTicks={timelineTicks} />
             {#each result.order as cardId, slot}
               <div class="timeline-row member-row">
                 <strong class="lane-label"><small style={`--member-color: ${memberColor(cardId)};`}>{slot + 1}</small>{resultCardName(cardId)}</strong>