> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wandb.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# パネル

> Workspace パネルを使用およびカスタマイズして、ログしたデータを可視化します

export const AriaChatBubbles = ({prompt, response}) => {
  const [isDark, setIsDark] = useState(false);
  const [promptCopied, setPromptCopied] = useState(false);
  useEffect(() => {
    const root = document.documentElement;
    const sync = () => setIsDark(root.classList.contains('dark'));
    sync();
    const obs = new MutationObserver(sync);
    obs.observe(root, {
      attributes: true,
      attributeFilter: ['class']
    });
    return () => obs.disconnect();
  }, []);
  useEffect(() => {
    if (!promptCopied) {
      return undefined;
    }
    const timeout = setTimeout(() => setPromptCopied(false), 2000);
    return () => clearTimeout(timeout);
  }, [promptCopied]);
  const copyText = text => {
    navigator.clipboard.writeText(text).then(() => setPromptCopied(true)).catch(console.error);
  };
  const userBg = isDark ? '#363C44' : '#F8F8F8';
  const userBorder = isDark ? '#4B535C' : '#DFE0E2';
  const textColor = isDark ? '#E8E8E9' : '#2B3038';
  const iconColor = isDark ? '#8F949E' : '#79808A';
  const iconHoverBg = isDark ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.05)';
  const bubbleText = {
    fontSize: '15px',
    color: textColor,
    overflowWrap: 'anywhere'
  };
  const bubbleBase = {
    maxWidth: '85%'
  };
  const copyIcon = promptCopied ? <svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{
    color: '#FCBC32'
  }}>
      <path d="M20 6 9 17l-5-5" />
    </svg> : <svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
    </svg>;
  return <div aria-label="ARIA chat example" className="not-prose flex flex-col gap-3" role="group">
      {}
      <div className="flex w-full justify-end">
        <div className="flex w-fit items-start gap-1 rounded-2xl py-2 pl-3 pr-1.5" style={{
    ...bubbleBase,
    backgroundColor: userBg,
    border: `1px solid ${userBorder}`
  }}>
          <div className="min-w-0 flex-1 hyphens-auto whitespace-pre-wrap" style={bubbleText}>
            {prompt}
          </div>
          <button type="button" className="mt-0.5 shrink-0 rounded-lg p-1.5 cursor-pointer" style={{
    color: iconColor,
    background: 'transparent'
  }} onMouseEnter={e => {
    e.currentTarget.style.backgroundColor = iconHoverBg;
  }} onMouseLeave={e => {
    e.currentTarget.style.backgroundColor = 'transparent';
  }} onClick={() => copyText(prompt)} aria-label="Copy user prompt">
            {copyIcon}
          </button>
        </div>
      </div>
      {}
      <div className="flex w-full justify-start">
        <div className="w-fit rounded-2xl py-2 px-3" style={{
    ...bubbleBase,
    border: '1px solid #CDF4F7'
  }}>
          <div className="hyphens-auto whitespace-pre-wrap" style={bubbleText}>
            {response}
          </div>
        </div>
      </div>
    </div>;
};

Workspace パネルの可視化を使用すると、キーごとに[ログしたデータ](/ja/models/ref/python/experiments/run.md/#method-runlog)を確認したり、ハイパーパラメーターと出力メトリクスの関係を可視化したりできます。 このページでは、Workspace モードの選択方法、パネルの追加と設定、セクションへの整理、コラボレーターとの共有について説明します。

<div id="workspace-modes">
  ## Workspace モード
</div>

W\&B Projects では、2 つの異なる Workspace モードをサポートしています。Workspace 名の横にあるアイコンで、そのモードを確認できます。

| Icon                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Workspace mode                                                                                                                                                                                                                                                                                        |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <img src="https://mintcdn.com/wb-21fd5541/qLByB7As1oRGQV3e/images/app_ui/automated_workspace.svg?fit=max&auto=format&n=qLByB7As1oRGQV3e&q=85&s=26e3b48cd9a1925c55ab3a28a38835da" alt="自動 Workspace アイコン" width="32px" data-path="images/app_ui/automated_workspace.svg" /> | **自動 Workspace** では、プロジェクトでログされたすべてのキーに対してパネルが自動生成されます。次の場合は自動 Workspace を選択してください。<ul><li>プロジェクトで利用可能なすべてのデータを可視化して、すばやく作業を始めたい場合。</li><li>ログするキー数が少ない小規模な Projects の場合。</li><li>より幅広い分析を行いたい場合。</li></ul>自動 Workspace でパネルを削除した場合は、[Quick add](#quick-add) を使用して再作成できます。                            |
| <img src="https://mintcdn.com/wb-21fd5541/1haGbTiv4BKOT8E_/images/app_ui/manual_workspace.svg?fit=max&auto=format&n=1haGbTiv4BKOT8E_&q=85&s=04a2b6401c1203025a0c26215d2d936b" alt="手動 Workspace アイコン" width="32px" data-path="images/app_ui/manual_workspace.svg" />                         | **手動 Workspace** は空の状態から始まり、自分で意図的に追加したパネルのみを表示します。次の場合は手動 Workspace を選択してください。<ul><li>プロジェクトでログされたキーのうち、一部だけを主に確認したい場合。</li><li>より focused な分析を行いたい場合。</li><li>Workspace のパフォーマンスを向上させ、自分にとって重要度の低いパネルの読み込みを避けたい場合。</li></ul>[Quick add](#quick-add) を使用すると、手動 Workspace やそのセクションに役立つ可視化をすばやく追加できます。 |

Workspace でのパネル生成方法を変更するには、[Workspace をリセット](#reset-a-workspace)してください。

<Note>
  **Workspace への変更を元に戻す**

  Workspace への変更を元に戻すには、Undo ボタン (左向きの矢印) をクリックするか、**Cmd+Z** (macOS) または **Ctrl+Z** (Windows または Linux) を押します。
</Note>

<div id="reset-a-workspace">
  ## Workspaceをリセットする
</div>

Workspace をリセットすると、モードを変更したり、パネルをクリアして新しく開始したりできます。

Workspace をリセットするには、次の手順に従います。

1. Workspace 上部の **アクション (<Icon icon="ellipsis" iconType="solid" />) ** メニューをクリックします。
2. **Reset workspace** をクリックします。

<div id="configure-the-workspace-layout">
  ## Workspace の Layout を設定する
</div>

Workspace layout の設定では、Workspace 全体でパネルとセクションをどのように整理して表示するかを制御します。

Workspace の Layout を設定するには、Workspace 上部付近にある **Settings** をクリックし、次に **Workspace layout** をクリックします。使用可能な設定は次のとおりです。

* **検索時に空のセクションを非表示にする** (デフォルトでオン)
* **パネルをアルファベット順に並べ替える** (デフォルトでオフ)
* **セクションの構成** (デフォルトでは最初のプレフィックスごとにグループ化) 。この設定を変更するには:
  1. 鍵アイコンをクリックします。
  2. セクション内のパネルのグループ化方法を選択します。

Workspace の折れ線グラフのデフォルトを設定するには、[折れ線グラフ](/ja/models/app/features/panels/line-plot/)を参照してください。

<div id="configure-a-sections-layout">
  ### セクションのLayoutを設定する
</div>

セクションのLayoutを設定するには、歯車アイコンをクリックし、次に **Display preferences** をクリックします。次の設定を利用できます。

* **ツールチップで色付きのrun 名の表示をオンまたはオフにする** (既定ではオン)
* **コンパニオンチャートのツールチップでは、ハイライトされたrunのみを表示する** (既定ではオフ)
* **ツールチップに表示するRunsの数** (single run、すべてのRuns、または **Default**)
* **プライマリチャートのツールチップにrun 名をフル表示する** (既定ではオフ)

<div id="view-a-panel-in-full-screen-mode">
  ## パネルを全画面モードで表示する
</div>

全画面モードではパネルにより多くのスペースが割り当てられるため、データをより詳しく確認するのに便利です。全画面モードでは run selector が表示されます。

パネルを全画面モードで表示するには、次の手順に従います。

1. パネルにカーソルを合わせます。
2. パネルの **アクション (<Icon icon="ellipsis" iconType="solid" />)** メニューをクリックし、次に全画面ボタンをクリックします。このボタンは、ファインダー、または正方形の四隅を示す枠線のようなアイコンです。
   <Frame>
     <img src="https://mintcdn.com/wb-21fd5541/UhAQoGpm-LvpH3-8/images/app_ui/panel_fullscreen.png?fit=max&auto=format&n=UhAQoGpm-LvpH3-8&q=85&s=3c4df45b1298d9af368b8275626a0d1c" alt="全画面パネル" width="352" height="79" data-path="images/app_ui/panel_fullscreen.png" />
   </Frame>

全画面モードで表示中に[パネルを共有](#share-a-panel)すると、生成された link は自動的に全画面モードで開きます。

全画面モードで作業する際は、次のヒントを参考にしてください。

* 全画面モードからパネルの Workspace に戻るには、ページ上部の左向き矢印をクリックします。
* 全画面モードを終了せずにセクション内のパネルを切り替えるには、パネルの下にある **Previous** ボタンと **Next** ボタン、または左右の矢印キーを使用します。
* パネル用のスペースをさらに確保するには、**Cmd+.** (macOS) または **Ctrl+.** (Windows または Linux) で run selector を最小化します。
* [メディアパネル](/ja/models/app/features/panels/media)の画像を全画面モードで表示している場合は、キーボードショートカットでズームイン、ズームアウト、ズームのリセット、または画面に合わせたズームができます。詳しくは、[キーボードショートカット](/ja/models/app/keyboard-shortcuts#media-panels)を参照してください。

その他の全画面表示やパネルのショートカットについては、[キーボードショートカット](/ja/models/app/keyboard-shortcuts)を参照してください。

<div id="add-panels">
  ## Add panels
</div>

以下のセクションでは、Workspace にパネルを追加する方法を説明します。

<div id="add-a-panel-manually">
  ### パネルを手動で追加する
</div>

Workspace にパネルを 1 つずつ、Workspace 全体またはセクション単位で追加します。

1. パネルを Workspace 全体に追加するには、パネル検索フィールドの近くにあるコントロールバーで **Add panels** をクリックします。
2. パネルを特定のセクションに直接追加するには、セクションの **アクション (<Icon icon="ellipsis" iconType="solid" />)** メニューをクリックし、**+ Add panels** をクリックします。
3. 追加するパネルのタイプを選択します (グラフなど)。パネルの設定詳細が表示され、デフォルト値が選択されています。
4. 任意: パネルとその表示設定をカスタマイズします。使用できる設定オプションは、選択したパネルのタイプによって異なります。各パネルタイプのオプションの詳細については、[折れ線グラフ](/ja/models/app/features/panels/line-plot/) や [棒グラフ](/ja/models/app/features/panels/bar-plot/) などの該当するセクションを参照してください。
5. **Apply** をクリックします。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541/4kbs1cW6PdjDOqU3/images/app_ui/add_single_panel.gif?s=5aa84cadb20827b9035ad4da982bda82" alt="パネル追加のデモ" width="3822" height="2842" data-path="images/app_ui/add_single_panel.gif" />
</Frame>

<div id="quick-add-panels">
  ### Quick add パネル
</div>

**Quick add** を使用すると、選択した各キーに対応するパネルを、グローバルまたはセクションレベルで自動的に追加できます。

ARIA にパネルの追加を依頼することもできます。

<AriaChatBubbles prompt="train/ 接頭辞配下のすべてのメトリクスに対して、ラインプロットパネルを追加してください。" response="表示中の Runs にログされている各 train/ メトリクスに対してラインプロットパネルを追加し、Workspace 内で整理します。" />

<Note>
  自動 Workspace で削除されたパネルがない場合、ログされたすべてのキーのパネルがすでに Workspace に含まれているため、**Quick add** オプションは表示されません。削除したパネルを再度追加するには、**Quick add** を使用できます。
</Note>

**Quick add** を開くには、次のいずれかを行います。

* **Quick add** を使用してパネルをグローバルに追加するには、パネル検索フィールドの近くにあるコントロールバーで **Add panels** をクリックし、次に **Quick add** をクリックします。
* **Quick add** を使用してパネルをセクションに直接追加するには、セクションの **アクション (<Icon icon="ellipsis" iconType="solid" />)** メニューをクリックし、**Add panels** をクリックしてから **Quick add** をクリックします。

パネルの一覧が表示されます。チェックマークが付いたパネルは、すでに Workspace に含まれています。一覧からパネルを追加するには、次を行います。

* 利用可能なすべてのパネルを追加するには、一覧の上部にある **Add `[N]` panels** ボタンをクリックします。**Quick Add** の一覧が閉じ、新しいパネルが Workspace に表示されます。
* 一覧から個別のパネルを追加するには、パネルの行にカーソルを合わせて **Add** をクリックします。追加したい各パネルについてこの step を繰り返し、その後右上の **X** をクリックして **Quick Add** の一覧を閉じます。新しいパネルが Workspace に表示されます。

任意: パネルの Settings をカスタマイズします。

<div id="share-a-panel">
  ## パネルを共有する
</div>

パネルを共有すると、共同作業者は Workspace 全体に移動しなくても、特定の可視化に絞った表示を直接開けます。リンクを使ってパネルを共有するには、次のいずれかを行います。

* パネルを全画面モードで表示した状態で、ブラウザーの URL をコピーします。
* **アクション (<Icon icon="ellipsis" iconType="solid" />)** メニューをクリックし、**Copy panel URL** をクリックします。

リンクをユーザーまたはチームに共有します。リンクにアクセスすると、パネルは[全画面モード](#view-a-panel-in-full-screen-mode)で開きます。

全画面モードからパネルの Workspace に戻るには、ページ上部の左向き矢印をクリックします。

<div id="compose-a-panels-full-screen-link-programmatically">
  ### パネルの全画面リンクをプログラムで生成する
</div>

[オートメーションを作成する](/ja/models/automations/)ときや同様のワークフローでは、パネルの全画面URLを含めると便利です。次の形式は、パネルの全画面URLを示しています。次の例では、角括弧内の entity、プロジェクト、パネル、およびセクション名を置き換えてください。

```text theme={null}
https://wandb.ai/[ENTITY_NAME]/[PROJECT_NAME]?panelDisplayName=[PANEL_NAME]&panelSectionName=[SECTION_NAME]
```

同じセクション内に同じ名前のパネルが複数ある場合、このURLを開くと、その名前の最初のパネルが表示されます。

<div id="embed-or-share-a-panel-on-social-media">
  ### パネルを埋め込む、またはソーシャルメディアで共有する
</div>

Web サイトにパネルを埁め込んだり、ソーシャルメディアで共有したりするには、そのパネルがリンクを知っているすべてのユーザーに表示可能である必要があります。project が非公開の場合、パネルを表示できるのは project のメンバーのみです。project が公開の場合は、リンクを知っているすべてのユーザーがパネルを表示できます。

パネルを埋め込んだり、ソーシャルメディアで共有したりするためのコードを取得するには、次の手順に従います。

1. Workspace でパネルにカーソルを合わせ、**アクション (<Icon icon="ellipsis" iconType="solid" />)** メニューをクリックします。
2. **Share** タブをクリックします。
3. **Only those who are invited have access** を **Anyone with the link can view** に変更します。変更しないと、次の step の選択肢は使用できません。
4. **Share on Twitter**、**Share on Reddit**、**Share on LinkedIn**、または **Copy embed link** を選択します。

<div id="email-a-panel-report">
  ### パネルレポートをメールで送信する
</div>

単一のパネルを独立したレポートとしてメールで送信するには、次の手順に従います。

1. パネルにカーソルを合わせ、パネルの\*\*アクション (<Icon icon="ellipsis" iconType="solid" />) \*\*メニューをクリックします。
2. **Share panel in report** をクリックします。
3. **Invite** タブを選択します。
4. メールアドレスまたはユーザー名を入力します。
5. 任意: **can view** を **can edit** に変更します。
6. **Invite** をクリックします。W\&B は、共有しているパネルだけを含むレポートへのリンクを記載したメールをユーザーに送信します。

[パネルを共有する](#share-a-panel)場合とは異なり、受信者はこのレポートからWorkspaceに移動できません。

<div id="manage-panels">
  ## パネルを管理する
</div>

Workspace にパネルを追加したら、編集、移動、複製、削除を行って、可視化を整理し、常に最新の状態に保てます。

<div id="edit-a-panel">
  ### パネルを編集する
</div>

パネルを編集するには、次の手順を実行します。

1. パネルの鉛筆アイコンをクリックします。
2. パネルの設定を編集します。
3. 任意: パネルを別のタイプに変更するには、タイプを選択し、設定を行います。
4. **Apply** をクリックします。

<div id="move-a-panel">
  ### パネルを移動する
</div>

パネルを別のセクションに移動するには、パネルのドラッグハンドルを使用できます。代わりにリストから移動先のセクションを選択する場合は、次の手順に従います。

1. 任意: 最後のセクションの後にある **Add section** をクリックして、新しいセクションを作成します。
2. パネルの\*\*アクション (<Icon icon="ellipsis" iconType="solid" />)\*\*メニューをクリックします。
3. **移動** をクリックし、移動先のセクションを選択します。

ドラッグハンドルを使って、セクション内でパネルの順序を並べ替えることもできます。

<div id="duplicate-a-panel">
  ### パネルを複製する
</div>

パネルを複製するには、次の手順に従います。

1. パネル上部のアクション (<Icon icon="ellipsis" iconType="solid" />) メニューをクリックします。
2. **Duplicate** をクリックします。

必要に応じて、複製したパネルを[カスタマイズ](#edit-a-panel)したり、[移動](#move-a-panel)したりできます。

<div id="remove-panels">
  ### パネルを削除する
</div>

パネルを削除するには、次の手順に従います。

1. パネルにカーソルを合わせます。
2. **アクション (<Icon icon="ellipsis" iconType="solid" />)** メニューをクリックします。
3. **Delete** をクリックします。

手動 Workspace からすべてのパネルを削除するには、その **アクション (<Icon icon="ellipsis" iconType="solid" />)** メニューをクリックしてから、**Clear all panels** をクリックします。

自動または手動 Workspace からすべてのパネルを削除するには、[Workspace をリセット](#reset-a-workspace)できます。デフォルトのパネルセットで開始するには **Automatic** を選択し、パネルのない空の Workspace で開始するには **Manual** を選択します。

<div id="manage-sections">
  ## セクションを管理する
</div>

セクションは関連するパネルをまとめて表示するため、大規模な Workspace でも確認しやすくなります。デフォルトでは、Workspace のセクションにはキーのログ階層が反映されます。ただし、手動の Workspace では、パネルを追加し始めるまでセクションは表示されません。

<div id="add-a-section">
  ### セクションを追加する
</div>

セクションを追加するには、最後のセクションの後にある **Add section** をクリックします。

既存のセクションの前後に新しいセクションを追加するには、そのセクションの **アクション (<Icon icon="ellipsis" iconType="solid" />)** メニューをクリックし、**New section below** または **New section above** をクリックします。

<Warning>
  セクション名に "Section" は使用しないでください。既知の制限事項により、このセクション内のパネルはセクション名を変更するまで表示されません。
</Warning>

<div id="manage-a-sections-panels">
  ### セクションのパネルを管理する
</div>

セクション内では、パネルのサイズ変更、ページ分割の制御、個々のパネルの削除を行えます。多数のパネルを含むセクションは、デフォルトでページ分割されます。1ページあたりのデフォルトのパネル数は、パネルの設定と、セクション内のパネルのサイズによって異なります。

パネルのサイズを変更するには、パネルにカーソルを合わせ、ドラッグハンドルをクリックしてドラッグし、サイズを調整します。1つのパネルのサイズを変更すると、そのセクション内のすべてのパネルのサイズも変更されます。

セクションがページ分割されている場合は、1ページに表示するパネル数をカスタマイズできます。

1. セクション上部の **1 to `[X]` of `[Y]`** をクリックします。ここで、`[X]` は表示中のパネル数、`[Y]` はパネルの総数です。
2. 1ページあたりに表示するパネル数を、最大100まで選択します。

セクションからパネルを削除するには:

1. パネルにカーソルを合わせてから、その **アクション (<Icon icon="ellipsis" iconType="solid" />)** メニューをクリックします。
2. **Delete** をクリックします。

Workspace を自動 Workspace にリセットすると、削除したすべてのパネルが再び表示されます。

<div id="rename-a-section">
  ### セクション名を変更する
</div>

セクション名を変更するには、その **アクション (<Icon icon="ellipsis" iconType="solid" />)** メニューをクリックし、**セクション名を変更** をクリックします。

<Warning>
  セクション名を "Section" にしないでください。既知の制限により、セクション名を変更するまで、このセクション内のパネルは表示されません。
</Warning>

<div id="delete-a-section">
  ### セクションを削除する
</div>

セクションを削除するには、**action (<Icon icon="ellipsis" iconType="solid" />)** メニューをクリックし、**セクションを削除** をクリックします。これにより、そのセクションと含まれるパネルが削除されます。