Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[UI] Results table refactor #931

Merged
merged 45 commits into from
Aug 20, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
45 commits
Select commit Hold shift + click to select a range
df87731
Add spells chool colors
1337LutZ Aug 10, 2024
f2695d7
Damage / healing / dtps table metrics WIP
1337LutZ Aug 10, 2024
2281e39
Add metrics combined totals tooltip
1337LutZ Aug 11, 2024
825688c
Add isPeriodic bool and fix spellschools
1337LutZ Aug 11, 2024
779821c
Add SpellType filtering & concat Metrics options
1337LutZ Aug 12, 2024
affd1ef
Add isProc check to ActionMetrics and pet resolvers
1337LutZ Aug 12, 2024
a7f6962
Add damage/healing crits
1337LutZ Aug 12, 2024
6d67945
Add damage done metric & dtps miss concat
1337LutZ Aug 12, 2024
009ce42
Merge branch 'master' into feature/results-refactor
1337LutZ Aug 12, 2024
2a8fd53
Merge threat metrics
1337LutZ Aug 13, 2024
6e6c581
Remove unused metrics
1337LutZ Aug 13, 2024
04112a0
Remove console log
1337LutZ Aug 13, 2024
efa11b2
Fix typo
1337LutZ Aug 13, 2024
161074f
Fix healing prop missing
1337LutZ Aug 13, 2024
56fd1f4
de-compact H/DPS values & only ignore moving pets
1337LutZ Aug 13, 2024
ac56896
Add healing hit/crit metric & Unholy Strength crits
1337LutZ Aug 13, 2024
6d46845
Updated tests due to Unholy Strength heals being able to crit
1337LutZ Aug 13, 2024
4aa86a4
Add DPET and fallback string to formatter
1337LutZ Aug 13, 2024
22204b6
Fix aura pet movement filter
1337LutZ Aug 13, 2024
5b67e05
Remove DPASP & refactor topline results to table
1337LutZ Aug 13, 2024
bfa6624
Change field tmi to old dpasp field number
1337LutZ Aug 14, 2024
ab583eb
Add IsPassiveAction
1337LutZ Aug 14, 2024
e5e8098
PR Feedback
1337LutZ Aug 15, 2024
7c3457a
Add more PassiveSpell flags
1337LutZ Aug 15, 2024
b711226
Normalize cast / hits
1337LutZ Aug 15, 2024
2332ab0
Add glancing, blocks, crit blocked damage
1337LutZ Aug 15, 2024
4c8d8ef
Add accidental removed shoulder name
1337LutZ Aug 15, 2024
5506eb5
Add missing CritBlocks metric
1337LutZ Aug 15, 2024
46d756a
Fix descriptive comments
1337LutZ Aug 15, 2024
c30c5c0
WIP adding ticks/crit ticks
1337LutZ Aug 15, 2024
b0af6a7
Add Dot tick metrics
1337LutZ Aug 15, 2024
f98e933
Remove spelltype, add proxy spell outcomes for non-hit additions and …
1337LutZ Aug 16, 2024
e68e45c
Fix summon action ID names
1337LutZ Aug 16, 2024
3fb97e1
PR feedback: hardcode spellschools in FE
1337LutZ Aug 16, 2024
a5b3086
Fix logs layout & add NoCounter outcomes
1337LutZ Aug 16, 2024
bbb1a38
Disabled recuperate heal dot
1337LutZ Aug 16, 2024
4a3f100
Fix Casts column & update subtlety test
1337LutZ Aug 16, 2024
909c393
a few style tweaks on results refactor
kayla-glick Aug 17, 2024
2fe7782
Merge pull request #934 from wowsims/feature/results-refactor-style-t…
kayla-glick Aug 17, 2024
1b8f714
Fix InDebt findings
1337LutZ Aug 17, 2024
42bbda4
Fix mind sear metrics
1337LutZ Aug 17, 2024
2fffcfe
[Metrics] Add correct cast time metrics for channels
Aug 18, 2024
0fee7ef
Fix TotalCastTime metric for channels being 0
1337LutZ Aug 18, 2024
fadaaa8
Merge branch 'master' into feature/results-refactor
1337LutZ Aug 19, 2024
40342d8
Merge branch 'master' into feature/results-refactor
1337LutZ Aug 20, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Add metrics combined totals tooltip
  • Loading branch information
1337LutZ committed Aug 11, 2024
commit 2281e3942cabed06954fb31e8b8aefa76d4e0af2
2 changes: 1 addition & 1 deletion ui/core/components/detailed_results/aura_metrics.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { OtherAction } from '../../proto/common';
import { AuraMetrics, SimResult, SimResultFilter } from '../../proto_utils/sim_result';
import { ColumnSortType, MetricsTable } from './metrics_table';
import { ColumnSortType, MetricsTable } from './metrics_table/metrics_table';
import { ResultComponent, ResultComponentConfig, SimResultData } from './result_component';

export class AuraMetricsTable extends MetricsTable<AuraMetrics> {
Expand Down
2 changes: 1 addition & 1 deletion ui/core/components/detailed_results/cast_metrics.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ActionMetrics, SimResult, SimResultFilter } from '../../proto_utils/sim_result.js';
import { ColumnSortType, MetricsTable } from './metrics_table.js';
import { ColumnSortType, MetricsTable } from './metrics_table/metrics_table.jsx';
import { ResultComponent, ResultComponentConfig, SimResultData } from './result_component.js';

export class CastMetricsTable extends MetricsTable<ActionMetrics> {
Expand Down
92 changes: 37 additions & 55 deletions ui/core/components/detailed_results/damage_metrics.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,12 @@ import clsx from 'clsx';
import tippy from 'tippy.js';

import { spellSchoolNames } from '../../proto_utils/names';
import { ActionMetrics } from '../../proto_utils/sim_result.js';
import { bucket, formatToCompactNumber, formatToNumber, formatToPercent } from '../../utils.js';
import { ColumnSortType, MetricsTable } from './metrics_table.jsx';
import { ResultComponentConfig, SimResultData } from './result_component.js';
import { ActionMetrics } from '../../proto_utils/sim_result';
import { bucket, formatToCompactNumber, formatToNumber, formatToPercent } from '../../utils';
import { MetricsCombinedTooltipTable } from './metrics_table/metrics_combined_tooltip_table';
import { ColumnSortType, MetricsTable } from './metrics_table/metrics_table';
import { MetricsTotalBar } from './metrics_table/metrics_total_bar';
import { ResultComponentConfig, SimResultData } from './result_component';

export class DamageMetricsTable extends MetricsTable<ActionMetrics> {
maxDamageAmount: number | null = null;
Expand Down Expand Up @@ -34,23 +36,14 @@ export class DamageMetricsTable extends MetricsTable<ActionMetrics> {
getValue: (metric: ActionMetrics) => metric.avgDamage,
fillCell: (metric: ActionMetrics, cellElem: HTMLElement) => {
cellElem.classList.add('metric-total');
// console.log({
// name: metric.name,
// isPet: metric.unit?.isPet,
// otherId: metric.actionId.otherId,
// totalDamagePercent: metric.totalDamagePercent || 0,
// });
const spellSchoolString = typeof metric.spellSchool === 'number' ? spellSchoolNames.get(metric.spellSchool) : undefined;
cellElem.appendChild(
<div className="d-flex gap-1">
<div className="metrics-total-percentage">{formatToPercent(metric.totalDamagePercent || 0)}</div>
<div className="metrics-total-bar">
<div
className={clsx('metrics-total-bar-fill', spellSchoolString && `spell-school-${spellSchoolString.toLowerCase()}`)}
style={{ '--percentage': formatToPercent((metric.damage / (this.maxDamageAmount ?? 1)) * 100) }}></div>
</div>
<div className="metrics-total-damage">{formatToCompactNumber(metric.avgDamage)}</div>
</div>,
<MetricsTotalBar
spellSchool={metric.spellSchool}
percentage={metric.totalDamagePercent}
max={this.maxDamageAmount}
total={metric.avgDamage}
value={metric.damage}
/>,
);
},
},
Expand Down Expand Up @@ -108,43 +101,32 @@ export class DamageMetricsTable extends MetricsTable<ActionMetrics> {
cellElem.appendChild(<>{formatToPercent(metric.totalMissesPercent)}</>);

tippy(cellElem, {
placement: 'right',
theme: 'metrics-table',
content: (
<>
<table className="metrics-table">
<thead className="metrics-table-header">
<tr className="metrics-table-header-row">
<th className="metrics-table-header-cell">Type</th>
<th className="metrics-table-header-cell">Count</th>
</tr>
</thead>
<tbody className="metrics-table-body">
{metric.misses ? (
<tr>
<td>Miss</td>
<td>
{formatToPercent((metric.missPercent / metric.totalMissesPercent) * 100)} - {formatToNumber(metric.misses)}
</td>
</tr>
) : undefined}
{metric.parries ? (
<tr>
<td>Parry</td>
<td>
{formatToPercent((metric.parryPercent / metric.totalMissesPercent) * 100)} -{' '}
{formatToNumber(metric.parries)}
</td>
</tr>
) : undefined}
{metric.dodges ? (
<tr>
<td>Dodge</td>
<td>
{formatToPercent((metric.dodgePercent / metric.totalMissesPercent) * 100)} - {formatToNumber(metric.dodges)}
</td>
</tr>
) : undefined}
</tbody>
</table>
<MetricsCombinedTooltipTable
spellSchool={metric.spellSchool}
total={metric.totalMisses}
totalPercentage={metric.totalMissesPercent}
values={[
{
name: 'Miss',
value: metric.misses,
percentage: metric.missPercent,
},
{
name: 'Parry',
value: metric.parries,
percentage: metric.parryPercent,
},
{
name: 'Dodge',
value: metric.dodges,
percentage: metric.dodgePercent,
},
]}
/>
</>
),
});
Expand Down
2 changes: 1 addition & 1 deletion ui/core/components/detailed_results/dtps_melee_metrics.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ActionMetrics, SimResult, SimResultFilter } from '../../proto_utils/sim_result.js';
import { ColumnSortType, MetricsTable } from './metrics_table.js';
import { ColumnSortType, MetricsTable } from './metrics_table/metrics_table.jsx';
import { ResultComponent, ResultComponentConfig, SimResultData } from './result_component.js';

export class DtpsMeleeMetricsTable extends MetricsTable<ActionMetrics> {
Expand Down
24 changes: 11 additions & 13 deletions ui/core/components/detailed_results/dtps_metrics.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import clsx from 'clsx';

import { spellSchoolNames } from '../../proto_utils/names';
import { ActionMetrics } from '../../proto_utils/sim_result.js';
import { ActionMetrics } from '../../proto_utils/sim_result';
import { formatToCompactNumber, formatToPercent } from '../../utils';
import { ColumnSortType, MetricsTable } from './metrics_table.jsx';
import { ResultComponentConfig, SimResultData } from './result_component.js';
import { ColumnSortType, MetricsTable } from './metrics_table/metrics_table';
import { MetricsTotalBar } from './metrics_table/metrics_total_bar';
import { ResultComponentConfig, SimResultData } from './result_component';

export class DtpsMetricsTable extends MetricsTable<ActionMetrics> {
maxDtpsAmount: number | null = null;
Expand Down Expand Up @@ -33,17 +34,14 @@ export class DtpsMetricsTable extends MetricsTable<ActionMetrics> {
getValue: (metric: ActionMetrics) => metric.avgDamage,
fillCell: (metric: ActionMetrics, cellElem: HTMLElement) => {
cellElem.classList.add('metric-total');
const spellSchoolString = typeof metric.spellSchool === 'number' ? spellSchoolNames.get(metric.spellSchool) : undefined;
cellElem.appendChild(
<div className="d-flex gap-1">
<div className="metrics-total-percentage">{formatToPercent(metric.totalDamagePercent || 0)}</div>
<div className="metrics-total-bar">
<div
className={clsx('metrics-total-bar-fill', spellSchoolString && `spell-school-${spellSchoolString.toLowerCase()}`)}
style={{ '--percentage': formatToPercent((metric.damage / (this.maxDtpsAmount ?? 1)) * 100) }}></div>
</div>
<div className="metrics-total-damage">{formatToCompactNumber(metric.avgDamage)}</div>
</div>,
<MetricsTotalBar
spellSchool={metric.spellSchool}
percentage={metric.totalDamagePercent}
max={this.maxDtpsAmount}
total={metric.avgDamage}
value={metric.damage}
/>,
);
},
},
Expand Down
2 changes: 1 addition & 1 deletion ui/core/components/detailed_results/dtps_spell_metrics.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ActionMetrics, SimResult, SimResultFilter } from '../../proto_utils/sim_result.js';
import { ColumnSortType, MetricsTable } from './metrics_table.js';
import { ColumnSortType, MetricsTable } from './metrics_table/metrics_table.jsx';
import { ResultComponent, ResultComponentConfig, SimResultData } from './result_component.js';

export class DtpsSpellMetricsTable extends MetricsTable<ActionMetrics> {
Expand Down
28 changes: 10 additions & 18 deletions ui/core/components/detailed_results/healing_metrics.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import clsx from 'clsx';
import { spellSchoolNames } from '../../proto_utils/names';
import { ActionMetrics } from '../../proto_utils/sim_result.js';
import { formatToCompactNumber, formatToNumber, formatToPercent } from '../../utils.js';
import { ColumnSortType, MetricsTable } from './metrics_table.jsx';
import { ColumnSortType, MetricsTable } from './metrics_table/metrics_table.jsx';
import { MetricsTotalBar } from './metrics_table/metrics_total_bar';
import { ResultComponentConfig, SimResultData } from './result_component.js';

export class HealingMetricsTable extends MetricsTable<ActionMetrics> {
Expand Down Expand Up @@ -33,24 +34,15 @@ export class HealingMetricsTable extends MetricsTable<ActionMetrics> {
getValue: (metric: ActionMetrics) => metric.avgHealing,
fillCell: (metric: ActionMetrics, cellElem: HTMLElement) => {
cellElem.classList.add('metric-total');
const spellSchoolString = typeof metric.spellSchool === 'number' ? spellSchoolNames.get(metric.spellSchool) : undefined;
cellElem.appendChild(
<div className="d-flex gap-1">
<div className="metrics-total-percentage">{formatToPercent(metric.totalHealingPercent || 0)}</div>
<div className="metrics-total-bar">
<div
className={clsx('metrics-total-bar-fill', spellSchoolString && `spell-school-${spellSchoolString.toLowerCase()}`)}
style={{ '--percentage': formatToPercent((metric.healing / (this.maxHealingAmount ?? 1)) * 100) }}
/>
{metric.shielding ? (
<div
className="metrics-total-bar-fill bg-black bg-opacity-25"
style={{ '--percentage': formatToPercent((metric.shielding / (this.maxHealingAmount ?? 1)) * 100) }}
/>
) : undefined}
</div>
<div className="metrics-total-damage">{formatToCompactNumber(metric.avgHealing)}</div>
</div>,
<MetricsTotalBar
spellSchool={metric.spellSchool}
percentage={metric.totalHealingPercent}
max={this.maxHealingAmount}
total={metric.avgHealing}
value={metric.healing}
overlayValue={metric.shielding}
/>,
);
},
},
Expand Down
2 changes: 1 addition & 1 deletion ui/core/components/detailed_results/melee_metrics.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { ActionMetrics, SimResult, SimResultFilter } from '../../proto_utils/sim_result.js';
import { bucket } from '../../utils.js';
import { ColumnSortType, MetricsTable } from './metrics_table.js';
import { ColumnSortType, MetricsTable } from './metrics_table/metrics_table.jsx';
import { ResultComponent, ResultComponentConfig, SimResultData } from './result_component.js';

export class MeleeMetricsTable extends MetricsTable<ActionMetrics> {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import clsx from 'clsx';

import { SpellSchool } from '../../../proto/common';
import { formatToNumber, formatToPercent } from '../../../utils';
import { MetricsTotalBar } from './metrics_total_bar';

type MetricsCombinedTableEntry = {
name: string;
value: number;
percentage: number;
};

type MetricsCombinedTooltipTableProps = {
total: number;
totalPercentage: number;
values: MetricsCombinedTableEntry[];
spellSchool: SpellSchool | undefined | null;
};
export const MetricsCombinedTooltipTable = ({ total, totalPercentage, values, spellSchool }: MetricsCombinedTooltipTableProps) => {
const displayedValues = values.filter(v => v.value);
const maxValue = Math.max(...displayedValues.map(a => a.value));

return (
<table className="metrics-table">
<thead className="metrics-table-header">
<tr className="metrics-table-header-row">
<th className="metrics-table-header-cell">Type</th>
<th className="metrics-table-header-cell">Count</th>
</tr>
</thead>
<tbody className="metrics-table-body">
{displayedValues.map(({ name, value, percentage }) => (
<tr>
<td>{name}</td>
<td>
<MetricsTotalBar
spellSchool={spellSchool}
percentage={(percentage / totalPercentage) * 100}
max={maxValue}
total={value}
value={value}
/>
</td>
</tr>
))}
</tbody>
{displayedValues.length > 1 && (
<tfoot className="metrics-table-footer">
<tr className="metrics-table-footer-row">
<td>Total</td>
<td className="text-end">{formatToNumber(total)}</td>
</tr>
</tfoot>
)}
</table>
);
};
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import tippy from 'tippy.js';
import { ref } from 'tsx-vanilla';

import { ActionId } from '../../proto_utils/action_id.js';
import { UnitMetrics } from '../../proto_utils/sim_result';
import { TypedEvent } from '../../typed_event.js';
import { ResultComponent, ResultComponentConfig, SimResultData } from './result_component.js';
import { ActionId } from '../../../proto_utils/action_id.js';
import { UnitMetrics } from '../../../proto_utils/sim_result.js';
import { TypedEvent } from '../../../typed_event.js';
import { ResultComponent, ResultComponentConfig, SimResultData } from '../result_component.js';

declare let $: any;

Expand Down Expand Up @@ -203,12 +203,12 @@ export abstract class MetricsTable<T> extends ResultComponent {
const data = getData(metric);
const iconElem = ref<HTMLAnchorElement>();
cellElem.appendChild(
<>
<div className="metrics-action">
<a ref={iconElem} className="metrics-action-icon"></a>
<span className="metrics-action-name">{data.name}</span>
<span className="metrics-action-name text-truncate">{data.name}</span>
<span className="expand-toggle fa fa-caret-down"></span>
<span className="expand-toggle fa fa-caret-right"></span>
</>,
</div>,
);
if (iconElem.value) {
data.actionId.setBackgroundAndHref(iconElem.value);
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import clsx from 'clsx';

import { SpellSchool } from '../../../proto/common';
import { spellSchoolNames } from '../../../proto_utils/names';
import { formatToCompactNumber, formatToPercent } from '../../../utils';

type MetricsTotalBarProps = {
percentage: number | undefined | null;
max: number | null;
total: number;
value: number;
// Used for overlayed value display, such as shielding.
// Will show as darkened bar on top of main bar.
overlayValue?: number;
spellSchool: SpellSchool | undefined | null;
};
export const MetricsTotalBar = ({ percentage, max, total, value, overlayValue, spellSchool }: MetricsTotalBarProps) => {
const spellSchoolString = typeof spellSchool === 'number' ? spellSchoolNames.get(spellSchool) : undefined;

return (
<div className="d-flex gap-1">
<div className="metrics-total-percentage">{formatToPercent(percentage || 0)}</div>
<div className="metrics-total-bar">
<div
className={clsx('metrics-total-bar-fill', spellSchoolString && `spell-school-${spellSchoolString.toLowerCase()}`)}
style={{ '--percentage': formatToPercent((value / (max ?? 1)) * 100) }}></div>
{overlayValue ? (
<div
className="metrics-total-bar-fill bg-black bg-opacity-25"
style={{ '--percentage': formatToPercent((overlayValue / (max ?? 1)) * 100) }}
/>
) : undefined}
</div>
<div className="metrics-total-damage">{formatToCompactNumber(total)}</div>
</div>
);
};
2 changes: 1 addition & 1 deletion ui/core/components/detailed_results/player_damage.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import tippy from 'tippy.js';

import { SimResult, SimResultFilter,UnitMetrics } from '../../proto_utils/sim_result.js';
import { maxIndex, sum } from '../../utils.js';
import { ColumnSortType, MetricsTable } from './metrics_table.js';
import { ColumnSortType, MetricsTable } from './metrics_table/metrics_table.jsx';
import { ResultComponent, ResultComponentConfig, SimResultData } from './result_component.js';
import { ResultsFilter } from './results_filter.js';
import { SourceChart } from './source_chart.js';
Expand Down
2 changes: 1 addition & 1 deletion ui/core/components/detailed_results/player_damage_taken.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import tippy from 'tippy.js';

import { SimResult, SimResultFilter,UnitMetrics } from '../../proto_utils/sim_result.js';
import { maxIndex, sum } from '../../utils.js';
import { ColumnSortType, MetricsTable } from './metrics_table.js';
import { ColumnSortType, MetricsTable } from './metrics_table/metrics_table.jsx';
import { ResultComponent, ResultComponentConfig, SimResultData } from './result_component.js';
import { ResultsFilter } from './results_filter.js';
import { SourceChart } from './source_chart.js';
Expand Down
12 changes: 6 additions & 6 deletions ui/core/components/detailed_results/resource_metrics.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { ResourceType } from '../../proto/api.js';
import { resourceNames } from '../../proto_utils/names.js';
import { ResourceMetrics } from '../../proto_utils/sim_result.js';
import { orderedResourceTypes } from '../../proto_utils/utils.js';
import { ColumnSortType, MetricsTable } from './metrics_table.js';
import { ResultComponent, ResultComponentConfig, SimResultData } from './result_component.js';
import { ResourceType } from '../../proto/api';
import { resourceNames } from '../../proto_utils/names';
import { ResourceMetrics } from '../../proto_utils/sim_result';
import { orderedResourceTypes } from '../../proto_utils/utils';
import { ColumnSortType, MetricsTable } from './metrics_table/metrics_table';
import { ResultComponent, ResultComponentConfig, SimResultData } from './result_component';

export class ResourceMetricsTable extends ResultComponent {
constructor(config: ResultComponentConfig) {
Expand Down
Loading