diff --git a/libs/shared/lib/components/buttons/buttons.module.scss b/libs/shared/lib/components/buttons/buttons.module.scss index a348a6e10fe2c25f8aee3e9be99e191bcbef3cfb..4a522f089934a51718f7a1bfffb97e5490ca357f 100644 --- a/libs/shared/lib/components/buttons/buttons.module.scss +++ b/libs/shared/lib/components/buttons/buttons.module.scss @@ -20,7 +20,7 @@ } padding: 0.25em 0.75em; span { - overflow: hidden; + overflow: visible; text-overflow: ellipsis; line-height: 1em; } @@ -144,3 +144,9 @@ .btn-rounded { @apply rounded-full; } + +.exported { + span { + transform: translate(0px, -8px); + } +} \ No newline at end of file diff --git a/libs/shared/lib/components/buttons/buttons.module.scss.d.ts b/libs/shared/lib/components/buttons/buttons.module.scss.d.ts index ac3cb0637e258b41ca471d130139c09b5f86f1a0..b34ab2c567d126ef0124e2e7900d0d2c28c8b2e5 100644 --- a/libs/shared/lib/components/buttons/buttons.module.scss.d.ts +++ b/libs/shared/lib/components/buttons/buttons.module.scss.d.ts @@ -16,5 +16,6 @@ declare const classNames: { readonly 'btn-ghost': 'btn-ghost'; readonly 'btn-block': 'btn-block'; readonly 'btn-rounded': 'btn-rounded'; + readonly exported: 'exported'; }; export = classNames; diff --git a/libs/shared/lib/components/pagination/index.tsx b/libs/shared/lib/components/pagination/index.tsx index 4a0cf94aac30be636b5a45e16fedd85c8c25065a..31439e25848f3cf69ea68bda5e1f88a98519b010 100644 --- a/libs/shared/lib/components/pagination/index.tsx +++ b/libs/shared/lib/components/pagination/index.tsx @@ -36,15 +36,18 @@ export const Pagination: React.FC<PaginationProps> = ({ } }; - const backIcon = arrangement === 'vertical' ? 'icon-[ic--baseline-arrow-upward]' : 'icon-[ic--baseline-arrow-back]'; - const forwardIcon = arrangement === 'vertical' ? 'icon-[ic--baseline-arrow-downward]' : 'icon-[ic--baseline-arrow-forward]'; - + const backIcon = <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"> + <path fill="currentColor" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/> +</svg> + const forwardIcon = <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"> + <path fill="currentColor" d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/> +</svg> + return ( - <div - className={`self-center table-pagination flex flex-col items-center py-2 gap-1.5 ${arrangement === 'vertical' ? 'flex-col' : 'flex-row'} ${className}`} - > + <div className={`self-center table-pagination flex flex-col items-center py-2 gap-1.5 ${className}`}> <div className="inline-block text-sm"> - <span className="font-semibold">{`${firstItem} - ${numItemsArrayReal}`}</span> of {totalItems} + <span className="font-semibold">{`${firstItem} - ${firstItem + numItemsArrayReal - 1}`}</span> + <span className="ml-1">of {totalItems}</span> </div> <div className={`grid ${arrangement === 'vertical' ? 'grid-rows-3' : 'grid-cols-2'} gap-2`}> <Button diff --git a/libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx b/libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx index a0c3a98520e9ac4e4e0ba1c67bde3467cfd95a79..76aed67e655f916a5ad815a351e7f903779ef7e7 100644 --- a/libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx +++ b/libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx @@ -307,8 +307,10 @@ export const Table = ({ data, itemsPerPage, showBarPlot, showAttributes, selecte ) ) : ( <div className="font-normal mx-auto flex flex-row items-start justify-center w-full gap-1 text-center text-secondary-700 p-1"> - <span className="text-2xs overflow-x-hidden truncate">Unique values:</span> - <span className="text-xs shrink-0">{data2Render[index]?.numElements}</span> + <div className="flex items-center space-x-1 whitespace-nowrap"> + <span className="text-2xs">Unique values:</span> + <span className="text-xs font-medium">{data2Render[index]?.numElements}</span> + </div> </div> ))} </div> diff --git a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx b/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx index 761d3a51798624a3167aea3287abfb0a13b50964..71c00cac1d68ad40ac4cc96ac955f36387b33337 100644 --- a/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx +++ b/libs/shared/lib/vis/visualizations/tablevis/tablevis.tsx @@ -8,6 +8,7 @@ import html2canvas from 'html2canvas'; import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'; import { VISComponentType, VisualizationPropTypes, VisualizationSettingsPropTypes } from '../../common'; import { AugmentedNodeAttributes, Table } from './components/Table'; +import styles from '../../../components/buttons/buttons.module.scss'; export interface TableVisHandle { exportImageInternal: () => void; @@ -110,8 +111,13 @@ export const TableVis = forwardRef<TableVisHandle, VisualizationPropTypes<TableP const exportImageInternal = () => { if (ref.current) { - // Check if divRef.current is not null - html2canvas(ref.current).then((canvas) => { + const clonedElement = ref.current.cloneNode(true) as HTMLDivElement; + clonedElement.classList.add(styles.exported); + + document.body.appendChild(clonedElement); + + html2canvas(clonedElement).then((canvas) => { + document.body.removeChild(clonedElement); const pngData = canvas.toDataURL('image/png'); const a = document.createElement('a'); a.href = pngData;