add json support for instruments and only persist user-defined instruments in playground

[joshunrau]

Summary by CodeRabbit

Release Notes

• New Features

  • Added support for JSON file handling across the application
  • Introduced JSON file icon in file explorer
  • Enhanced editor to recognize and support JSON files

• Improvements

  • Updated file upload and file type detection mechanisms
  • Expanded language support in Monaco editor
  • Improved configurability for interactive components

• Configuration

  • Added new configuration file for interactive features
  • Updated module declarations to support JSON imports

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

This pull request introduces comprehensive support for JSON files across multiple components and utilities in the application. The changes span from file upload dialogs and editor configurations to type definitions and module declarations. The modifications enable JSON file handling in various parts of the system, including file type inference, editor language support, and bundler input file extensions. A new configuration file and an update to an interactive instrument's time limit configuration are also part of these changes.

Changes

File	Change Summary
apps/playground/src/components/Editor/Editor.tsx	Added JSON MIME type to FileUploadDialog
apps/playground/src/components/Editor/EditorFileIcon.tsx	Added SVG icon rendering for .json files
apps/playground/src/components/Editor/EditorPane.tsx	Expanded defaultLanguage to include 'json'
apps/playground/src/instruments/examples/.../config.json	New configuration file with timeLimit
apps/playground/src/instruments/examples/.../index.tsx	Updated time limit initialization from config
apps/playground/src/instruments/index.ts	Added json to text files import glob
apps/playground/src/utils/file.ts	Added 'json' to FileType and inferFileType
packages/instrument-bundler/src/types.ts	Added .json to BundlerInputFileExtension
packages/instrument-bundler/src/utils.ts	Updated file extension extraction and loader inference
runtime/v1/env.d.ts	Added module declaration for JSON files

Sequence Diagram

sequenceDiagram
    participant User
    participant FileUpload as File Upload Dialog
    participant Editor as Monaco Editor
    participant Bundler as Instrument Bundler
    participant Runtime as TypeScript Runtime

    User->>FileUpload: Upload JSON file
    FileUpload->>Editor: Open JSON file
    Editor->>Bundler: Process JSON file
    Bundler->>Runtime: Type check JSON import
    Runtime-->>Bundler: Validate JSON module
    Bundler-->>Editor: Render JSON content
    Editor-->>User: Display JSON file

Loading

Poem

🐰 A Rabbit's Ode to JSON's Delight

In bytes and braces, a new file takes flight,
JSON dances with code, oh so bright!
From upload to editor, it now has a home,
A data companion that loves to roam 🌈
Code rabbits rejoice, our world just got tight! 🚀

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1113178 and 1cd38e2.

⛔ Files ignored due to path filters (1)

• apps/playground/src/instruments/examples/interactive/Interactive-With-Embedded-Video/cat-video.mp4 is excluded by !**/*.mp4

📒 Files selected for processing (11)

• apps/playground/src/components/Editor/Editor.tsx (1 hunks)
• apps/playground/src/components/Editor/EditorFileIcon.tsx (1 hunks)
• apps/playground/src/components/Editor/EditorPane.tsx (1 hunks)
• apps/playground/src/instruments/examples/interactive/Interactive-With-Embedded-Video/config.json (1 hunks)
• apps/playground/src/instruments/examples/interactive/Interactive-With-Embedded-Video/index.tsx (2 hunks)
• apps/playground/src/instruments/index.ts (1 hunks)
• apps/playground/src/store/index.ts (1 hunks)
• apps/playground/src/utils/file.ts (2 hunks)
• packages/instrument-bundler/src/types.ts (1 hunks)
• packages/instrument-bundler/src/utils.ts (2 hunks)
• runtime/v1/env.d.ts (1 hunks)

Finishing Touches

• 📝 Generate Docstrings (Beta)

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.