feat(visualizer): Add VisualizableImage component. Closes #3023

[srijan2607]

This pull request adds support for visualizing images in the application, both on the backend and frontend. It introduces a new VisualizableImage component that can display images from a URL or base64 data, with options for titles, descriptions, sizing, and expand-to-modal functionality. The change is thoroughly integrated into the backend Python classes, frontend React components, validation logic, and includes comprehensive tests for both backend and frontend implementations.

Image Visualization Feature

• Added a new VisualizableImage class to api_app/visualizers_manager/classes.py for representing images with support for URL or base64 sources, titles, descriptions, sizing, alignment, and expand/collapse behavior. Raises a ValueError if neither source is provided.
• Integrated the new image type into the frontend: added IMAGE to VisualizerComponentType, implemented the ImageVisualizer React component with modal expand, loading, error, and disabled states, and updated the main visualizer to render images. [1] [2] [3] [4]
• Updated frontend validation logic in validators.js to parse and validate image-specific fields (URL, base64, title, description, sizing, expand option).

Testing

• Added backend unit tests for VisualizableImage covering serialization, required fields, default values, and disabled state. [1] [2]
• Added frontend tests for ImageVisualizer covering rendering from URL and base64, error and loading states, modal expand functionality, and disabled state.

These changes ensure that images can now be reliably displayed and interacted with in the visualizer, with robust validation and test coverage.

Description

This PR implements a new VisualizableImage component that allows embedding screenshots or other images in the IntelOwl Visualizer results pages. Closes #3023

Changes

Backend (api_app/visualizers_manager/classes.py):

• Added VisualizableImage class extending VisualizableObject
• Supports two image sources: url (external URL) and base64 (encoded data)
• Configurable properties: title, description, max_width, max_height, allow_expand
• Validation to ensure at least one image source is provided

Frontend (frontend/src/components/common/visualizer/elements/image.jsx):

• New ImageVisualizer React component
• Click-to-zoom modal for expanded view
• Loading spinner while image loads
• Error handling with broken image icon
• Accessibility-compliant button wrapper for clickable images

Integration:

• Added IMAGE type to VisualizerComponentType enum
• Validator support for parsing image elements
• Case handler in visualizer.jsx for rendering

Tests:

• 5 backend unit tests in tests/api_app/visualizers_manager/test_classes.py
• 9 frontend unit tests in frontend/tests/components/common/visualizer/elements/image.test.jsx

Example Usage (Python Visualizer)

from api_app.visualizers_manager.classes import VisualizableImage

# From URL (e.g., URLscan screenshot)
image = VisualizableImage(
    url="https://example.com/screenshot.png",
    title="Website Screenshot",
    description="Captured by URLscan",
    max_width=500,
    max_height=400,
    allow_expand=True,
)

# From base64 encoded data
image = VisualizableImage(
    base64="iVBORw0KGgoAAAANSUhEUgAAAAE...",
    title="Encoded Image",
)

Raw JSON Output

{
  "type": "image",
  "url": "https://example.com/screenshot.png",
  "base64": "",
  "title": "Website Screenshot",
  "description": "Captured by URLscan",
  "max_width": 500,
  "max_height": 400,
  "allow_expand": true,
  "size": "auto",
  "alignment": "center",
  "disable": false
}

Type of change

• New feature (non-breaking change which adds functionality).

Checklist

• I have read and understood the rules about how to Contribute to this project
• The pull request is for the branch develop
• A new plugin (analyzer, connector, visualizer, playbook, pivot or ingestor) was added or changed, in which case:
  • I strictly followed the documentation "How to create a Plugin"
  • [N/A] Usage file was updated. (This is a visualizer building block, not a standalone plugin)
  • [N/A] Advanced-Usage was updated. (No additional configuration required)
  • [N/A] I have dumped the configuration from Django Admin. (No new plugin configuration, just a new component type)
  • [N/A] File analyzer mimetype. (Not applicable)
  • [N/A] FREE_TO_USE_ANALYZERS playbook. (Not an analyzer)
  • [N/A] Other playbooks. (Not an analyzer/connector)
  • I have provided the resulting raw JSON of a finished analysis and a screenshot of the results.
  • [N/A] External service url attribute. (Component does not interact with external services directly)
  • [N/A] Mocked testing with _monkeypatch(). (No external API calls)
  • [N/A] MockUpResponse sample. (No external API calls)
  • [N/A] DataModel creation. (Not an analyzer)
• I have inserted the copyright banner at the start of all new files
• No new libraries added - uses existing React and reactstrap dependencies
• [N/A] External libraries with restrictive licenses. (No new libraries)
• Linters (Black, Flake, Isort) gave 0 errors
• I have added tests for the feature (5 backend + 9 frontend tests). All tests pass.
• GUI has been modified:
  • Screenshot of the result provided below
  • Frontend tests created for the new component

Screenshots

[srijan2607]

@fgibertoni can you take a look

[srijan2607]

Just fix the front-end a bit more. Now you can see the full image that's it

[fgibertoni]

@drosetti @carellamartina what do you think about this?