Migrate Rankings Table to React

app/controllers/results_controller.rb

@@ -156,7 +156,27 @@ def rankings
 
     else
       flash[:danger] = t(".unknown_show")
-      redirect_to rankings_path
+      return redirect_to rankings_path
+    end
+
+    @ranking_timestamp = ComputeAuxiliaryData.successful_start_date || Date.current
+
+    respond_to do |format|
+      format.html {}
+      format.json do
+        cached_data = Rails.cache.fetch ["results-page-api", *@cache_params, @ranking_timestamp] do
+          rows = DbHelper.execute_cached_query(@cache_params, @ranking_timestamp, @query)
+          comp_ids = rows.map { |r| r["competitionId"] }.uniq
+          if @is_by_region
+            rows = compute_rankings_by_region(rows, @continent, @country)
+          end
+          competitions_by_id = Competition.where(id: comp_ids).index_by(&:id).transform_values { |comp| comp.as_json(methods: %w[], include: [], only: %w[cellName id countryId]) }
+          {
+            rows: rows.as_json, competitionsById: competitions_by_id
+          }
+        end
+        render json: cached_data
+      end
     end
   end
 
@@ -356,4 +376,43 @@ def records
       params[:show] = nil
     end
   end
+
+  private def compute_rankings_by_region(rows, continent, country)
+    if rows.empty?
+      return [[], 0, 0]
+    end
+    best_value_of_world = rows.first["value"]
+    best_values_of_continents = {}
+    best_values_of_countries = {}
+    world_rows = []
+    continents_rows = []
+    countries_rows = []
+    rows.each do |row|
+      result = LightResult.new(row)
+      value = row["value"]
+
+      world_rows << row if value == best_value_of_world
+
+      if best_values_of_continents[result.country.continent.id].nil? || value == best_values_of_continents[result.country.continent.id]
+        best_values_of_continents[result.country.continent.id] = value
+
+        if (country.present? && country.continent.id == result.country.continent.id) || (continent.present? && continent.id == result.country.continent.id) || params[:region] == "world"
+          continents_rows << row
+        end
+      end
+
+      if best_values_of_countries[result.country.id].nil? || value == best_values_of_countries[result.country.id]
+        best_values_of_countries[result.country.id] = value
+
+        if (country.present? && country.id == result.country.id) || params[:region] == "world"
+          countries_rows << row
+        end
+      end
+    end
+
+    first_continent_index = world_rows.length
+    first_country_index = first_continent_index + continents_rows.length
+    rows_to_display = world_rows + continents_rows + countries_rows
+    [rows_to_display, first_continent_index, first_country_index]
+  end
 end

app/helpers/results_helper.rb

@@ -29,45 +29,6 @@ def historical_pb_markers(results)
     end
   end
 
-  def compute_rankings_by_region(rows, continent, country)
-    if rows.empty?
-      return [[], 0, 0]
-    end
-    best_value_of_world = rows.first["value"]
-    best_values_of_continents = {}
-    best_values_of_countries = {}
-    world_rows = []
-    continents_rows = []
-    countries_rows = []
-    rows.each do |row|
-      result = LightResult.new(row)
-      value = row["value"]
-
-      world_rows << row if value == best_value_of_world
-
-      if best_values_of_continents[result.country.continent.id].nil? || value == best_values_of_continents[result.country.continent.id]
-        best_values_of_continents[result.country.continent.id] = value
-
-        if (country.present? && country.continent.id == result.country.continent.id) || (continent.present? && continent.id == result.country.continent.id) || params[:region] == "world"
-          continents_rows << row
-        end
-      end
-
-      if best_values_of_countries[result.country.id].nil? || value == best_values_of_countries[result.country.id]
-        best_values_of_countries[result.country.id] = value
-
-        if (country.present? && country.id == result.country.id) || params[:region] == "world"
-          countries_rows << row
-        end
-      end
-    end
-
-    first_continent_index = world_rows.length
-    first_country_index = first_continent_index + continents_rows.length
-    rows_to_display = world_rows + continents_rows + countries_rows
-    [rows_to_display, first_continent_index, first_country_index]
-  end
-
   def compute_slim_or_separate_records(rows)
     single_rows = []
     average_rows = []

app/views/results/rankings.html.erb

@@ -1,29 +1,9 @@
 <% provide(:title, t(".title")) %>
 
-<% ranking_timestamp = ComputeAuxiliaryData.successful_start_date || Date.current %>
-<% @rows = DbHelper.execute_cached_query(@cache_params, ranking_timestamp, @query) %>
-
 <div class="container">
   <h1><%= yield(:title) %></h1>
-  <p><%= t("results.last_updated_html", timestamp: wca_local_time(ranking_timestamp)) %></p>
+  <p><%= t("results.last_updated_html", timestamp: wca_local_time(@ranking_timestamp)) %></p>
   <p><i><%= t('results.filters_fixes_underway') %></i></p>
 
-  <div id="results-selector" class="results-select form-inline">
-    <%= render 'results_selector', show_rankings_options: true %>
-  </div>
-  <% cache [*@cache_params, ranking_timestamp, I18n.locale] do %>
-    <%
-      comp_ids = @rows.map { |r| r["competitionId"] }.uniq
-      @competitions_by_id = Hash[Competition.where(id: comp_ids).map { |c| [c.id, c] }]
-    %>
-    <div id="search-results" class="results">
-      <div id="results-list">
-        <% if @is_by_region %>
-          <%= render 'rankings_by_region_table' %>
-        <% else %>
-          <%= render 'rankings_table' %>
-        <% end %>
-      </div>
-    </div>
-  <% end %>
+  <%= react_component("Results/Rankings") %>
 </div>

app/webpacker/components/CompetitionsOverview/filterUtils.js

@@ -1,10 +1,8 @@
 import { DateTime } from 'luxon';
 import {
-  continents, countries, events, nonFutureCompetitionYears,
+  continents, countries, nonFutureCompetitionYears, WCA_EVENT_IDS,
 } from '../../lib/wca-data.js.erb';
 
-const WCA_EVENT_IDS = Object.values(events.official).map((e) => e.id);
-
 // note: inconsistencies with previous search params
 // - year value was 'all+years', is now 'all_years'
 // --> handled by the fact that every non-number is interpreted as "default value" all_years

app/webpacker/components/Results/Rankings/RankingsTable.jsx

@@ -0,0 +1,191 @@
+import React, { useMemo } from 'react';
+import { Table } from 'semantic-ui-react';
+import _ from 'lodash';
+import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import I18n from '../../../lib/i18n';
+import { formatAttemptResult } from '../../../lib/wca-live/attempts';
+import CountryFlag from '../../wca/CountryFlag';
+import { continents, countries } from '../../../lib/wca-data.js.erb';
+import { personUrl } from '../../../lib/requests/routes.js.erb';
+
+function getCountryOrContinent(result, firstContinentIndex, firstCountryIndex, index) {
+  if (index < firstContinentIndex) {
+    return { name: I18n.t('results.table_elements.world') };
+  }
+  if (index >= firstContinentIndex && index < firstCountryIndex) {
+    return continents.real.find((c) => c.id === countries.byId[result.countryId].continentId);
+  }
+  return countries.byId[result.countryId];
+}
+
+function CountryCell({ country }) {
+  return (
+    <Table.Cell textAlign="left">
+      {country.iso2 && <CountryFlag iso2={country.iso2} />}
+      {' '}
+      {country.name}
+    </Table.Cell>
+  );
+}
+
+function ResultRow({
+  result, competition, rank, isAverage, show, country,
+}) {
+  const attempts = [result.value1, result.value2, result.value3, result.value4, result.value5]
+    .filter(Boolean);
+
+  const bestResult = _.max(attempts);
+  const worstResult = _.min(attempts);
+  const bestResultIndex = attempts.indexOf(bestResult);
+  const worstResultIndex = attempts.indexOf(worstResult);
+
+  return (
+    <Table.Row>
+      {show === 'by region' ? <CountryCell country={country} />
+        : <Table.Cell textAlign="center">{rank}</Table.Cell> }
+      <Table.Cell>
+        <a href={personUrl(result.personId)}>{result.personName}</a>
+      </Table.Cell>
+      <Table.Cell>
+        {formatAttemptResult(result.value, result.eventId)}
+      </Table.Cell>
+      {show !== 'by region' && <CountryCell country={country} />}
+      <Table.Cell>
+        <CountryFlag iso2={countries.byId[competition.countryId].iso2} />
+        {' '}
+        <a href={`/competition/${competition.id}`}>{competition.cellName}</a>
+      </Table.Cell>
+      {isAverage && (attempts.map((a, i) => (
+        <Table.Cell>
+          { attempts.length === 5
+              && (i === bestResultIndex || i === worstResultIndex)
+            ? `(${formatAttemptResult(a, result.eventId)})` : formatAttemptResult(a, result.eventId)}
+        </Table.Cell>
+      ))
+      )}
+    </Table.Row>
+  );
+}
+
+export default function RankingsTable({
+  rows, competitionsById, isAverage, show,
+}) {
+  const results = useMemo(() => {
+    const isByRegion = show === 'by region';
+    const [rowsToMap, firstContinentIndex, firstCountryIndex] = isByRegion ? rows : [rows, 0, 0];
+
+    return rowsToMap.reduce((acc, result, index) => {
+      const competition = competitionsById[result.competitionId];
+      const { value } = result;
+
+      const lastItem = acc[acc.length - 1];
+      const previousValue = lastItem?.result.value || 0;
+      const previousRank = lastItem?.rank || 0;
+
+      const rank = value === previousValue ? previousRank : index + 1;
+      const tiedPrevious = rank === previousRank;
+
+      const country = getCountryOrContinent(result, firstContinentIndex, firstCountryIndex, index);
+
+      return [...acc, {
+        result,
+        competition,
+        country,
+        rank,
+        tiedPrevious,
+        key: `${result.id}-${show}-${country.name}`,
+      }];
+    }, []);
+  }, [competitionsById, rows, show]);
+
+  const columns = useMemo(() => {
+    const commonColumns = [
+      {
+        accessorKey: 'rank',
+        header: show !== 'by region' ? '#' : I18n.t('results.table_elements.region'),
+      },
+      {
+        accessorKey: 'result.name',
+        header: I18n.t('results.table_elements.name'),
+      },
+      {
+        accessorKey: 'result.value',
+        header: I18n.t('results.table_elements.result'),
+      },
+    ];
+
+    if (show !== 'by region') {
+      commonColumns.push({
+        accessorKey: 'country.name',
+        header: I18n.t('results.table_elements.representing'),
+      });
+    }
+
+    commonColumns.push({
+      accessorKey: 'competition.name',
+      header: I18n.t('results.table_elements.competition'),
+    });
+
+    if (isAverage) {
+      // One Cell per Solve of an Average
+      commonColumns.push({
+        accessorKey: 'solves',
+        header: I18n.t('results.table_elements.solves'),
+      });
+      commonColumns.push(
+        ...Array(4).fill({
+          accessorKey: '',
+          header: ' ',
+        }),
+      );
+    }
+
+    return commonColumns;
+  }, [show, isAverage]);
+
+  const table = useReactTable({
+    data: results,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <div style={{ overflowX: 'scroll' }}>
+      <Table basic="very" compact="very" singleLine striped unstackable>
+        <Table.Header>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <Table.Row key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <Table.HeaderCell key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(header.column.columnDef.header, header.getContext())}
+                </Table.HeaderCell>
+              ))}
+            </Table.Row>
+          ))}
+        </Table.Header>
+        <Table.Body>
+          {table.getRowModel().rows.map((row) => {
+            const {
+              country, result, competition, rank, tiedPrevious,
+            } = row.original;
+
+            return (
+              <ResultRow
+                country={country}
+                key={row.key}
+                result={result}
+                competition={competition}
+                rank={rank}
+                tiedPrevious={tiedPrevious}
+                isAverage={isAverage}
+                show={show}
+              />
+            );
+          })}
+        </Table.Body>
+      </Table>
+    </div>
+  );
+}