# 機能設計書 37-レポートスナップショット

## 概要

本ドキュメントは、特定時点のレポートをスナップショットとして保存する機能について記述する。

### 本機能の処理概要

**業務上の目的・背景**：レポート画面での操作ボタン（グラフ切替、期間選択等）をユーザーフレンドリーに提供するためのUIコンポーネントである。SnapshotButtonはツールチップ付きのボタンを提供し、レポート画面での各種操作を直感的に行えるようにする。これにより、レポートの表示設定を素早く変更し、必要な分析を効率的に行うことができる。

**機能の利用シーン**：
- レポート画面でのグラフ種別切替
- 表示オプションのトグル
- レポートアクションの実行
- 各種フィルタ・設定の適用

**主要な処理内容**：
1. ツールチップ付きボタンの表示
2. 選択状態の視覚的フィードバック（背景色変更）
3. クリック時のコールバック呼び出し
4. アクセシビリティ対応（aria-label）

**関連システム・外部連携**：なし（純粋なUIコンポーネント）

**権限による制御**：なし

## 関連画面

| 画面No | 画面名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 34 | カスタムレポート画面 | 補助機能 | レポートのスナップショット保存 |

## 機能種別

UI部品 / インタラクション

## 入力仕様

### 入力パラメータ

| パラメータ名 | 型 | 必須 | 説明 | バリデーション |
|-------------|-----|-----|------|---------------|
| selected | boolean | No | 選択状態 | - |
| children | ReactNode | Yes | ボタン内コンテンツ | - |
| style | CSSProperties | No | 追加スタイル | - |
| onSelect | function | No | クリック時コールバック | - |
| title | string | No | ツールチップテキスト | - |

### 入力データソース

親コンポーネントからのプロパティ

## 出力仕様

### 出力データ

| 項目名 | 型 | 説明 |
|--------|-----|------|
| JSX.Element | ReactNode | ツールチップ付きボタンのレンダリング結果 |

### 出力先

DOMへのレンダリング

## 処理フロー

### 処理シーケンス

```
1. プロパティ受け取り
   └─ selected, children, style, onSelect, title
2. スタイル計算
   └─ selected状態に応じて背景色を設定
3. Tooltip付きButtonのレンダリング
   └─ aria-label設定、onPress設定
```

### フローチャート

```mermaid
flowchart TD
    A[開始] --> B[プロパティ受け取り]
    B --> C{selected?}
    C -->|Yes| D[背景色設定]
    C -->|No| E[通常スタイル]
    D --> F[Tooltipラップ]
    E --> F
    F --> G[Buttonレンダリング]
    G --> H[終了]
```

## ビジネスルール

### 業務ルール

| ルールNo | ルール名 | 内容 | 適用条件 |
|---------|---------|------|---------|
| BR-01 | 選択状態表示 | selected=trueの場合は背景色をbuttonBareBackgroundHoverに | 常時 |
| BR-02 | ツールチップ配置 | ツールチップは"bottom start"に配置 | 常時 |

### 計算ロジック

特になし。

## データベース操作仕様

データベース操作なし。

## エラー処理

### エラーケース一覧

エラーケースなし。

### リトライ仕様

なし。

## トランザクション仕様

なし。

## パフォーマンス要件

軽量なUIコンポーネントとして高速にレンダリングされること。

## セキュリティ考慮事項

特になし。

## 備考

- SnapshotButtonはGraphButtonと類似の機能を持つ
- レポート画面の各種操作ボタンで共通利用される

---

## コードリーディングガイド

本機能を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: UIコンポーネントを理解する

SnapshotButtonコンポーネントの実装を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | SnapshotButton.tsx | `packages/desktop-client/src/components/reports/SnapshotButton.tsx` | ボタンコンポーネントの実装 |

**主要処理フロー**:
- **9-15行目**: `SnapshotButtonProps` - プロパティ型定義
- **17-23行目**: コンポーネント関数の定義とデストラクチャリング
- **25-29行目**: Tooltipコンポーネントでラップ
- **30-39行目**: Buttonコンポーネント
  - **31-36行目**: スタイル設定（selected状態に応じた背景色）
  - **38行目**: onPressハンドラー設定
  - **39行目**: aria-label設定

**読解のコツ**:
- `variant="bare"`は最小限のスタイルを持つボタンバリアント
- `theme.buttonBareBackgroundHover`はテーマから取得する背景色
- `styles.tooltip`は共通のツールチップスタイル

#### Step 2: 関連コンポーネントを理解する

類似の機能を持つGraphButtonを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | GraphButton.tsx | `packages/desktop-client/src/components/reports/GraphButton.tsx` | 類似コンポーネントとの比較 |

### プログラム呼び出し階層図

```
親コンポーネント（CustomReport等）
    │
    └─ SnapshotButton (SnapshotButton.tsx:17)
           │
           ├─ Tooltip (UIライブラリ)
           │      └─ content: Text (title)
           │
           └─ Button (UIライブラリ)
                  ├─ variant="bare"
                  ├─ style: selected ? 背景色 : 通常
                  ├─ onPress: onSelect
                  └─ aria-label: title
```

### データフロー図

```
[入力]                    [処理]                         [出力]

selected ─────────┐
                  │
children ─────────┼──▶ SnapshotButton ──▶ スタイル計算
                  │          │                   │
style ────────────┤          │                   │
                  │          ▼                   ▼
onSelect ─────────┤    Tooltipラップ      Button
                  │          │             レンダリング
title ────────────┘          │                   │
                             ▼                   ▼
                        DOMへ出力 ←────────────────┘
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| SnapshotButton.tsx | `packages/desktop-client/src/components/reports/SnapshotButton.tsx` | ソース | スナップショットボタンコンポーネント |
| GraphButton.tsx | `packages/desktop-client/src/components/reports/GraphButton.tsx` | ソース | 類似の操作ボタンコンポーネント |
| Button.tsx | `packages/component-library/src/Button.tsx` | ソース | 基底ボタンコンポーネント |
| Tooltip.tsx | `packages/component-library/src/Tooltip.tsx` | ソース | ツールチップコンポーネント |
| theme.ts | `packages/component-library/src/theme.ts` | ソース | テーマ定義 |
| styles.ts | `packages/component-library/src/styles.ts` | ソース | 共通スタイル定義 |
