]> git.sesse.net Git - pkanalytics/blobdiff - ultimate.js
Start working on some team-wide stats.
[pkanalytics] / ultimate.js
index 04e9bad802479d3a2a44566eb937c0a3572931f3..b5bc2147034c4765ad41c1eda4aabc6062d7bdbd 100644 (file)
@@ -3,7 +3,8 @@
 // No frameworks, no compilers, no npm, just JavaScript. :-)
 
 let global_json;
-let global_filters = [];
+let global_filters = {};
+let next_filterset_id = 2;  // Arbitrary IDs are fine as long as they never collide.
 
 addEventListener('hashchange', () => { process_matches(global_json, global_filters); });
 addEventListener('click', possibly_close_menu);
@@ -170,7 +171,7 @@ function add_3cell_ci(tr, ci) {
        element.appendChild(svg);
 }
 
-function process_matches(json, filters) {
+function calc_stats(json, filters) {
        let players = {};
        for (const player of json['players']) {
                players[player['player_id']] = {
@@ -228,8 +229,16 @@ function process_matches(json, filters) {
 
                'offensive_points_completed': 0,
                'offensive_points_won': 0,
+               'clean_holds': 0,
+
                'defensive_points_completed': 0,
                'defensive_points_won': 0,
+               'clean_breaks': 0,
+
+               'turnovers_won': 0,
+               'turnovers_lost': 0,
+               'their_clean_holds': 0,
+               'their_clean_breaks': 0,
        };
        let globals = players['globals'];
 
@@ -240,6 +249,7 @@ function process_matches(json, filters) {
 
                let our_score = 0;
                let their_score = 0;
+               let between_points = true;
                let handler = null;
                let handler_got_by_interception = false;  // Only relevant if handler !== null.
                let prev_handler = null;
@@ -251,6 +261,11 @@ function process_matches(json, filters) {
                let point_num = 0;
                let game_started = null;
                let last_goal = null;
+               let current_predominant_gender = null;
+               let current_num_players_on_field = null;
+
+               let we_lost_disc = false;
+               let they_lost_disc = false;
 
                // The last used formations of the given kind, if any; they may be reused
                // when the point starts, if nothing else is set.
@@ -308,14 +323,56 @@ function process_matches(json, filters) {
 
                        keep = keep_event(players, formations_used_this_point, last_pull_was_ours, filters);  // Recompute after in/out.
 
+                       if (match['gender_rule_a']) {
+                               if (type === 'restart' && !between_points) {
+                                       let predominant_gender = find_predominant_gender(players);
+                                       let num_players_on_field = find_num_players_on_field(players);
+                                       if (predominant_gender !== current_predominant_gender && current_predominant_gender !== null) {
+                                               console.log(match['description'] + ' ' + format_time(t) + ': Stoppage changed predominant gender from ' + current_predominant_gender + ' to ' + predominant_gender);
+                                       }
+                                       if (num_players_on_field !== current_num_players_on_field && current_num_players_on_field !== null) {
+                                               console.log(match['description'] + ' ' + format_time(t) + ': Stoppage changed number of players on field from ' + current_num_players_on_field + ' to ' + num_players_on_field);
+                                       }
+                                       current_predominant_gender = predominant_gender;
+                                       current_num_players_on_field = num_players_on_field;
+                               } else if (type === 'pull' || type === 'their_pull') {
+                                       let predominant_gender = find_predominant_gender(players);
+                                       let num_players_on_field = find_num_players_on_field(players);
+                                       let changed = (predominant_gender !== current_predominant_gender);
+                                       if (point_num !== 0) {
+                                               let should_change = (point_num % 4 == 1 || point_num % 4 == 3);  // ABBA changes on 1 and 3.
+                                               if (changed && !should_change) {
+                                                       console.log(match['description'] + ' ' + format_time(t) + ': Gender ratio should have stayed the same, changed to predominance of ' + predominant_gender);
+                                               } else if (!changed && should_change) {
+                                                       console.log(match['description'] + ' ' + format_time(t) + ': Gender ratio should have changed, remained predominantly ' + predominant_gender);
+                                               }
+                                               if (num_players_on_field !== current_num_players_on_field && current_num_players_on_field !== null) {
+                                                       console.log(match['description'] + ' ' + format_time(t) + ': Number of players on field changed from ' + current_num_players_on_field + ' to ' + num_players_on_field);
+                                               }
+                                       }
+                                       current_predominant_gender = predominant_gender;
+                                       current_num_players_on_field = num_players_on_field;
+                               }
+                       }
+                       if (match['gender_pull_rule']) {
+                               if (type === 'pull') {
+                                       if (current_predominant_gender !== null &&
+                                           p.gender !== current_predominant_gender) {
+                                               console.log(match['description'] + ' ' + format_time(t) + ': ' + p.name + ' pulled, should have been ' + current_predominant_gender);
+                                       }
+                               }
+                       }
+
                        // Liveness management
                        if (type === 'pull' || type === 'their_pull' || type === 'restart') {
                                live_since = t;
+                               between_points = false;
                        } else if (type === 'catch' && last_pull_was_ours === null) {
                                // Someone forgot to add the pull, so we'll need to wing it.
                                console.log(match['description'] + ' ' + format_time(t) + ': Missing pull on ' + our_score + '\u2013' + their_score + '; pretending to have one.');
                                live_since = t;
                                last_pull_was_ours = !offense;
+                               between_points = false;
                        } else if (type === 'goal' || type === 'their_goal' || type === 'stoppage') {
                                for (const [q,p] of Object.entries(players)) {
                                        if (p.on_field_since === null) {
@@ -415,12 +472,42 @@ function process_matches(json, filters) {
                                puller = pull_started = null;
                        }
 
+                       // Stats for clean holds or not (must be done before resetting we_lost_disc etc. below).
+                       if (keep) {
+                               if (type === 'goal' && !we_lost_disc) {
+                                       if (last_pull_was_ours === false) {  // O point.
+                                               ++globals.clean_holds;
+                                       } else if (last_pull_was_ours === true) {
+                                               ++globals.clean_breaks;
+                                       }
+                               } else if (type === 'their_goal' && !they_lost_disc) {
+                                       if (last_pull_was_ours === true) {  // O point for them.
+                                               ++globals.their_clean_holds;
+                                       } else if (last_pull_was_ours === false) {
+                                               ++globals.their_clean_breaks;
+                                       }
+                               }
+                       }
+
                        // Offense/defense management
                        let last_offense = offense;
                        if (type === 'set_defense' || type === 'goal' || type === 'throwaway' || type === 'drop' || type === 'was_d' || type === 'stallout') {
                                offense = false;
+                               we_lost_disc = true;
+                               if (keep && type !== 'goal' && !(type === 'set_defense' && last_pull_was_ours === null)) {
+                                       ++globals.turnovers_lost;
+                               }
                        } else if (type === 'set_offense' || type === 'their_goal' || type === 'their_throwaway' || type === 'defense' || type === 'interception') {
                                offense = true;
+                               they_lost_disc = true;
+                               if (keep && type !== 'their_goal' && !(type === 'set_offense' && last_pull_was_ours === null)) {
+                                       ++globals.turnovers_won;
+                               }
+                       }
+                       if (type === 'goal' || type === 'their_goal') {
+                               between_points = true;
+                               we_lost_disc = false;
+                               they_lost_disc = false;
                        }
                        if (last_offense !== offense && live_since !== null) {
                                // Switched offense/defense status, so attribute this drive as needed,
@@ -515,8 +602,10 @@ function process_matches(json, filters) {
                                // _not_ after an interception, or a self-pass that's not a goal.
                                // (It must mean we tipped off someone.) We'll count it as a regular one
                                // for the time being, although it will make hockey assists weird.
-                               ++p.goals;
-                               ++p.callahans;
+                               if (keep) {
+                                       ++p.goals;
+                                       ++p.callahans;
+                               }
                                handler = prev_handler = null;
                        } else if (type === 'catch' || type === 'goal') {
                                if (handler !== null) {
@@ -608,23 +697,82 @@ function process_matches(json, filters) {
                        }
                }
        }
+       return players;
+}
 
+function process_matches(json, filtersets) {
        let chosen_category = get_chosen_category();
        write_main_menu(chosen_category);
 
-       let rows = [];
-       if (chosen_category === 'general') {
-               rows = make_table_general(players);
-       } else if (chosen_category === 'offense') {
-               rows = make_table_offense(players);
-       } else if (chosen_category === 'defense') {
-               rows = make_table_defense(players);
-       } else if (chosen_category === 'playing_time') {
-               rows = make_table_playing_time(players);
-       } else if (chosen_category === 'per_point') {
-               rows = make_table_per_point(players);
-       }
-       document.getElementById('stats').replaceChildren(...rows);
+       let filterset_values = Object.values(filtersets);
+       if (filterset_values.length === 0) {
+               filterset_values = [[]];
+       }
+
+       let rowsets = [];
+       for (const filter of filterset_values) {
+               let players = calc_stats(json, filter);
+               let rows = [];
+               if (chosen_category === 'general') {
+                       rows = make_table_general(players);
+               } else if (chosen_category === 'offense') {
+                       rows = make_table_offense(players);
+               } else if (chosen_category === 'defense') {
+                       rows = make_table_defense(players);
+               } else if (chosen_category === 'playing_time') {
+                       rows = make_table_playing_time(players);
+               } else if (chosen_category === 'per_point') {
+                       rows = make_table_per_point(players);
+               } else if (chosen_category === 'team_wide') {
+                       rows = make_table_team_wide(players);
+               }
+               rowsets.push(rows);
+       }
+
+       let merged_rows = [];
+       if (filterset_values.length > 1) {
+               for (let i = 0; i < rowsets.length; ++i) {
+                       let marker = make_filter_marker(filterset_values[i]);
+
+                       // Make filter header.
+                       let tr = rowsets[i][0];
+                       let th = document.createElement('th');
+                       th.textContent = '';
+                       tr.insertBefore(th, tr.firstChild);
+
+                       for (let j = 1; j < rowsets[i].length; ++j) {
+                               let tr = rowsets[i][j];
+
+                               // Remove the name for cleanness.
+                               if (i != 0) {
+                                       tr.firstChild.nextSibling.textContent = '';
+                               }
+
+                               if (i != 0) {
+                                       tr.style.borderTop = '0px';
+                               }
+                               if (i != rowsets.length - 1) {
+                                       tr.style.borderBottom = '0px';
+                               }
+
+                               // Make filter marker.
+                               let td = document.createElement('td');
+                               td.textContent = marker;
+                               td.classList.add('filtermarker');
+                               tr.insertBefore(td, tr.firstChild);
+                       }
+               }
+
+               for (let i = 0; i < rowsets[0].length; ++i) {
+                       for (let j = 0; j < rowsets.length; ++j) {
+                               merged_rows.push(rowsets[j][i]);
+                               if (i === 0) break;  // Don't merge the headings.
+                       }
+               }
+       } else {
+               merged_rows = rowsets[0];
+       }
+       document.getElementById('stats').replaceChildren(...merged_rows);
 }
 
 function get_chosen_category() {
@@ -636,6 +784,8 @@ function get_chosen_category() {
                return 'playing_time';
        } else if (window.location.hash === '#per_point') {
                return 'per_point';
+       } else if (window.location.hash === '#team_wide') {
+               return 'team_wide';
        } else {
                return 'general';
        }
@@ -643,59 +793,25 @@ function get_chosen_category() {
 
 function write_main_menu(chosen_category) {
        let elems = [];
-       if (chosen_category === 'general') {
-               let span = document.createElement('span');
-               span.innerText = 'General';
-               elems.push(span);
-       } else {
-               let a = document.createElement('a');
-               a.appendChild(document.createTextNode('General'));
-               a.setAttribute('href', '#general');
-               elems.push(a);
-       }
-
-       if (chosen_category === 'offense') {
-               let span = document.createElement('span');
-               span.innerText = 'Offense';
-               elems.push(span);
-       } else {
-               let a = document.createElement('a');
-               a.appendChild(document.createTextNode('Offense'));
-               a.setAttribute('href', '#offense');
-               elems.push(a);
-       }
-
-       if (chosen_category === 'defense') {
-               let span = document.createElement('span');
-               span.innerText = 'Defense';
-               elems.push(span);
-       } else {
-               let a = document.createElement('a');
-               a.appendChild(document.createTextNode('Defense'));
-               a.setAttribute('href', '#defense');
-               elems.push(a);
-       }
-
-       if (chosen_category === 'playing_time') {
-               let span = document.createElement('span');
-               span.innerText = 'Playing time';
-               elems.push(span);
-       } else {
-               let a = document.createElement('a');
-               a.appendChild(document.createTextNode('Playing time'));
-               a.setAttribute('href', '#playing_time');
-               elems.push(a);
-       }
-
-       if (chosen_category === 'per_point') {
-               let span = document.createElement('span');
-               span.innerText = 'Per point';
-               elems.push(span);
-       } else {
-               let a = document.createElement('a');
-               a.appendChild(document.createTextNode('Per point'));
-               a.setAttribute('href', '#per_point');
-               elems.push(a);
+       const categories = [
+               ['general', 'General'],
+               ['offense', 'Offense'],
+               ['defense', 'Defense'],
+               ['playing_time', 'Playing time'],
+               ['per_point', 'Per point'],
+               ['team_wide', 'Team-wide'],
+       ];
+       for (const [id, title] of categories) {
+               if (chosen_category === id) {
+                       let span = document.createElement('span');
+                       span.innerText = title;
+                       elems.push(span);
+               } else {
+                       let a = document.createElement('a');
+                       a.appendChild(document.createTextNode(title));
+                       a.setAttribute('href', '#' + id);
+                       elems.push(a);
+               }
        }
 
        document.getElementById('mainmenu').replaceChildren(...elems);
@@ -753,14 +869,14 @@ function make_poisson_ci(val, num, z, inverted)
        // Fix the signs so that we don't get -0.00.
        low = Math.max(low, 0.0);
 
-       // The display range of 0 to 0.25 is fairly arbitrary. So is the desired 0.05 per point.
+       // The display range of 0 to 0.5 is fairly arbitrary. So is the desired 0.05 per point.
        let avg = val / num;
        return {
                'val': avg,
                'lower_ci': low,
                'upper_ci': high,
                'min': 0.0,
-               'max': 0.25,
+               'max': 0.5,
                'desired': 0.05,
                'inverted': inverted,
        };
@@ -812,6 +928,56 @@ function make_table_general(players) {
        return rows;
 }
 
+function make_table_team_wide(players) {
+       let globals = players['globals'];
+
+       let rows = [];
+       {
+               let header = document.createElement('tr');
+               add_th(header, '');
+               add_th(header, 'Our team');
+               add_th(header, 'Their team');
+               rows.push(header);
+       }
+
+       // Turnovers.
+       {
+               let row = document.createElement('tr');
+               let name = add_3cell(row, 'Turnovers generated', 'name');
+               add_3cell(row, globals.turnovers_won);
+               add_3cell(row, globals.turnovers_lost);
+               rows.push(row);
+       }
+
+       // Clean holds.
+       {
+               let row = document.createElement('tr');
+               let name = add_3cell(row, 'Clean holds', 'name');
+               let our_clean_holds = make_binomial_ci(globals.clean_holds, globals.offensive_points_completed, z);
+               let their_clean_holds = make_binomial_ci(globals.their_clean_holds, globals.defensive_points_completed, z);
+               our_clean_holds.desired = 0.3;  // Arbitrary.
+               their_clean_holds.desired = 0.3;
+               add_3cell_ci(row, our_clean_holds);
+               add_3cell_ci(row, their_clean_holds);
+               rows.push(row);
+       }
+
+       // Clean breaks.
+       {
+               let row = document.createElement('tr');
+               let name = add_3cell(row, 'Clean breaks', 'name');
+               let our_clean_breaks = make_binomial_ci(globals.clean_breaks, globals.defensive_points_completed, z);
+               let their_clean_breaks = make_binomial_ci(globals.their_clean_breaks, globals.offensive_points_completed, z);
+               our_clean_breaks.desired = 0.3;  // Arbitrary.
+               their_clean_breaks.desired = 0.3;
+               add_3cell_ci(row, our_clean_breaks);
+               add_3cell_ci(row, their_clean_breaks);
+               rows.push(row);
+       }
+
+       return rows;
+}
+
 function make_table_offense(players) {
        let rows = [];
        {
@@ -1133,30 +1299,39 @@ function make_table_per_point(players) {
        return rows;
 }
 
-function open_filter_menu() {
+function open_filter_menu(click_to_add_div) {
        document.getElementById('filter-submenu').style.display = 'none';
+       let filter_div = click_to_add_div.parentElement;
+       let filter_id = filter_div.dataset.filterId;
 
        let menu = document.getElementById('filter-add-menu');
+       menu.parentElement.removeChild(menu);
+       filter_div.appendChild(menu);
        menu.style.display = 'block';
        menu.replaceChildren();
 
        // Place the menu directly under the “click to add” label;
        // we don't anchor it since that label will move around
        // and the menu shouldn't.
-       let rect = document.getElementById('filter-click-to-add').getBoundingClientRect();
+       let rect = click_to_add_div.getBoundingClientRect();
        menu.style.left = rect.left + 'px';
        menu.style.top = (rect.bottom + 10) + 'px';
 
-       add_menu_item(global_filters, menu, 0, 'match', 'Match (any)');
-       add_menu_item(global_filters, menu, 1, 'player_any', 'Player on field (any)');
-       add_menu_item(global_filters, menu, 2, 'player_all', 'Player on field (all)');
-       add_menu_item(global_filters, menu, 3, 'formation_offense', 'Offense played (any)');
-       add_menu_item(global_filters, menu, 4, 'formation_defense', 'Defense played (any)');
-       add_menu_item(global_filters, menu, 5, 'starting_on', 'Starting on');
-       add_menu_item(global_filters, menu, 6, 'gender_ratio', 'Gender ratio');
+       let filterset = global_filters[filter_id];
+       if (filterset === undefined) {
+               global_filters[filter_id] = filterset = [];
+       }
+
+       add_menu_item(filter_div, filterset, menu, 0, 'match', 'Match (any)');
+       add_menu_item(filter_div, filterset, menu, 1, 'player_any', 'Player on field (any)');
+       add_menu_item(filter_div, filterset, menu, 2, 'player_all', 'Player on field (all)');
+       add_menu_item(filter_div, filterset, menu, 3, 'formation_offense', 'Offense played (any)');
+       add_menu_item(filter_div, filterset, menu, 4, 'formation_defense', 'Defense played (any)');
+       add_menu_item(filter_div, filterset, menu, 5, 'starting_on', 'Starting on');
+       add_menu_item(filter_div, filterset, menu, 6, 'gender_ratio', 'Gender ratio');
 }
 
-function add_menu_item(filterset, menu, menu_idx, filter_type, title) {
+function add_menu_item(filter_div, filterset, menu, menu_idx, filter_type, title) {
        let item = document.createElement('div');
        item.classList.add('option');
        item.appendChild(document.createTextNode(title));
@@ -1168,7 +1343,7 @@ function add_menu_item(filterset, menu, menu_idx, filter_type, title) {
 
        menu.appendChild(item);
 
-       item.addEventListener('click', (e) => { show_submenu(filterset, menu_idx, null, filter_type); });
+       item.addEventListener('click', (e) => { show_submenu(filter_div, filterset, menu_idx, null, filter_type); });
 }
 
 function find_all_ratios(json)
@@ -1207,8 +1382,13 @@ function find_all_ratios(json)
        return ratios;
 }
 
-function show_submenu(filterset, menu_idx, pill, filter_type) {
+function show_submenu(filter_div, filterset, menu_idx, pill, filter_type) {
        let submenu = document.getElementById('filter-submenu');
+
+       // Move to the same place as the top-level menu.
+       submenu.parentElement.removeChild(submenu);
+       document.getElementById('filter-add-menu').parentElement.appendChild(submenu);
+
        let subitems = [];
        const filter = find_filter(filterset, filter_type);
 
@@ -1283,7 +1463,7 @@ function show_submenu(filterset, menu_idx, pill, filter_type) {
                if (filter !== null && filter.elements.has(choice.id)) {
                        check.setAttribute('checked', 'checked');
                }
-               check.addEventListener('change', (e) => { checkbox_changed(filterset, e, filter_type, choice.id); });
+               check.addEventListener('change', (e) => { checkbox_changed(filter_div, filterset, e, filter_type, choice.id); });
 
                subitem.appendChild(check);
                subitem.appendChild(document.createTextNode(choice.title));
@@ -1327,32 +1507,103 @@ function inplace_filter(arr, cond) {
        arr.length = j;
 }
 
-function checkbox_changed(filterset, e, filter_type, id) {
+function add_new_filterset() {
+       let template = document.querySelector('.filter');  // First one is fine.
+       let div = template.cloneNode(true);
+       let add_menu = div.querySelector('#filter-add-menu');
+       if (add_menu !== null) {
+               div.removeChild(add_menu);
+       }
+       let submenu = div.querySelector('#filter-submenu');
+       if (submenu !== null) {
+               div.removeChild(submenu);
+       }
+       div.querySelector('.filters').replaceChildren();
+       div.dataset.filterId = next_filterset_id++;
+       template.parentElement.appendChild(div);
+}
+
+function try_gc_filter_menus(cheap) {
+       let empties = [];
+       let divs = [];
+       for (const filter_div of document.querySelectorAll('.filter')) {
+               let id = filter_div.dataset.filterId;
+               divs.push(filter_div);
+               empties.push(global_filters[id] === undefined || global_filters[id].length === 0);
+       }
+       let last_div = divs[empties.length - 1];
+       if (cheap) {
+               // See if we have two empty filter lists at the bottom of the list;
+               // if so, we can remove one without it looking funny in the UI.
+               // If not, we'll have to wait until closing the menu.
+               // (The menu is positioned at the second-last one, so we can
+               // remove the last one without issue.)
+               if (empties.length >= 2 && empties[empties.length - 2] && empties[empties.length - 1]) {
+                       delete global_filters[last_div.dataset.filterId];
+                       last_div.parentElement.removeChild(last_div);
+               }
+       } else {
+               // This is a different situation from try_cheap_gc(), where we should
+               // remove the one _not_ last. We might need to move the menu to the last one,
+               // though, so it doesn't get lost.
+               for (let i = 0; i < empties.length - 1; ++i) {
+                       if (!empties[i]) {
+                               continue;
+                       }
+                       let div = divs[i];
+                       delete global_filters[div.dataset.filterId];
+                       let add_menu = div.querySelector('#filter-add-menu');
+                       if (add_menu !== null) {
+                               div.removeChild(add_menu);
+                               last_div.appendChild(add_menu);
+                       }
+                       let submenu = div.querySelector('#filter-submenu');
+                       if (submenu !== null) {
+                               div.removeChild(submenu);
+                               last_div.appendChild(submenu);
+                       }
+                       div.parentElement.removeChild(div);
+               }
+       }
+}
+
+function checkbox_changed(filter_div, filterset, e, filter_type, id) {
        let filter = find_filter(filterset, filter_type);
+       let pills_div = filter_div.querySelector('.filters');
        if (e.target.checked) {
+               // See if we must create a new empty filterset (since this went from
+               // empty to non-empty).
+               if (filterset.length === 0) {
+                       add_new_filterset();
+               }
+
                // See if we must add a new filter to the list.
                if (filter === null) {
                        filter = {
                                'type': filter_type,
                                'elements': new Set([ id ]),
                        };
-                       filter.pill = make_filter_pill(filterset, filter);
+                       filter.pill = make_filter_pill(filter_div, filterset, filter);
                        filterset.push(filter);
-                       document.getElementById('filters').appendChild(filter.pill);
+                       pills_div.appendChild(filter.pill);
                } else {
                        filter.elements.add(id);
-                       let new_pill = make_filter_pill(filterset, filter);
-                       document.getElementById('filters').replaceChild(new_pill, filter.pill);
+                       let new_pill = make_filter_pill(filter_div, filterset, filter);
+                       pills_div.replaceChild(new_pill, filter.pill);
                        filter.pill = new_pill;
                }
        } else {
                filter.elements.delete(id);
                if (filter.elements.size === 0) {
-                       document.getElementById('filters').removeChild(filter.pill);
+                       pills_div.removeChild(filter.pill);
                        inplace_filter(filterset, f => f !== filter);
+
+                       if (filterset.length == 0) {
+                               try_gc_filter_menus(true);
+                       }
                } else {
-                       let new_pill = make_filter_pill(filterset, filter);
-                       document.getElementById('filters').replaceChild(new_pill, filter.pill);
+                       let new_pill = make_filter_pill(filter_div, filterset, filter);
+                       pills_div.replaceChild(new_pill, filter.pill);
                        filter.pill = new_pill;
                }
        }
@@ -1360,7 +1611,7 @@ function checkbox_changed(filterset, e, filter_type, id) {
        process_matches(global_json, global_filters);
 }
 
-function make_filter_pill(filterset, filter) {
+function make_filter_pill(filter_div, filterset, filter) {
        let pill = document.createElement('div');
        pill.classList.add('filter-pill');
        let text;
@@ -1469,14 +1720,14 @@ function make_filter_pill(filterset, filter) {
                        if (!first) {
                                text += '; ';
                        }
-                       text += name;
+                       text += name;  // FIXME
                        first = false;
                }
        }
 
        let text_node = document.createElement('span');
        text_node.innerText = text;
-       text_node.addEventListener('click', (e) => show_submenu(filterset, null, pill, filter.type));
+       text_node.addEventListener('click', (e) => show_submenu(filter_div, filterset, null, pill, filter.type));
        pill.appendChild(text_node);
 
        pill.appendChild(document.createTextNode(' '));
@@ -1485,8 +1736,11 @@ function make_filter_pill(filterset, filter) {
        delete_node.innerText = '✖';
        delete_node.addEventListener('click', (e) => {
                // Delete this filter entirely.
-               document.getElementById('filters').removeChild(pill);
+               pill.parentElement.removeChild(pill);
                inplace_filter(filterset, f => f !== filter);
+               if (filterset.length == 0) {
+                       try_gc_filter_menus(false);
+               }
                process_matches(global_json, global_filters);
 
                let add_menu = document.getElementById('filter-add-menu');
@@ -1500,6 +1754,60 @@ function make_filter_pill(filterset, filter) {
        return pill;
 }
 
+function make_filter_marker(filterset) {
+       let text = '';
+       for (const filter of filterset) {
+               if (text !== '') {
+                       text += ',';
+               }
+               if (filter.type === 'match') {
+                       let all_names = [];
+                       for (const match of global_json['matches']) {
+                               all_names.push(match['description']);
+                       }
+                       let common_prefix = find_common_prefix_of_all(all_names);
+
+                       let sorted_match_id = Array.from(filter.elements).sort((a, b) => a - b);
+                       for (const match_id of sorted_match_id) {
+                               let desc = find_match(match_id)['description'];
+                               if (common_prefix === null) {
+                                       text += desc.substr(0, 3);
+                               } else {
+                                       text += desc.substr(common_prefix.length, 3);
+                               }
+                       }
+               } else if (filter.type === 'player_any' || filter.type === 'player_all') {
+                       let sorted_players = Array.from(filter.elements).sort((a, b) => player_pos(a) - player_pos(b));
+                       for (const player_id of sorted_players) {
+                               text += find_player(player_id)['name'].substr(0, 3);
+                       }
+               } else if (filter.type === 'formation_offense' || filter.type === 'formation_defense') {
+                       let sorted_formation_id = Array.from(filter.elements).sort((a, b) => a - b);
+                       for (const formation_id of sorted_formation_id) {
+                               text += find_formation(formation_id)['name'].substr(0, 3);
+                       }
+               } else if (filter.type === 'starting_on') {
+                       if (filter.elements.has(false) && filter.elements.has(true)) {
+                               // Nothing.
+                       } else if (filter.elements.has(false)) {
+                               text += 'O';
+                       } else {
+                               text += 'D';
+                       }
+               } else if (filter.type === 'gender_ratio') {
+                       let first = true;
+                       for (const name of Array.from(filter.elements).sort()) {
+                               if (!first) {
+                                       text += '; ';
+                               }
+                               text += name.replaceAll(' ', '').substr(0, 2);  // 4 F, 3M -> 4 F.
+                               first = false;
+                       }
+               }
+       }
+       return text;
+}
+
 function find_common_prefix(a, b) {
        let ret = '';
        for (let i = 0; i < Math.min(a.length, b.length); ++i) {
@@ -1578,7 +1886,8 @@ function keep_match(match_id, filters) {
        return true;
 }
 
-function find_gender_ratio_code(players) {
+// Returns a map of e.g. F => 4, M => 3.
+function find_gender_ratio(players) {
        let map = {};
        for (const [q,p] of Object.entries(players)) {
                if (p.on_field_since === null) {
@@ -1594,6 +1903,11 @@ q                } else {
                        ++map[gender];
                }
        }
+       return map;
+}
+
+function find_gender_ratio_code(players) {
+       let map = find_gender_ratio(players);
        let all_genders = Array.from(Object.keys(map)).sort(
                (a,b) => {
                        if (map[a] !== map[b]) {
@@ -1618,6 +1932,31 @@ q                } else {
        return code;
 }
 
+// null if none (e.g., if playing 3–3).
+function find_predominant_gender(players) {
+       let max = 0;
+       let predominant_gender = null;
+       for (const [gender, num] of Object.entries(find_gender_ratio(players))) {
+               if (num > max) {
+                       max = num;
+                       predominant_gender = gender;
+               } else if (num == max) {
+                       predominant_gender = null;  // At least two have the same.
+               }
+       }
+       return predominant_gender;
+}
+
+function find_num_players_on_field(players) {
+       let num = 0;
+       for (const [q,p] of Object.entries(players)) {
+               if (p.on_field_since !== null) {
+                       ++num;
+               }
+       }
+       return num;
+}
+
 function filter_passes(players, formations_used_this_point, last_pull_was_ours, filter) {
        if (filter.type === 'player_any') {
                for (const p of Array.from(filter.elements)) {
@@ -1682,7 +2021,7 @@ function should_reuse_last_formation(events, t) {
 }
 
 function possibly_close_menu(e) {
-       if (e.target.closest('#filter-click-to-add') === null &&
+       if (e.target.closest('.filter-click-to-add') === null &&
            e.target.closest('#filter-add-menu') === null &&
            e.target.closest('#filter-submenu') === null &&
            e.target.closest('.filter-pill') === null) {
@@ -1690,6 +2029,7 @@ function possibly_close_menu(e) {
                let add_submenu = document.getElementById('filter-submenu');
                add_menu.style.display = 'none';
                add_submenu.style.display = 'none';
+               try_gc_filter_menus(false);
        }
 }