Update switch images when zoomed (#116)

* fix incorrect image src on zoom * Update CHANGELOG.md * Fix downloading * download test case added * Update CHANGELOG.md --------- Co-authored-by: Mikhail Volkov <[email protected]>
VolkovLabs · Jun 24, 2024 · 3f09e98 · 3f09e98
1 parent 61f8176
commit 3f09e98
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,13 +1,14 @@
 # Changelog
 
-## 5.1.0 (IN PROGRESS)
+## 5.1.0 (2024-06-23)
 
 ### Features / Enhancements
 
 - Updated video overview (#100)
 - Added plugin e2e tests and remove cypress (#101, #102, #103, #105)
-- Added ability to load image, videos from URL and video toolbar (#111)
+- Added ability to load image, videos from URL and video toolbar (#111, #116)
 - Updated to Grafana 11 and dependencies (#114)
+- Updated to use frame utils from packages (#115)
 - Updated E2E workflow using Docker (#117)
 
 ## 5.0.0 (2024-03-25)

diff --git a/src/components/ImagePanel/ImagePanel.test.tsx b/src/components/ImagePanel/ImagePanel.test.tsx
@@ -54,6 +54,10 @@ describe('Image Panel', () => {
     Object.defineProperty(HTMLElement.prototype, 'clientHeight', { configurable: true, value: elementHeight });
   });
 
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('Should output message', async () => {
     render(
       getComponent({
@@ -1023,7 +1027,7 @@ describe('Image Panel', () => {
    * Toolbar
    */
   describe('Toolbar', () => {
-    it('Should show download button for image', () => {
+    it('Should show download button for image and download image with base64 source type if url not specified', () => {
       const image = '/9j/4AAQSkZJRAAdLxAACEAAIX/9k=';
       render(
         getComponent({
@@ -1049,7 +1053,49 @@ describe('Image Panel', () => {
 
       fireEvent.click(screen.getByTestId(TEST_IDS.panel.buttonDownload));
 
-      expect(saveAs).toHaveBeenCalledWith(`data:image/jpeg;base64,${image}`);
+      expect(saveAs).toHaveBeenCalledWith('data:image/jpeg;base64,/9j/4AAQSkZJRAAdLxAACEAAIX/9k=');
+    });
+
+    it('Should show download button for image and download image with url source', () => {
+      const image = '/9j/4AAQSkZJRAAdLxAACEAAIX/9k=';
+      const imageUrl = 'https://volkovlabs.io/img/index/main.svg';
+      render(
+        getComponent({
+          data: {
+            series: [
+              toDataFrame({
+                name: 'data',
+                fields: [
+                  {
+                    type: FieldType.string,
+                    name: ImageField.IMG,
+                    values: [image],
+                  },
+                  {
+                    type: FieldType.string,
+                    name: 'imageUrl',
+                    values: [imageUrl],
+                  },
+                ],
+              }),
+            ],
+          },
+          options: {
+            toolbar: true,
+            buttons: [ButtonType.DOWNLOAD],
+            formats: DEFAULT_OPTIONS.formats,
+            videoUrl: '',
+            name: '',
+            imageUrl: 'imageUrl',
+          },
+        })
+      );
+
+      expect(screen.getByTestId(TEST_IDS.panel.buttonDownload)).toBeInTheDocument();
+
+      fireEvent.click(screen.getByTestId(TEST_IDS.panel.buttonDownload));
+
+      expect(saveAs).toHaveBeenCalledWith(imageUrl);
     });
 
     it('Should not show download button', () => {
@@ -1106,6 +1152,50 @@ describe('Image Panel', () => {
       expect(screen.getByTestId(TEST_IDS.panel.zoomedImage)).toBeInTheDocument();
     });
 
+    it('Should show zoom button for image with url', () => {
+      const image = '/9j/4AAQSkZJRAAdLxAACEAAIX/9k=';
+      const imageUrl = 'https://volkovlabs.io/img/index/main.svg';
+      render(
+        getComponent({
+          data: {
+            series: [
+              toDataFrame({
+                name: 'data',
+                fields: [
+                  {
+                    type: FieldType.string,
+                    name: ImageField.IMG,
+                    values: [image],
+                  },
+                  {
+                    type: FieldType.string,
+                    name: 'imageUrl',
+                    values: [imageUrl],
+                  },
+                ],
+              }),
+            ],
+          },
+          options: {
+            toolbar: true,
+            buttons: [ButtonType.ZOOM],
+            formats: DEFAULT_OPTIONS.formats,
+            videoUrl: '',
+            name: '',
+            imageUrl: 'imageUrl',
+          },
+        })
+      );
+
+      expect(screen.getByTestId(TEST_IDS.panel.buttonZoom)).toBeInTheDocument();
+      expect(screen.queryByTestId(TEST_IDS.panel.zoomedImage)).not.toBeInTheDocument();
+
+      fireEvent.click(screen.getByTestId(TEST_IDS.panel.buttonZoom));
+
+      expect(screen.getByTestId(TEST_IDS.panel.zoomedImage)).toBeInTheDocument();
+      expect(screen.getByTestId(TEST_IDS.panel.zoomedImage)).toHaveAttribute('src', imageUrl);
+    });
+
     it('Should show pan pinch zoom controls for image', () => {
       const image = '/9j/4AAQSkZJRAAdLxAACEAAIX/9k=';
       render(

diff --git a/src/components/ImagePanel/ImagePanel.tsx b/src/components/ImagePanel/ImagePanel.tsx
@@ -350,7 +350,7 @@ export const ImagePanel: React.FC<Props> = ({ options, data, width, height, repl
           onZoomChange={setIsZoomed}
           zoomImg={{
             alt: '',
-            src: media,
+            src: imageUrl || media,
           }}
           classDialog={styles.zoom}
         >
@@ -404,7 +404,7 @@ export const ImagePanel: React.FC<Props> = ({ options, data, width, height, repl
                 <ToolbarButton
                   icon="save"
                   onClick={() => {
-                    saveAs(media);
+                    saveAs(imageUrl || media);
                   }}
                   data-testid={TEST_IDS.panel.buttonDownload}
                 >