Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

feat: 接続数フィルター（minConnectionCount）スライダーUIの追加

Open
#36 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
68/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Quiet
Tech stack
typescript
Domain
frontend

Research direction

Start with src/shared/types.ts to confirm the existing NodeFilter field, then locate the toolbar filter area and the baseNodes filtering logic. Add the 0–10 slider and connect changes to updateFilter({ minConnectionCount: value }); verify that zero restores all nodes, other modes remain compatible, and npm run check passes.

Written by the indexing model from the issue text.

Description

enhancement ui

概要

NodeFilter.minConnectionCount は型定義・ストアに実装済みだが、操作するUIが存在しない。スライダーを追加し、接続数が閾値未満のノードをフィルタリングできるようにする。大規模 Org では孤立クラスや疎結合クラスが多く、このフィルターによってグラフのノイズを大幅に削減できる。

現状

// src/shared/types.ts（実装済み）
export interface NodeFilter {
  hideTestClasses: boolean;
  hideManagedPackages: boolean;
  sobjectTypes: 'all' | 'custom-only' | 'referenced-only';
  minConnectionCount: number; // ← UI なし
}

updateFilter アクションも実装済み。ストア側の変更は不要。

タスク

  • ツールバーにスライダーコンポーネントを追加（右上フィルターエリア）
    • 範囲: 0〜10（ステップ 1）
    • デフォルト: 0（全表示）
    • ラベル例: 接続 ≥ 2
  • baseNodes のフィルタリングロジックに minConnectionCount を反映
    • 対象ノード（apex-class, apex-interface, sobject など）の接続エッジ数を集計
    • inDegree + outDegree < minConnectionCount のノードを除外
  • スライダー値 0 のときはフィルター無効（全ノード表示）
  • スライダー変更時に updateFilter({ minConnectionCount: value }) を呼ぶ

UI イメージ

[ テスト非表示 ] [ MPkg非表示 ] [ 接続 ≥ [■──] 2 ]

完了条件

  • スライダーを動かすと接続数が少ないノードが即座に非表示になる
  • 0 にすると全ノードが再表示される
  • フォーカスモード・検索モードと干渉しない
  • npm run check が全てグリーン

依存

なし（型・ストアは実装済み）

Dominant language
TypeScript
Stars
0
Forks
0
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from qnaiv/codegraph

All issues in qnaiv/codegraph

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.