fix(components): small UI tweaks for queries-over-time

components/src/preact/queriesOverTime/queries-over-time-row-label-tooltip.stories.tsx

@@ -23,20 +23,20 @@ export const Default: StoryObj<QueriesOverTimeRowLabelTooltipProps> = {
     render: (args) => <QueriesOverTimeRowLabelTooltip {...args} />,
     args: {
         query: {
-            displayLabel: 'S:F456L (single mutation)',
-            description: 'This mutation is associated with increased transmissibility.',
-            countQuery: 'S:456L',
+            displayLabel: 'Foo variant',
+            description: 'These mutations are associated with increased transmissibility.',
+            countQuery: 'S:451L & S:452L & S:453L & S:454L & S:455L & S:456L & S:457L & S:458L & S:459L & S:460L',
             coverageQuery: '!S:456N',
         },
     },
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
-        await expect(canvas.getByText('S:F456L (single mutation)', { exact: true })).toBeVisible();
-        await expect(canvas.getByText('This mutation is associated with increased transmissibility.')).toBeVisible();
+        await expect(canvas.getByText('Foo variant', { exact: true })).toBeVisible();
+        await expect(canvas.getByText('These mutations are associated with increased transmissibility.')).toBeVisible();
         await expect(canvas.getByText('Count query:')).toBeVisible();
-        await expect(canvas.getByText('S:456L')).toBeVisible();
-        await expect(canvas.getByText('Coverage query:')).toBeVisible();
-        await expect(canvas.getByText('!S:456N')).toBeVisible();
+        await expect(
+            canvas.getByText('S:451L & S:452L & S:453L & S:454L & S:455L & S:456L & S:457L & S:458L & S:459L & S:460L'),
+        ).toBeVisible();
     },
 };
 
@@ -54,7 +54,5 @@ export const WithoutDescription: StoryObj<QueriesOverTimeRowLabelTooltipProps> =
         await expect(canvas.getByText('S:R346T', { exact: true })).toBeVisible();
         await expect(canvas.getByText('Count query:')).toBeVisible();
         await expect(canvas.getByText('S:346T')).toBeVisible();
-        await expect(canvas.getByText('Coverage query:')).toBeVisible();
-        await expect(canvas.getByText('!S:346N')).toBeVisible();
     },
 };

components/src/preact/queriesOverTime/queries-over-time-row-label-tooltip.tsx

@@ -8,25 +8,15 @@ export type QueriesOverTimeRowLabelTooltipProps = {
 
 export const QueriesOverTimeRowLabelTooltip: FunctionComponent<QueriesOverTimeRowLabelTooltipProps> = ({ query }) => {
     return (
-        <div className='flex flex-col gap-2'>
+        <div className='flex flex-col gap-2 max-w-xl'>
             <div className='font-bold'>{query.displayLabel}</div>
             {query.description && <div className='text-sm text-gray-700'>{query.description}</div>}
-            <div className='flex flex-col gap-1'>
-                <div className='text-sm'>
-                    <span className='text-gray-600'>Count query:</span>
-                    <div className='p-2 border border-gray-200 rounded bg-gray-50 overflow-x-auto'>
-                        <pre className='text-xs'>
-                            <code>{query.countQuery}</code>
-                        </pre>
-                    </div>
-                </div>
-                <div className='text-sm'>
-                    <span className='text-gray-600'>Coverage query:</span>
-                    <div className='p-2 border border-gray-200 rounded bg-gray-50 overflow-x-auto'>
-                        <pre className='text-xs'>
-                            <code>{query.coverageQuery}</code>
-                        </pre>
-                    </div>
+            <div className='text-sm'>
+                <span className='text-gray-600'>Count query:</span>
+                <div className='p-2 border border-gray-200 rounded bg-gray-50'>
+                    <pre className='text-xs whitespace-pre-wrap'>
+                        <code>{query.countQuery}</code>
+                    </pre>
                 </div>
             </div>
         </div>

components/src/preact/queriesOverTime/queries-over-time.tsx

@@ -177,7 +177,7 @@ const QueriesOverTimeTabs: FunctionComponent<QueriesOverTimeTabsProps> = ({
                         position='right'
                         portalTarget={tooltipPortalTarget}
                     >
-                        <div className='text-center'>
+                        <div className='text-center whitespace-nowrap mr-2'>
                             <span>{value}</span>
                         </div>
                     </PortalTooltip>

components/src/utilEntrypoint.ts

@@ -54,4 +54,4 @@ export {
 export { type MeanProportionInterval } from './preact/mutationsOverTime/mutations-over-time';
 export { type CustomColumn } from './preact/components/features-over-time-grid';
 
-export { type QueryDefinition } from './lapisApi/lapisTypes';
+export { type CountCoverageQuery } from './preact/queriesOverTime/queries-over-time';