Skip to content

Fix text visibility in Group By step explanations#314

Merged
myoshi2891 merged 12 commits into
mainfrom
dev-from-macmini
Feb 28, 2026
Merged

Fix text visibility in Group By step explanations#314
myoshi2891 merged 12 commits into
mainfrom
dev-from-macmini

Conversation

@myoshi2891

@myoshi2891 myoshi2891 commented Feb 28, 2026

Copy link
Copy Markdown
Owner

LeetCode 2631 Group By のインタラクティブ解説ページを作成しました。

主な実装内容

① ステップバイステップ解説(React)

  • 6ステップをクリック or 自動再生で確認可能
  • 各ステップに対応したビジュアル(コード比較・データフロー図)を表示
  • Play / Prev / Next / Reset コントロール付き

② 最適化 Before / After 比較(React)

  • ボタン切り替えでコードを動的に表示
  • Memory Beats 40% → 70%+ の伸びをプログレスバーで可視化
  • 最適化ポイント5項目の差分テーブル

③ SVG フローチャート

  • 全ノード x=60, width=440、テキスト x=280 text-anchor="middle" で統一
  • ループバックを紫矢印で表現
  • ケバブケース属性(stroke-width, text-anchor など)に準拠

④ コードセクション

  • Prism.js によるシンタックスハイライト(TypeScript)
  • コピーボタン付き

現在のSVGを完全に設計し直します。全ノードの座標を紙上で計算してから実装します。ゼロ長矢印と分岐ルートに問題があります。完全に書き直します。次に、No-bypass のラベルがダイヤモンド内に重なっている問題と polyline を個別 line に修正します。最後に、フロー説明テキストの座標参照(旧280→新300)を更新します。polyline 要素は残存ゼロ(コメント内の参照のみ)、矢印も正しいです。今回の完全再設計で修正した内容をまとめます。


修正内容サマリー

① レイアウト設計の全面見直し

項目 旧版 新版
viewBox 560×970 600×900
ノード幅 440px (x=60〜500) 480px (x=60〜540)
各ノード間隔 25〜30px (詰まりすぎ) 30〜50px に統一
結果返却ノード y 800 710 (i++から50px下)
終了楕円 cy 890 820 (バランス改善)

② 交差ゼロの配線ルール (x座標で証明)

x=22   ← 紫ループバック (i++左辺→③左点)
x=70   ← 赤No分岐 (⑤左点→⑥新規配列上面)
x=145  ← ⑤菱形左点
x=455  ← ⑤菱形右点
x=530  ← 緑Yes分岐 (⑤右点→⑦push上面)
x=560  ← 赤No-bypass (③右点→⑨右辺, 最右パス)

各パスが異なる x を通るため、いかなる y-range でも交差しない

③ 矢印の到着点を正確に計算

  • refX=5, strokeWidth=2, markerUnits=strokeWidth → 先端はライン終端から 8px 先
  • ライン終端 = ノード境界 − 8 → 先端がちょうど境界に到達
  • 分岐ボックスへの入り口は必ず最後のセグメントを垂直下向きにして矢印方向を明確化

④ その他

  • polyline を全廃し個別 line 要素に統一
  • No-bypass ラベルを菱形の**外側(y=236)**に移動(ノード内テキスト重複解消)
  • テキストサイズを 11.5px に調整して初期化ノード内文字のはみ出しを解消

ステップ解説の各要素(特に 3, 5, 6 等)に使われていた bg-slate-900(黒背景)のテキストが、Tailwind のデフォルトテキスト色(黒系統)を継承してしまっており、文字が見えなくなっていたことを確認しました。

対象となるすべてのコードブロック解説用の div に対して、明示的に text-slate-200(薄いグレー/白)を指定して視認性を改善し、生成・コミット処理(python generate_index.py 含む)まで完了しました。

@netlify

netlify Bot commented Feb 28, 2026

Copy link
Copy Markdown

Deploy Preview for algorithm-datastructures-math-studies ready!

Name Link
🔨 Latest commit afc27ef
🔍 Latest deploy log https://app.netlify.com/projects/algorithm-datastructures-math-studies/deploys/69a28a6b8141e40008696f3a
😎 Deploy Preview https://deploy-preview-314--algorithm-datastructures-math-studies.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@coderabbitai

coderabbitai Bot commented Feb 28, 2026

Copy link
Copy Markdown
Contributor
📝 Walkthrough

Summary by CodeRabbit

リリースノート

  • 新機能

    • 新しいインタラクティブレッスン「Group By」を追加しました。O(n) アルゴリズムの実装方法をステップバイステップで学習できます。
    • 詳細な説明、ビジュアル図解、最適化比較機能を備えた対話的なチュートリアルを含みます。
  • その他

    • サイトのレッスン総数を156から157に更新しました。

ウォークスルー

Array.prototype に型付きの groupBy を追加する TypeScript 実装ノートと、それを解説する Markdown および対話型 React HTML ドキュメントを追加。実装は Object.create(null) を用いた単一走査のグループ化(reduce と最適化された for ループの両実装)を示し、サイト一覧に新エントリ追加で件数を 156→157 に更新。

変更内容

コホート / ファイル(s) サマリー
TypeScript 実装ノートブック
JavaScript/2631. Group By/Claude Code Sonnet 4.6 extended/Group_By_TS.ipynb
Array<T>groupBy(fn: (item: T) => string): Record<string, T[]> を宣言し、Array.prototype.groupBy をジェネリックで実装。reduce ベースの案と、長さキャッシュ・in チェックを用いた最適化済み for ループ版を掲載。Object.create(null) によるプロトタイプ安全性や型付け・初期化パターンを解説。
ドキュメント(Markdown & 単体 HTML)
JavaScript/2631. Group By/Claude Code Sonnet 4.6 extended/README.md, JavaScript/2631. Group By/Claude Code Sonnet 4.6 extended/README_react.html
LeetCode 2631 の問題解説、TL;DR、正当性スケッチ、計算量、TypeScript 宣言マージ例、実装の before/after 比較、V8/Node 最適化注記、エッジケースや FAQ を含む包括的ドキュメントを追加。
公開向け React README
public/JavaScript/2631. Group By/Claude Code Sonnet 4.6 extended/README_react.html
単一ファイルの対話型ページ(Tailwind/React/Babel/Prism 含む)を追加。ステップ可視化、最適化比較、SVG フローチャート、コード差分表示、メトリクス表示などの UI とクライアント側ロジックを含む。
サイト一覧更新
public/index.html
サイトのインタラクティブレッスン数を 156→157 に更新し、JavaScript カテゴリへ `LeetCode 2631 – Group By
ポリシー/ガイド追記
CLAUDE.md, Gemini.md
ブラウザテスト/SVG フローチャートのガイドに「絶対的な性能比較を避ける」旨の定性的な評価ガイドを追記。
ユーティリティ小修正
generate_index.py
生成タイムスタンプのフォーマットを日付(%Y-%m-%d)へ変更(出力形式の簡素化)。

推定コード審査工数

🎯 3 (中程度) | ⏱️ ~25 分

🐰 ぽんぽん跳ねて groupBy 描いた、

鍵で分けて箱に詰めた、
プロトタイプは影に寄せて、
一巡で集めて渡すよ、
157 の庭に花が咲いた 🌸

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed Pull request title focuses on fixing text visibility in Group By step explanations, which directly addresses one of the main changes documented in the PR description about improving text visibility in code blocks with dark backgrounds.
Description check ✅ Passed Pull request description provides detailed information about the Group By interactive explanation page implementation, including step-by-step explanations, optimization comparisons, SVG flowchart redesign, code sections, and text visibility fixes that align with the changeset.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@JavaScript/2631`. Group By/Claude Code Sonnet 4.6 extended/Group_By_TS.ipynb:
- Around line 139-143: コメントブロックで表示している実行結果のうち "// Runtime 101 ms" と "// Memory
74.68 MB" の箇所と、後続の "After(予測)"
表示が混在して比較基準を曖昧にしているので、表示を一貫化してください。具体的には、出ている数値が実測値なら該当コメントを「実測: Runtime 101 ms
/ Memory 74.68 MB」に明記し(参照: "// Runtime 101 ms", "// Memory 74.68 MB", "//
Analyze Complexity")、逆に該当が予測値であればそのブロック全体に「予測」ラベルを付けて統一(参照: "After(予測)"
表示)し、比較表や説明文も同様に実測ベースか予測ベースかに合わせて修正してください。

ℹ️ Review info

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between aea22db and 2645f69.

📒 Files selected for processing (5)
  • JavaScript/2631. Group By/Claude Code Sonnet 4.6 extended/Group_By_TS.ipynb
  • JavaScript/2631. Group By/Claude Code Sonnet 4.6 extended/README.md
  • JavaScript/2631. Group By/Claude Code Sonnet 4.6 extended/README_react.html
  • public/JavaScript/2631. Group By/Claude Code Sonnet 4.6 extended/README_react.html
  • public/index.html

Comment thread JavaScript/2631. Group By/Claude Code Sonnet 4.6 extended/Group_By_TS.ipynb Outdated
@myoshi2891 myoshi2891 changed the title Dev from macmini Fix text visibility in Group By step explanations Feb 28, 2026

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@JavaScript/2631`. Group By/Claude Code Sonnet 4.6 extended/README_react.html:
- Around line 1141-1145: Update the explanatory text around the grouping snippet
that currently asserts absolute performance differences between the in operator
and the ??= operator (the desc/highlight entries referencing "in 演算子は ??= より軽量"
and "やや重い"), and replace those unconditional performance claims with either (a)
purely semantic guidance that explains they perform different checks (existence
vs nullish coalescing/assignment) and should be chosen by intent, or (b) a
caveat that any performance differences are environment- and
optimization-dependent (mentioning factors like runtime/prototype chain/V8
optimizations) so the wording no longer makes absolute claims; adjust both the
desc and highlight fields near the grouping code example and any other
occurrences flagged (the entries containing the if (key in result) { ... }
example).

In `@JavaScript/2631`. Group By/Claude Code Sonnet 4.6 extended/README.md:
- Around line 44-45: Remove the definitive performance claim comparing the `in`
operator and the `??=` operator in the README and replace it with a neutral,
accurate statement: delete the sentence asserting "`in` is lighter than `??=`"
and instead note that while `in` is used here for semantic reasons (keys on
objects created via Object.create(null)), V8 microbenchmarks often show `??=`
can be faster due to inlining/ICs and `in` may incur prototype/Proxy checks;
keep the implementation choosing `in` for semantics but remove the blanket
performance assertion and avoid "no type conversion cost" phrasing.

ℹ️ Review info

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2645f69 and aff4a16.

📒 Files selected for processing (5)
  • JavaScript/2631. Group By/Claude Code Sonnet 4.6 extended/Group_By_TS.ipynb
  • JavaScript/2631. Group By/Claude Code Sonnet 4.6 extended/README.md
  • JavaScript/2631. Group By/Claude Code Sonnet 4.6 extended/README_react.html
  • public/JavaScript/2631. Group By/Claude Code Sonnet 4.6 extended/README_react.html
  • public/index.html

Comment thread JavaScript/2631. Group By/Claude Code Sonnet 4.6 extended/README.md Outdated

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

♻️ Duplicate comments (2)
JavaScript/2631. Group By/Claude Code Sonnet 4.6 extended/README.md (1)

160-160: 🧹 Nitpick | 🔵 Trivial

コードコメントのパフォーマンス主張を再確認してください。

Line 160 のコメント「in演算子はhasOwnPropertyより軽量(型変換コストなし)」は、絶対的なパフォーマンス断言に該当する可能性があります。Lines 218-219 で中立的な説明が追加されていますが、コード内コメントにも同様の注意が必要です。

CLAUDE.md/Gemini.md の新ガイドラインに従い、以下のような修正を検討してください:

♻️ 提案する修正
-        // in演算子はhasOwnPropertyより軽量(型変換コストなし)
+        // Object.create(null) で作成したオブジェクトに対するキー存在確認
         if (key in result) {
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@JavaScript/2631`. Group By/Claude Code Sonnet 4.6 extended/README.md at line
160, The comment "in演算子はhasOwnPropertyより軽量(型変換コストなし)" makes an absolute
performance claim; update that comment to a neutral, accurate phrasing — for
example, state that "in 演算子はプロトタイプチェーンも検査する点で hasOwnProperty
とは挙動が異なり、エンジン依存でケースによっては高速なことがあるが、性能は実装により異なる" — so replace the exact comment
text with a neutral note that explains behavioral differences and that
performance varies by engine, and suggest choosing based on semantics (use
hasOwnProperty for own-property checks) rather than asserting a blanket
performance advantage.
JavaScript/2631. Group By/Claude Code Sonnet 4.6 extended/README_react.html (1)

1141-1145: ⚠️ Potential issue | 🟡 Minor

in??= の性能を断定する説明は修正してください(前回指摘の未解消)。

Line [1141], Line [1144], Line [1368], Line [1562] の文言は、セマンティクスが異なる演算子同士を速度で断定比較しており不正確です。用途(存在確認か nullish 代入か)中心の説明に寄せるか、「実行環境依存」を明記してください。

差分案
- desc: 'key in result でキーの存在を確認する。in 演算子は ??= と比べて型変換コストがなく軽量。存在すれば push、なければ [item] で初期化する。この分岐がグルーピングの核心ロジック。',
+ desc: 'key in result でキーの存在を確認する。in は「存在確認」、??= は「null/undefined のときの代入」で目的が異なる。存在すれば push、なければ [item] で初期化する。この分岐がグルーピングの核心ロジック。',

- highlight: 'in 演算子は ??= より軽量な存在確認',
+ highlight: 'in は存在確認、??= は nullish 時の代入(用途で使い分け)',

- '(acc[key] ??= []).push(item); // V8のIC最適化が効きやすいケースもある'
+ '(acc[key] ??= []).push(item); // nullish 時のみ代入(存在確認とは目的が異なる)'

- // ✅ in演算子: 型変換コストなし
+ // ✅ in演算子: キー存在確認(Object.create(null) と併用)
MDN など一次情報で、JavaScript の `in` 演算子と `??=` 演算子の仕様差(存在確認 vs nullish 代入)を確認し、この説明文が仕様準拠か検証してください。

Also applies to: 1363-1369, 1562-1563

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@JavaScript/2631`. Group By/Claude Code Sonnet 4.6 extended/README_react.html
around lines 1141 - 1145, Update the descriptive text that currently asserts a
performance advantage of the in operator over ??= — revise the object entries
where desc and highlight mention "in 演算子は ??= より軽量な存在確認" (the entries containing
the code snippet 'if (key in result) { result[key].push(item); } else {
result[key] = [item]; }') to instead explain the semantic difference (in checks
property existence vs ??= performs nullish-assignment) and note that any
performance differences are environment-dependent and should be verified against
authoritative sources (e.g. MDN) before claiming speed; replace definitive
performance phrasing with usage guidance or an explicit
"implementation-dependent" caveat.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Duplicate comments:
In `@JavaScript/2631`. Group By/Claude Code Sonnet 4.6 extended/README_react.html:
- Around line 1141-1145: Update the descriptive text that currently asserts a
performance advantage of the in operator over ??= — revise the object entries
where desc and highlight mention "in 演算子は ??= より軽量な存在確認" (the entries containing
the code snippet 'if (key in result) { result[key].push(item); } else {
result[key] = [item]; }') to instead explain the semantic difference (in checks
property existence vs ??= performs nullish-assignment) and note that any
performance differences are environment-dependent and should be verified against
authoritative sources (e.g. MDN) before claiming speed; replace definitive
performance phrasing with usage guidance or an explicit
"implementation-dependent" caveat.

In `@JavaScript/2631`. Group By/Claude Code Sonnet 4.6 extended/README.md:
- Line 160: The comment "in演算子はhasOwnPropertyより軽量(型変換コストなし)" makes an absolute
performance claim; update that comment to a neutral, accurate phrasing — for
example, state that "in 演算子はプロトタイプチェーンも検査する点で hasOwnProperty
とは挙動が異なり、エンジン依存でケースによっては高速なことがあるが、性能は実装により異なる" — so replace the exact comment
text with a neutral note that explains behavioral differences and that
performance varies by engine, and suggest choosing based on semantics (use
hasOwnProperty for own-property checks) rather than asserting a blanket
performance advantage.

ℹ️ Review info

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between aff4a16 and afc27ef.

📒 Files selected for processing (8)
  • CLAUDE.md
  • Gemini.md
  • JavaScript/2631. Group By/Claude Code Sonnet 4.6 extended/Group_By_TS.ipynb
  • JavaScript/2631. Group By/Claude Code Sonnet 4.6 extended/README.md
  • JavaScript/2631. Group By/Claude Code Sonnet 4.6 extended/README_react.html
  • generate_index.py
  • public/JavaScript/2631. Group By/Claude Code Sonnet 4.6 extended/README_react.html
  • public/index.html

@myoshi2891 myoshi2891 merged commit a354e0f into main Feb 28, 2026
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant