mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-23 02:41:39 +00:00
Fix bug publish screenshot (#762)
[Preview this branch](https://cosmos-explorer-preview.azurewebsites.net/pull/762?feature.someFeatureFlagYouMightNeed=true) The main change in this PR fixes the snapshot functionality in the Publish pane-related components. Because the code cell outputs are now rendered in their own iframes for security reasons, a single snapshot of the notebook is no longer possible: each cell output takes its own snapshot and the snapshots are collated on the main notebook snapshot. - Move the snapshot functionality to notebook components: this removes the reference of the notebook DOM node that we must pass to the Publish pane via explorer. - Add slice in the state and actions in notebook redux for notebook snapshot requests and result - Add post robot message to take snapshots and receive results - Add logic in `NotebookRenderer` to wait for all output snapshots done before taking the main one collating. - Use `zustand` to share snapshot between Redux world and React world. This solves the issue of keeping the `PanelContainer` component generic, while being able to update its children (`PublishPanel` component) with the new snapshot. Additional changes: - Add `local()` in `@font-face` to check if font is already installed before downloading the font (must be done for Safari, but not Edge/Chrome) - Add "Export output to image" menu item in notebook cell, since each cell output can take its own snapshot (which can be downloaded) 
This commit is contained in:
15
src/hooks/useNotebookSnapshotStore.ts
Normal file
15
src/hooks/useNotebookSnapshotStore.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import create, { UseStore } from "zustand";
|
||||
|
||||
export interface NotebookSnapshotHooks {
|
||||
snapshot: string;
|
||||
error: string;
|
||||
setSnapshot: (imageSrc: string) => void;
|
||||
setError: (error: string) => void;
|
||||
}
|
||||
|
||||
export const useNotebookSnapshotStore: UseStore<NotebookSnapshotHooks> = create((set) => ({
|
||||
snapshot: undefined,
|
||||
error: undefined,
|
||||
setSnapshot: (imageSrc: string) => set((state) => ({ ...state, snapshot: imageSrc })),
|
||||
setError: (error: string) => set((state) => ({ ...state, error })),
|
||||
}));
|
||||
Reference in New Issue
Block a user