Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Changing card image download logic #273

Merged
merged 5 commits into from
Dec 16, 2022
Merged

Changing card image download logic #273

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c3e34a6
feature(): Changing download logic for card download by downloading t…
alfredorubin96 Nov 29, 2022
7d1e7bb
Merge
nielsdejong Dec 16, 2022
d55dc57
fix(download report image): added missing ref for card expanded view
alfredorubin96 Dec 16, 2022
fa8e3be
merging and fixing missing ref for expandedCard
alfredorubin96 Dec 16, 2022
9cb7240
Removed package-lock.json
nielsdejong Dec 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion src/card/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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}
Expand All @@ -131,6 +134,7 @@ const NeoCard = ({
database={database}
active={active}
setActive={setActive}
onDownloadImage={() => downloadComponentAsImage(ref)}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alfredorubin96 the download as image seems to be broken now when a report is viewed in fullscreen, could you check?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed, now it's possible to download both normal and expanded cards

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

works! now two more things on my mind (we can also decide to fix later):

  1. for specific types of charts (e.g. GraphChart) the 'save as image' gives a strange extra margin at the bottom (non-fullscreen)
  2. in the fullscreen, it takes also the margins of the window into the screenshot, it would be better if that's not in there.

What do you think? Fix later?

query={report.query}
globalParameters={globalParameters}
fields={report.fields ? report.fields : []}
Expand Down
3 changes: 2 additions & 1 deletion src/card/view/CardView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ const NeoCardView = ({
extensions,
active,
setActive,
onDownloadImage,
type,
selection,
dashboardSettings,
Expand Down Expand Up @@ -53,7 +54,7 @@ const NeoCardView = ({
onTitleUpdate={onTitleUpdate}
onToggleCardSettings={onToggleCardSettings}
settings={settings}
onDownloadImage={() => downloadComponentAsImage(ref)}
onDownloadImage={onDownloadImage}
onToggleCardExpand={onToggleCardExpand}
expanded={expanded}
></NeoCardViewHeader>
Expand Down