show difficulty subボタンの追加

atcoder-problems-frontend/src/components/ProblemLink.tsx

@@ -4,6 +4,7 @@ import * as Url from "../utils/Url";
 import { getRatingColorClass } from "../utils";
 import ProblemModel from "../interfaces/ProblemModel";
 import { RatingInfo } from "../utils/RatingInfo";
+import { ShowDifficultyMode } from "../utils/ShowDifficultyMode";
 import { DifficultyCircle } from "./DifficultyCircle";
 import { NewTabLink } from "./NewTabLink";
 
@@ -13,7 +14,7 @@ interface Props {
   contestId: string;
   problemIndex?: string;
   problemName: string;
-  showDifficulty?: boolean;
+  showDifficultyMode: ShowDifficultyMode;
   isExperimentalDifficulty?: boolean;
   showDifficultyUnavailable?: boolean;
   problemModel?: ProblemModel | null;
@@ -22,13 +23,16 @@ interface Props {
 
 export const ProblemLink: React.FC<Props> = (props) => {
   const [tooltipOpen, setTooltipOpen] = useState(false);
+  const [showDifficultySubClicked, setshowDifficultySubClicked] = useState(
+    false
+  );
 
   const {
     contestId,
     problemId,
     problemIndex,
     problemName,
-    showDifficulty,
+    showDifficultyMode,
     isExperimentalDifficulty,
     showDifficultyUnavailable,
     problemModel,
@@ -38,7 +42,7 @@ export const ProblemLink: React.FC<Props> = (props) => {
     ? `${problemIndex}. ${problemName}`
     : problemName;
 
-  const link = (
+  const simpleLink = (
     <NewTabLink
       href={Url.formatProblemUrl(problemId, contestId)}
       className={props.className}
@@ -49,56 +53,96 @@ export const ProblemLink: React.FC<Props> = (props) => {
 
   const difficulty = problemModel?.difficulty;
   if (
-    !showDifficulty ||
     problemModel === undefined ||
     (difficulty === undefined && !showDifficultyUnavailable)
   ) {
-    return link;
+    return simpleLink;
   }
 
   const uniqueId = problemId + "-" + contestId;
   const experimentalIconId = "experimental-" + uniqueId;
+  const showDifficultySubIconId = "show-difficulty-sub-" + uniqueId;
   const ratingColorClass =
     difficulty === undefined ? undefined : getRatingColorClass(difficulty);
 
-  return (
+  const experimentalDifficultySymbol = (
+    <>
+      <span id={experimentalIconId} role="img" aria-label="experimental">
+        🧪
+      </span>
+      <Tooltip
+        placement="top"
+        target={experimentalIconId}
+        isOpen={tooltipOpen}
+        toggle={(): void => setTooltipOpen(!tooltipOpen)}
+      >
+        This estimate is experimental.
+      </Tooltip>
+    </>
+  );
+  const showDifficultySubSymbol = (
+    <>
+      <button
+        id={showDifficultySubIconId}
+        role="img"
+        aria-label="show-difficulty-sub"
+        onClick={(): void =>
+          setshowDifficultySubClicked(!showDifficultySubClicked)
+        }
+        style={{
+          border: "none",
+          background: "transparent",
+        }}
+      >
+        {"👉 "}
+      </button>
+    </>
+  );
+
+  const difficultyColoredLink = (
+    // Don't add rel="noreferrer" to AtCoder links
+    // to allow AtCoder get the referral information.
+    // eslint-disable-next-line react/jsx-no-target-blank
+    <a
+      href={Url.formatProblemUrl(problemId, contestId)}
+      // Don't add rel="noreferrer" to AtCoder links
+      // to allow AtCoder get the referral information.
+      // eslint-disable-next-line react/jsx-no-target-blank
+      target="_blank"
+      rel="noopener"
+      className={ratingColorClass}
+    >
+      {problemTitle}
+    </a>
+  );
+  const difficultySymbol = (
     <>
       <DifficultyCircle
         id={uniqueId}
         problemModel={problemModel}
         userRatingInfo={userRatingInfo}
       />
-      {isExperimentalDifficulty ? (
-        <>
-          <span id={experimentalIconId} role="img" aria-label="experimental">
-            🧪
-          </span>
-          <Tooltip
-            placement="top"
-            target={experimentalIconId}
-            isOpen={tooltipOpen}
-            toggle={(): void => setTooltipOpen(!tooltipOpen)}
-          >
-            This estimate is experimental.
-          </Tooltip>
-        </>
-      ) : null}
-      {
-        // Don't add rel="noreferrer" to AtCoder links
-        // to allow AtCoder get the referral information.
-        // eslint-disable-next-line react/jsx-no-target-blank
-        <a
-          href={Url.formatProblemUrl(problemId, contestId)}
-          // Don't add rel="noreferrer" to AtCoder links
-          // to allow AtCoder get the referral information.
-          // eslint-disable-next-line react/jsx-no-target-blank
-          target="_blank"
-          rel="noopener"
-          className={ratingColorClass}
-        >
-          {problemTitle}
-        </a>
-      }
+      {isExperimentalDifficulty ? experimentalDifficultySymbol : null}
     </>
   );
+
+  switch (showDifficultyMode) {
+    case ShowDifficultyMode.None:
+      return <>{simpleLink}</>;
+    case ShowDifficultyMode.Full:
+      return (
+        <>
+          {difficultySymbol}
+          {difficultyColoredLink}
+        </>
+      );
+    case ShowDifficultyMode.Sub:
+      return (
+        <>
+          {showDifficultySubSymbol}
+          {showDifficultySubClicked ? difficultySymbol : null}
+          {showDifficultySubClicked ? difficultyColoredLink : simpleLink}
+        </>
+      );
+  }
 };

atcoder-problems-frontend/src/components/SubmissionListTable.tsx

@@ -7,6 +7,7 @@ import { formatMomentDateTime, parseSecond } from "../utils/DateUtil";
 import { isAccepted } from "../utils";
 import * as Url from "../utils/Url";
 import { RatingInfo } from "../utils/RatingInfo";
+import { ShowDifficultyMode } from "../utils/ShowDifficultyMode";
 import { ProblemLink } from "./ProblemLink";
 import {
   ListPaginationPanel,
@@ -130,7 +131,7 @@ export const SubmissionListTable: React.FC<Props> = (props) => {
             isExperimentalDifficulty={
               problemModels?.get(problem_id)?.is_experimental
             }
-            showDifficulty={true}
+            showDifficultyMode={ShowDifficultyMode.Full}
             problemId={problem_id}
             problemIndex={problemIndexMap.get(problem_id) || ""}
             problemName={name || ""}

atcoder-problems-frontend/src/pages/Internal/MyAccountPage/ResetProgress.tsx

@@ -6,6 +6,7 @@ import { ProblemSearchBox } from "../../../components/ProblemSearchBox";
 import { ProblemLink } from "../../../components/ProblemLink";
 import { formatMomentDateTime, parseSecond } from "../../../utils/DateUtil";
 import { useProgressResetList } from "../../../api/InternalAPIClient";
+import { ShowDifficultyMode } from "../../../utils/ShowDifficultyMode";
 import { addResetProgress, deleteResetProgress } from "./ApiClient";
 
 export const ResetProgress: React.FC = () => {
@@ -50,6 +51,7 @@ export const ResetProgress: React.FC = () => {
                     <td>
                       {problem ? (
                         <ProblemLink
+                          showDifficultyMode={ShowDifficultyMode.None}
                           problemId={problem.id}
                           contestId={problem.contest_id}
                           problemIndex={problem.problem_index}

atcoder-problems-frontend/src/pages/Internal/VirtualContest/DraggableContestConfigProblemTable/ProblemCell.tsx

@@ -3,6 +3,7 @@ import { ProblemLink } from "../../../../components/ProblemLink";
 import Problem from "../../../../interfaces/Problem";
 import ProblemModel from "../../../../interfaces/ProblemModel";
 import { ProblemId } from "../../../../interfaces/Status";
+import { ShowDifficultyMode } from "../../../../utils/ShowDifficultyMode";
 
 interface ProblemCellProps {
   problemId: ProblemId;
@@ -24,7 +25,7 @@ export const ProblemCell: React.FC<ProblemCellProps> = ({
           contestId={problem.contest_id}
           problemIndex={problem.problem_index}
           problemName={problem.name}
-          showDifficulty={true}
+          showDifficultyMode={ShowDifficultyMode.Full}
           problemModel={problemModel}
           isExperimentalDifficulty={problemModel?.is_experimental}
         />

atcoder-problems-frontend/src/pages/Internal/VirtualContest/ShowContest/ContestTable.tsx

@@ -23,6 +23,7 @@ import {
   makeBotRunners,
 } from "../../../../utils/RatingSystem";
 import { VirtualContestItem, VirtualContestProblem } from "../../types";
+import { ShowDifficultyMode } from "../../../../utils/ShowDifficultyMode";
 import { ContestTableRow } from "./ContestTableRow";
 import { FirstAcceptanceRow } from "./FirstAcceptanceRow";
 import {
@@ -260,6 +261,7 @@ export const ContestTable = (props: Props) => {
               <th key={i}>
                 {p.contestId && p.title ? (
                   <ProblemLink
+                    showDifficultyMode={ShowDifficultyMode.None}
                     problemId={p.id}
                     contestId={p.contestId}
                     problemName={`${i + 1}`}

atcoder-problems-frontend/src/pages/Internal/VirtualContest/ShowContest/LockoutContestTable/index.tsx

@@ -6,6 +6,7 @@ import { UserNameLabel } from "../../../../../components/UserNameLabel";
 import { ProblemId, UserId } from "../../../../../interfaces/Status";
 import { isAccepted } from "../../../../../utils";
 import { VirtualContestProblem } from "../../../types";
+import { ShowDifficultyMode } from "../../../../../utils/ShowDifficultyMode";
 
 const CARD_COLORS = ["success", "danger", "warning", "info", "primary"];
 
@@ -119,6 +120,7 @@ export const LockoutContestTable: React.FC<Props> = (props) => {
                     <CardHeader tag="h3">
                       {problem.title && problem.contestId ? (
                         <ProblemLink
+                          showDifficultyMode={ShowDifficultyMode.None}
                           problemId={problem.item.id}
                           contestId={problem.contestId}
                           problemName={problem.title}

atcoder-problems-frontend/src/pages/Internal/VirtualContest/ShowContest/TrainingContestTable/SmallScoreCell.tsx

@@ -5,6 +5,7 @@ import { ScoreCell } from "../ScoreCell";
 import { ProblemLink } from "../../../../../components/ProblemLink";
 import { formatProblemUrl } from "../../../../../utils/Url";
 import { NewTabLink } from "../../../../../components/NewTabLink";
+import { ShowDifficultyMode } from "../../../../../utils/ShowDifficultyMode";
 
 interface Props {
   problem: {
@@ -47,6 +48,7 @@ export const SmallScoreCell: React.FC<Props> = (props) => {
           <div className="small-score-cell-tooltip">
             {problem.contestId && problem.title ? (
               <ProblemLink
+                showDifficultyMode={ShowDifficultyMode.None}
                 problemId={problem.id}
                 contestId={problem.contestId}
                 problemName={problem.title}

atcoder-problems-frontend/src/pages/Internal/VirtualContest/ShowContest/index.tsx

@@ -50,6 +50,7 @@ import { ProblemLink } from "../../../../components/ProblemLink";
 import { joinContest, leaveContest } from "../ApiClient";
 import { GoogleCalendarButton } from "../../../../components/GoogleCalendarButton";
 import { ProblemId, UserId } from "../../../../interfaces/Status";
+import { ShowDifficultyMode } from "../../../../utils/ShowDifficultyMode";
 import { constructPointOverrideMap, ContestTable } from "./ContestTable";
 import { LockoutContestTable } from "./LockoutContestTable";
 import { TrainingContestTable } from "./TrainingContestTable";
@@ -131,6 +132,7 @@ const Problems = (props: {
                   <th className="text-center">
                     {p.contestId && p.title ? (
                       <ProblemLink
+                        showDifficultyMode={ShowDifficultyMode.None}
                         problemId={p.id}
                         contestId={p.contestId}
                         problemName={`${i + 1}`}
@@ -142,6 +144,7 @@ const Problems = (props: {
                   <td>
                     {p.contestId && p.title ? (
                       <ProblemLink
+                        showDifficultyMode={ShowDifficultyMode.None}
                         problemId={p.id}
                         contestId={p.contestId}
                         problemName={p.title}

atcoder-problems-frontend/src/pages/ListPage/ListTable.tsx

@@ -42,6 +42,7 @@ import {
   useProblemModelMap,
   useRatingInfo,
 } from "../../api/APIClient";
+import { ShowDifficultyMode } from "../../utils/ShowDifficultyMode";
 
 export const INF_POINT = 1e18;
 
@@ -255,7 +256,7 @@ export const ListTable: React.FC<Props> = (props) => {
       dataFormat: function DataFormat(_, row): React.ReactElement {
         return (
           <ProblemLink
-            showDifficulty={true}
+            showDifficultyMode={ShowDifficultyMode.Full}
             isExperimentalDifficulty={row.problemModel?.is_experimental}
             problemId={row.mergedProblem.id}
             problemName={row.title}

atcoder-problems-frontend/src/pages/TablePage/AtCoderRegularTable.tsx

@@ -23,12 +23,13 @@ import { SubmitTimespan } from "../../components/SubmitTimespan";
 import { RatingInfo } from "../../utils/RatingInfo";
 import { ProblemPoint } from "../../components/Problempoint";
 import { classifyContest } from "../../utils/ContestClassifier";
+import { ShowDifficultyMode } from "../../utils/ShowDifficultyMode";
 
 interface Props {
   contests: Contest[];
   contestToProblems: Map<string, MergedProblem[]>;
   hideCompletedContest: boolean;
-  showDifficulty: boolean;
+  showDifficultyMode: ShowDifficultyMode;
   colorMode: ColorMode;
   title: string;
   statusLabelMap: Map<ProblemId, ProblemStatus>;
@@ -181,7 +182,7 @@ const AtCoderRegularTableSFC: React.FC<Props> = (props) => {
                         !!model && model.is_experimental
                       }
                       showDifficultyUnavailable
-                      showDifficulty={props.showDifficulty}
+                      showDifficultyMode={props.showDifficultyMode}
                       contestId={contest.id}
                       problemId={problem.problem.id}
                       problemIndex={problem.problem.problem_index}

atcoder-problems-frontend/src/pages/TablePage/ContestTable.tsx

@@ -11,12 +11,13 @@ import { SubmitTimespan } from "../../components/SubmitTimespan";
 import { RatingInfo } from "../../utils/RatingInfo";
 import { isRatedContest } from "../../utils/ContestClassifier";
 import { ProblemPoint } from "../../components/Problempoint";
+import { ShowDifficultyMode } from "../../utils/ShowDifficultyMode";
 
 interface Props {
   contests: Contest[];
   contestToProblems: Map<string, MergedProblem[]>;
   hideCompletedContest: boolean;
-  showDifficulty: boolean;
+  showDifficultyMode: ShowDifficultyMode;
   colorMode: ColorMode;
   statusLabelMap: Map<ProblemId, ProblemStatus>;
   showPenalties: boolean;
@@ -118,7 +119,7 @@ export const ContestTable: React.FC<Props> = (props) => {
                               contest,
                               problemInfo.length
                             )}
-                            showDifficulty={props.showDifficulty}
+                            showDifficultyMode={props.showDifficultyMode}
                             problemId={problem.id}
                             contestId={contest.id}
                             problemIndex={problem.problem_index}