Member Junction
    Preparing search index...

    Class ImageArtifactViewerComponent

    Viewer plugin for raster image artifact versions (image/png, image/jpeg, image/webp, etc.). Vector SVG is handled by SvgArtifactViewerPlugin.

    Storage modes both supported (same contract as PdfArtifactViewerPlugin):

    • ContentMode === 'Text' — artifactVersion.Content is a data:image/<mime>;base64,… URI. We bind it directly to <img [src]>; the browser decodes inline.
    • ContentMode === 'File' — bytes live in MJStorage. We fetch a pre-authenticated URL via ArtifactFileService.getDownloadUrl() and bind that to <img [src]>.

    UX highlights:

    • Click the image to toggle fit (default — object-fit: contain inside the panel) ↔ actual size (1:1 pixels, scrolls within the panel body).
    • Toolbar provides Download (reuses base class triggerBrowserDownload) and Print (opens in a new tab so the browser's native print dialog handles it).
    • Loading and error states match the PDF plugin's vocabulary, so behavior across all file-style viewers is consistent.
    • Image dimensions are surfaced as a small chip once the browser has decoded the image (naturalWidth × naturalHeight).

    Design tokens are used for every color so the plugin adapts to light / dark themes — see root CLAUDE.md "Design Token System".

    • PdfArtifactViewerComponent — the dual-storage reference implementation.
    • plans/artifact-attachment-unification.md — the broader artifact-as-canonical-storage design.
    • docs/chat-ui-image-display-bugs.md — context for why this plugin exists (Bug B).

    Hierarchy (View Summary)

    Implements

    • OnInit
    • OnDestroy
    Index

    Constructors

    constructor

    Properties

    artifactVersion cssClass? displayMode errorMessage height? imageUrl isDownloading isLoading naturalHeight naturalWidth navigationRequest? Provider readonly tabsChanged? ɵdir ɵfac PreviewComponentType

    Accessors

    hasDisplayContent imageAltText isShowingElevatedDisplay parentShouldShowRawContent ProviderToUse RunQueryToUse RunReportToUse RunViewToUse SupportsFeedback toolbarFileName

    Methods

    AskUserForFeedback GetAdditionalTabs? getContent GetCurrentStateSnapshot getDescription getDisplayName getDisplayTitle getRawContent GetStandardTabRemovals? ngOnDestroy ngOnInit onDownload onImageError onImageLoad onPrint parseJsonContent toggleDisplayMode triggerBrowserDownload CanHandlePreview

    Constructors

    Properties

    artifactVersion: MJArtifactVersionEntity

    The artifact version to display

    cssClass?: string

    Optional: Additional CSS classes to apply

    displayMode: "fit" | "actual" = 'fit'

    Click-to-toggle display mode. 'fit' = contained in the panel, 'actual' = 1:1 with scroll.

    errorMessage: string = ''

    User-facing error message; non-empty hides the image and shows the error block.

    height?: string

    Optional: Custom height for the viewer (defaults to auto)

    imageUrl: string = ''

    Current resolved URL to bind to the <img src> — either a data URI (inline) or a pre-auth URL (file).

    isDownloading: boolean = false

    Set while the download is in flight, to drive the toolbar spinner.

    isLoading: boolean = true

    True from ngOnInit until the <img> (load) event fires (or an error happens).

    naturalHeight: number | null = null
    naturalWidth: number | null = null

    Native image dimensions, populated by the (load) event. Null until then.

    navigationRequest?: EventEmitter<NavigationRequest>

    Optional: Emitted when the plugin wants to navigate to a different app/nav item. Plugins that need app-level navigation (e.g., "Open Query" navigating to the Data Explorer's Queries nav item) should instantiate this emitter and emit a NavigationRequest. The event bubbles up through the artifact viewer chain to the host application where NavigationService handles the actual navigation.

    Provider: IMetadataProvider | null

    If specified, this provider will be used for communication and for all metadata purposes. By default, if not provided, the Metadata and RunView classes are used for this and the default GraphQLDataProvider is used which is connected to the same back-end MJAPI instance as the Metadata and RunView classes. If you want to have this component connect to a different MJAPI back-end, create an instance of a ProviderBase sub-class like GraphQLDataProvider/etc, and configure it as appropriate to connect to the MJAPI back-end you want to use, and then pass it in here.

    readonly: boolean = true

    Optional: Whether the viewer is in readonly mode

    tabsChanged?: EventEmitter<void>

    Optional: Emitted when the plugin's additional tabs change after async loading. Plugins that load data asynchronously (e.g., from a component registry) should emit this when loading completes and new tabs become available. The parent panel listens for this to re-run change detection and render the updated tab list.

    "ɵdir": unknown
    "ɵfac": unknown
    PreviewComponentType: Type<IArtifactPreviewComponent> = ImageArtifactPreviewComponent

    Inline-preview component for image artifacts (IArtifactViewerPluginPreviewStatics). STATIC so the resolver can read it off the registered constructor WITHOUT instantiating this Angular component. Surfaces a contained thumbnail inside conversation message cards; the full viewer (this class) remains the required componentType.

    Accessors

    • get isShowingElevatedDisplay(): boolean

      Whether this plugin is showing an "elevated" display (e.g., extracted markdown/HTML) vs raw content. When true and content type is JSON, the wrapper will show a JSON tab.

      Subclasses should override this getter to return the appropriate value based on their current display state. For example, JSON plugin returns true when showing displayMarkdown or displayHtml, false when showing raw JSON editor.

      Default: false (showing raw content)

      Returns boolean

    • get parentShouldShowRawContent(): boolean

      Whether the parent wrapper should show a raw content tab (e.g., JSON tab for JSON content). This gives plugins fine-grained control over the parent's tab display.

      Use cases:

      • JSON plugin with extract rules: true (show JSON tab to view source)
      • Component plugin: true (show JSON tab even when displaying elevated component)
      • Code plugin: false (already showing raw content)

      Subclasses can override this to control parent behavior. Default: true (parent should show raw content tab if applicable)

      Returns boolean

    • get ProviderToUse(): IMetadataProvider

      Returns either the default Metadata provider or the one specified in the Provider property, if it was specified

      Returns IMetadataProvider

    • get RunQueryToUse(): IRunQueryProvider

      Returns either the default RunQuery provider or the one specified in the Provider property, if it was specified

      Returns IRunQueryProvider

    • get RunReportToUse(): IRunReportProvider

      Returns either the default RunReport provider or the one specified in the Provider property, if it was specified

      Returns IRunReportProvider

    • get RunViewToUse(): IRunViewProvider

      Returns either the default RunView provider or the one specified in the Provider property, if it was specified

      Returns IRunViewProvider

    • get SupportsFeedback(): boolean

      Whether this plugin supports user feedback. Plugins that return true will get a feedback button in the artifact viewer header. Override this getter to return true when feedback is available.

      Default: false

      Returns boolean

    Methods

    • A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.

      Returns Promise<void>

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods