Changing card image download logic (#273)

* feature(): Changing download logic for card download by downloading the entire card instead of just the view. This kind of change adds also the buttons to the downloaded image, that is not ideal. * fix(download report image): added missing ref for card expanded view * Removed package-lock.json Co-authored-by: Alfred Rubin <[email protected]> Co-authored-by: Niels de Jong <[email protected]>
neo4j-labs · Dec 16, 2022 · d4b90db · d4b90db
1 parent 6395948
commit d4b90db
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/src/card/Card.tsx b/src/card/Card.tsx
@@ -30,6 +30,7 @@ import { setReportHelpModalOpen } from '../application/ApplicationActions';
 import { loadDatabaseListFromNeo4jThunk } from '../dashboard/DashboardThunks';
 import { Neo4jContext, Neo4jContextState } from 'use-neo4j/dist/neo4j.context';
 import { getDashboardExtensions } from '../dashboard/DashboardSelectors';
+import { downloadComponentAsImage } from '../chart/ChartUtils';
 
 const NeoCard = ({
   index, // index of the card.
@@ -61,6 +62,8 @@ const NeoCard = ({
   const [databaseList, setDatabaseList] = React.useState([database]);
   const [databaseListLoaded, setDatabaseListLoaded] = React.useState(false);
 
+  const ref = React.useRef();
+
   // fetching the list of databases from neo4j, filtering out the 'system' db
   useEffect(() => {
     if (!databaseListLoaded) {
@@ -120,7 +123,7 @@ const NeoCard = ({
     <div style={{ height: '100%' }} ref={observe}>
       {/* The front of the card, referred to as the 'view' */}
       <Collapse disableStrictModeCompat in={!settingsOpen} timeout={collapseTimeout} style={{ height: '100%' }}>
-        <Card style={{ height: '100%' }}>
+        <Card ref={ref} style={{ height: '100%' }}>
           <NeoCardView
             settingsOpen={settingsOpen}
             editable={editable}
@@ -131,6 +134,7 @@ const NeoCard = ({
             database={database}
             active={active}
             setActive={setActive}
+            onDownloadImage={() => downloadComponentAsImage(ref)}
             query={report.query}
             globalParameters={globalParameters}
             fields={report.fields ? report.fields : []}
@@ -199,7 +203,7 @@ const NeoCard = ({
   // Look into React Portals: https://stackoverflow.com/questions/61432878/how-to-render-child-component-outside-of-its-parent-component-dom-hierarchy
   if (expanded) {
     return (
-      <Dialog maxWidth={'xl'} open={expanded} aria-labelledby='form-dialog-title'>
+      <Dialog maxWidth={'xl'} ref={ref} open={expanded} aria-labelledby='form-dialog-title'>
         <DialogContent
           style={{
             width: Math.min(1920, document.documentElement.clientWidth - 64),

diff --git a/src/card/view/CardView.tsx b/src/card/view/CardView.tsx
@@ -23,6 +23,7 @@ const NeoCardView = ({
   extensions,
   active,
   setActive,
+  onDownloadImage,
   type,
   selection,
   dashboardSettings,
@@ -53,7 +54,7 @@ const NeoCardView = ({
       onTitleUpdate={onTitleUpdate}
       onToggleCardSettings={onToggleCardSettings}
       settings={settings}
-      onDownloadImage={() => downloadComponentAsImage(ref)}
+      onDownloadImage={onDownloadImage}
       onToggleCardExpand={onToggleCardExpand}
       expanded={expanded}
     ></NeoCardViewHeader>