@qctrl/visualizer/VisualizerEntryPoint/index.d.ts

The Q-CTRL Visualizer is a package for displaying animated 3d Bloch sphere visualizations.

import { Vector3Tuple } from "three";
import { PartialStyles } from "../styles/theme";
import { CameraPresets } from "../constants";
import { DataProp } from "../constants/defaultData";
import { Gates } from "../helpers/getVectorsFromGateSeq";
import { CustomLabel, Labels } from "../types";
interface OnUpdateData {
    currentSegmentNumber: number;
    currentFrameIndex: number;
    progress: number;
    isInteracting: boolean;
    isHovering: boolean;
    finalStateCoordinates?: Vector3Tuple;
    currentCameraPreset: keyof typeof CameraPresets | null;
}
export interface OnUpdateProps {
    target: VisualizerEntryPoint;
    data: OnUpdateData;
}
type OnUpdate = (props: OnUpdateProps) => void;
interface BaseProps {
    style?: PartialStyles;
    cameraPreset?: keyof typeof CameraPresets;
    /**
     * If true, the camera will smoothly animate from its current position to the new/selected preset.
     */
    animateCameraPresets?: boolean;
    /**
     * Sets the speed of the animation of the camera to the selected preset.
     * Use a range between 0.001 and 0.05. Defaults to 0.003
     */
    cameraPresetAnimationSpeed?: number;
    isPlaying?: boolean;
    labels?: Labels;
    progress?: number;
    inputState?: {
        theta: number;
        phi: number;
    };
    visualizationData?: {
        data?: DataProp;
        nonErrorStateData?: DataProp;
    };
    continuousSegments?: boolean;
    drawArcs?: boolean;
    gates?: Gates;
    instantGates?: boolean;
    onUpdate?: OnUpdate;
    customLabelsVisibility?: {
        [name: string]: boolean;
    };
    customLabels?: CustomLabel[];
    highlightSegmentOnHover?: boolean;
    animationSpeed?: number;
    onControlsStart?: () => void;
    onControlsEnd?: () => void;
    onControlsChange?: () => void;
}
interface PlaneColor {
    color?: string;
    gradientStops?: Array<string>;
}
interface CoordinateArcsColor {
    phi?: PlaneColor;
    theta?: PlaneColor;
}
export interface ThemeSettings {
    indicatorColor?: string;
    indicatorPointColor?: string;
    indicatorOrbColor?: string;
    pathColor?: string;
    sphereColor?: string;
    sphereOutlineColor?: string;
    axesColor?: string;
    sceneBackgroundColor?: string;
    equatorialPlaneColor?: PlaneColor;
    equatorialPlaneOutlineColor?: string;
    labelColor?: string;
    pathCurrentSegmentColor?: string;
    nonErrorStateColor?: string;
    coordinateArcsColor?: CoordinateArcsColor;
    decoherenceColor?: string;
}
export interface UpdateProps extends BaseProps {
    themeSettings?: ThemeSettings;
}
export interface ConstructorProps extends BaseProps {
    wrapper: HTMLElement;
}
export type Props = BaseProps & ConstructorProps & UpdateProps;
/**
 * A class that generates and represents the entire visualization
 */
declare class VisualizerEntryPoint {
    private props;
    private onUpdate?;
    private webGlSupport?;
    private data;
    private nonErrorStateData?;
    private style;
    private mouse;
    private frameIndex;
    private incrementFrameIndex;
    private wrapper;
    private updates;
    private Tooltip;
    private currentSegmentNumber;
    private sceneManager;
    private skipLastLineDraw?;
    private tooltipIsVisible?;
    private canvasRef;
    private contentDiv;
    private gateSequence?;
    finalStateCoordinates?: Vector3Tuple;
    errors: Error[];
    constructor(params: ConstructorProps);
    /**
     * This is the method used to control the state of the visualizer instance including the play back state / progress, label's state, camera preset and visual theme settings
     */
    update(newProps: UpdateProps): void;
    /**
     * Instance method to be called when unmounting or loosing the reference to a visualizer instance, clears the updates que and sets the cleanup update to be called in child classes
     */
    cleanup(): void;
    /**
     * Instance method to get the progress as a decimal percent, calculated from the current animation frame index
     */
    private get progressFromFrameIndex();
    /**
     * Gets the final frame index based on the current vectorised data set
     *
     */
    private get finalFrameIndex();
    /**
     * Generates vectorised data from a gate sequence and attaches it to the vectorisedData instance variable.
     * Also adds segment indexes to the data instance variable
     */
    private getVectorisedDataFromGates;
    /**
     * Sets finalFrameIndex and frameIndex instance variables then pushes 'updateData' method with appropriate arguments to the updates instance Array.
     * This will cause new Elements with the updated data/path to be rendered. This method needs to be called any time new data is passed in
     */
    private updateData;
    /**
     * The (recursive) render loop that will call the .update() method on the SceneManager instance each browser animation frame (rendering the three js scene each frame)
     */
    private animate;
    /**
     * Updates the position vector and target id on the mouse object
     */
    private setMouseCoordsAndTargetId;
    /**
     * Mouse move event handler
     */
    private mouseMove;
    /**
     * Takes a progress as a decimal percent and returns the calculated frame index from the progress
     */
    private getFrameIndexFromProgressProp;
    /**
     * Creates new data set from new gates param then updates the visualization with new data
     */
    private setNewGates;
    /**
     * Creates new data set from new data param then updates the visualization with new data
     */
    private setNewData;
    /**
     * Pushes UPDATE_THEME_SETTINGS with new theme settings to the this.updates array
     */
    private setNewThemeSettings;
    /**
     * Pushes SET_CAMERA_PRESET and new camera preset to the this.updates array
     */
    private setNewCameraPreset;
    /**
     * Pushes SET_CAMERA_PRESET and new camera preset to the this.updates array
     */
    private setLabelsVisibility;
    /**
     * Sets a new input state from new params/props via pushing to the this.updates object
     */
    private setNewInputState;
    /**
     * Pushes methods and values when the progress changes from the frameIndex calculated progress
     */
    private setScrubbing;
}
export default VisualizerEntryPoint;