Merge pull request #3035 from evidence-dev/release-2025-01-23

Release release-2025-01-23

.changeset/angry-books-cheer.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Add print behavior for components with hidden content

.changeset/curly-beans-float.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Add Info component

.changeset/eleven-planets-listen.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/evidence': patch
+---
+
+double url encoding

.changeset/itchy-donkeys-fail.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Add simple wrapper components for common HTML usgae

.changeset/metal-walls-listen.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/sdk': patch
+---
+
+Fix: Ensure that length is loaded before we returned undefined for out of range indeces

.changeset/modern-rivers-remember.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/preprocess': patch
+---
+
+Use summary large image on twitter

.changeset/shiny-rocks-chew.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': minor
+---
+
+Chart upgrades and spacing improvements

README.md

@@ -41,7 +41,7 @@ See docs for [other install options](https://docs.evidence.dev/getting-started/i
 # Publish
 
 - [Evidence Cloud](https://evidence.dev/cloud) is the easiest way to securely host your app. It's free to get started.
-- [Self-hosted](https://docs.evidence.dev/deployment/overview) options include Netlify, Vercel, your own infra, and other static site hosting platforms.
+- [Self-hosted](https://docs.evidence.dev/deployment/overview/#self-host) options include Netlify, Vercel, your own infra, and other static site hosting platforms.
 
 # Join the Evidence Community
 

e2e/basic/pages/index.md

@@ -47,6 +47,8 @@ This page can be found in your project at `/pages/index.md`. Make a change to th
     series=category
 />
 
+The top category is {orders_by_category[0].category}
+
 ## What's Next?
 
 - [Connect your data sources](settings)

e2e/basic/sources/needful_things/connection.yaml

@@ -0,0 +1,5 @@
+# This file was automatically generated
+name: needful_things
+type: duckdb
+options:
+  filename: needful_things.duckdb

e2e/basic/sources/needful_things/orders.sql

@@ -0,0 +1 @@
+select * from orders

e2e/basic/tests/tests.spec.js

@@ -28,3 +28,10 @@ test('shows different logo in light and dark mode', async ({ page }) => {
 	logo = await getLogo(page);
 	await expect(logo).toHaveAttribute('src', '/darkLogo.png');
 });
+
+test('bare query reference', async ({ page }) => {
+	await page.goto('/');
+	await waitForPageToLoad(page);
+
+	await expect(page.getByText('The top category is Odd Equipment')).toBeVisible();
+});

e2e/playwright-config.js

@@ -6,6 +6,7 @@ export const config = {
 	testDir: './tests',
 	forbidOnly: !!process.env.CI,
 	retries: process.env.CI ? 2 : 0,
+	timeout: 120000,
 	reporter: [
 		[
 			'html',
@@ -14,7 +15,6 @@ export const config = {
 			}
 		]
 	],
-	timeout: process.platform === 'win32' ? 60_000 : 30_000,
 	expect: {
 		timeout: 15_000
 	},

package.json

@@ -38,7 +38,7 @@
 		"chroma-js": "^2.4.2",
 		"debounce": "^1.2.1",
 		"downloadjs": "1.4.7",
-		"echarts": "5.5.1",
+		"echarts": "5.6.0",
 		"echarts-stat": "1.2.0",
 		"eslint": "8.45.0",
 		"eslint-config-prettier": "^8.10.0",

packages/extension/snippets/emd.code-snippets

@@ -422,6 +422,16 @@
 		],
 		"description": "Insert Map"
 	},
+	"Note": {
+		"prefix": "/Note",
+		"body": ["<Note>\n\t${1:Note Content}\n</Note>\n\n"],
+		"description": "Insert Note"
+	},
+	"Embed": {
+		"prefix": "/Embed",
+		"body": ["<Embed url={${1:query_name}}/>\n\n"],
+		"description": "Insert Embed"
+	},
 	"Slider": {
 		"prefix": "/Slider",
 		"body": "<Slider name=${1:name_of_input} min=${2:0} max=${3:100}/>\n\n",

packages/lib/component-utilities/package.json

@@ -28,7 +28,7 @@
 		"@uwdata/mosaic-sql": "^0.3.2",
 		"debounce": "^1.2.1",
 		"downloadjs": "1.4.7",
-		"echarts": "5.5.1",
+		"echarts": "5.6.0",
 		"ssf": "^0.11.2",
 		"svelte": "4.2.19"
 	}

packages/lib/component-utilities/src/echarts.js

@@ -172,7 +172,7 @@ const echartsAction = (node, options) => {
 					xAxis: {
 						axisLabel: {
 							interval: 0,
-							overflow: 'truncate',
+							overflow: options.xAxisLabelOverflow,
 							width: (clientWidth * modConst) / distinctXValues.size
 						}
 					}

packages/lib/component-utilities/src/echartsThemes.js

@@ -409,8 +409,31 @@ const createTheme = (mode) => {
 			color: ['#c41621', '#e39588', '#f5ed98']
 		},
 		dataZoom: {
-			handleSize: 'undefined%',
-			textStyle: {}
+			type: 'slider',
+			bottom: 10,
+			height: 30,
+			showDetail: false,
+			handleSize: '80%',
+			borderColor: gridlineColor,
+			handleStyle: {
+				borderColor: gridlineColor,
+				color: gridlineColor
+			},
+			moveHandleStyle: {
+				borderColor: gridlineColor,
+				color: gridlineColor
+			},
+			textStyle: {},
+			emphasis: {
+				handleStyle: {
+					borderColor: gridlineColor,
+					color: gridlineColor
+				},
+				moveHandleStyle: {
+					borderColor: gridlineColor,
+					color: gridlineColor
+				}
+			}
 		},
 		markPoint: {
 			label: {

packages/lib/preprocess/src/frontmatter/handle-og.cjs

@@ -19,7 +19,7 @@ module.exports = `
 {/if}
 
 <!-- default twitter cardtags -->
-<meta name="twitter:card" content="summary" />
+<meta name="twitter:card" content="summary_large_image" />
 <meta name="twitter:site" content="@evidence_dev" />
 
 {#if typeof metadata === "object"}

packages/lib/sdk/src/usql/query/Query.js

@@ -634,7 +634,7 @@ DESCRIBE ${this.text.trim()}
 					if (target === null)
 						if (typeof prop !== 'number') return undefined;
 						else {
-							if (prop > this.#length) return undefined;
+							if (this.lengthLoaded && prop > this.#length) return undefined;
 							return this.#mockRow ?? {};
 						}
 

packages/ui/core-components/package.json

@@ -55,7 +55,7 @@
 		"cmdk-sv": "^0.0.12",
 		"codemirror": "^6.0.1",
 		"date-fns": "^3.6.0",
-		"echarts": "5.5.1",
+		"echarts": "5.6.0",
 		"echarts-stat": "1.2.0",
 		"export-to-csv": "0.2.1",
 		"leaflet": "^1.9.4",

packages/ui/core-components/src/lib/atoms/accordion/AccordionItem.svelte

@@ -4,19 +4,27 @@
 
 <script>
 	import * as BaseAccordion from '../shadcn/accordion';
+	import Info from '../../unsorted/ui/Info.svelte';
 	export let title = '';
 	export let compact = false;
 
 	let className = undefined;
 	export { className as class };
+
+	export let description = undefined;
 </script>
 
 {#key title}
 	<BaseAccordion.Item value={title} class={className}>
 		<BaseAccordion.Trigger class={compact ? 'py-0' : ''}>
-			<slot name="title">
-				{title}
-			</slot>
+			<span>
+				<slot name="title">
+					{title}
+					{#if description}
+						<Info {description} />
+					{/if}
+				</slot>
+			</span>
 		</BaseAccordion.Trigger>
 		<BaseAccordion.Content>
 			<slot />

packages/ui/core-components/src/lib/atoms/hover-card/HoverCard.svelte

@@ -1,14 +1,23 @@
 <script>
-	import * as HoverCard from '$lib/atoms/shadcn/hover-card/index.js';
-</script>
+	import {
+		HoverCard,
+		HoverCardContent,
+		HoverCardTrigger
+	} from '$lib/atoms/shadcn/hover-card/index.js';
 
-<!-- class="rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black" -->
+	export let align = 'center';
+	export let side = 'bottom';
+	export let alignOffset = 0;
+	export let sideOffset = 4;
+	export let openDelay = 0;
+	export let closeDelay = 0;
+</script>
 
-<HoverCard.Root openDelay="0" closeDelay="0">
-	<HoverCard.Trigger>
+<HoverCard {openDelay} {closeDelay}>
+	<HoverCardTrigger>
 		<slot name="trigger" />
-	</HoverCard.Trigger>
-	<HoverCard.Content>
+	</HoverCardTrigger>
+	<HoverCardContent {align} {side} {alignOffset} {sideOffset}>
 		<slot name="content" />
-	</HoverCard.Content>
-</HoverCard.Root>
+	</HoverCardContent>
+</HoverCard>

packages/ui/core-components/src/lib/atoms/inputs/button-group/ButtonGroup.svelte

@@ -8,6 +8,7 @@
 	import { getInputContext } from '@evidence-dev/sdk/utils/svelte';
 	import { setContext } from 'svelte';
 	import { buildReactiveInputQuery } from '@evidence-dev/component-utilities/buildQuery';
+	import Info from '../../../unsorted/ui/Info.svelte';
 	import ButtonGroupItem from './ButtonGroupItem.svelte';
 	import { page } from '$app/stores';
 	import HiddenInPrint from '../shared/HiddenInPrint.svelte';
@@ -38,6 +39,9 @@
 	export let color = 'hsla(207, 65%, 39%, 1)';
 	$: colorStore = resolveColor(color);
 
+	/** @type {string | undefined} */
+	export let description = undefined;
+
 	const valueStore = writable(null);
 
 	// TODO: Use getInputSetter instead
@@ -115,7 +119,12 @@
 				: `inline-block overflow-scroll no-scrollbar align-bottom w-fit max-w-full flex-col ${title ? 'mt-0.5' : 'mt-2'} mb-3 ml-0 mr-2`}
 		>
 			{#if title}
-				<span class="text-xs font-medium text-base-content block mb-0.5">{title}</span>
+				<span class="text-xs font-medium text-base-content block mb-0.5"
+					>{title}
+					{#if description}
+						<Info {description} />
+					{/if}
+				</span>
 			{/if}
 			<div
 				class={display === 'tabs'

packages/ui/core-components/src/lib/atoms/inputs/checkbox/Checkbox.svelte

@@ -5,6 +5,7 @@
 <script>
 	import Button from '../../shadcn/button/button.svelte';
 	import HiddenInPrint from '../shared/HiddenInPrint.svelte';
+	import Info from '../../../unsorted/ui/Info.svelte';
 	import { toBoolean } from '../../../utils.js';
 	import { getInputContext } from '@evidence-dev/sdk/utils/svelte';
 	const inputs = getInputContext();
@@ -19,6 +20,9 @@
 	/** @type {string} */
 	export let name;
 
+	/** @type {string | undefined} */
+	export let description;
+
 	/** @type {boolean} */
 	export let hideDuringPrint = true;
 	$: hideDuringPrint = hideDuringPrint === 'true' || hideDuringPrint === true;
@@ -38,6 +42,9 @@
 	>
 		<p class="truncate font-medium">
 			{title}
+			{#if description}
+				<Info {description} />
+			{/if}
 		</p>
 		<input
 			type="checkbox"

packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte

@@ -21,6 +21,8 @@
 	export let name = undefined;
 	/** @type {string | undefined} */
 	export let title = undefined;
+	/** @type {string | undefined} */
+	export let description = undefined;
 	/** @type {boolean} */
 	export let hideDuringPrint = true;
 
@@ -107,6 +109,7 @@
 					{range}
 					{currentDate}
 					{title}
+					{description}
 				/>
 			</QueryLoad>
 		{/if}

packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte

@@ -13,6 +13,7 @@
 	import { RangeCalendar } from '$lib/atoms/shadcn/range-calendar/index.js';
 	import * as Select from '$lib/atoms/shadcn/select/index.js';
 	import * as Popover from '$lib/atoms/shadcn/popover/index.js';
+	import Info from '../../../unsorted/ui/Info.svelte';
 	import { Separator } from '$lib/atoms/shadcn/separator/index.js';
 	import { Calendar } from '$lib/atoms/shadcn/calendar/index.js';
 	import { Icon } from '@steeze-ui/svelte-icon';
@@ -49,6 +50,8 @@
 	export let range = false;
 	/** @type {string} */
 	export let title;
+	/** @type {string | undefined} */
+	export let description = undefined;
 
 	/** @type { { label: string, group: string, range: import('bits-ui').DateRange }[] } */
 	$: presets = [
@@ -244,6 +247,9 @@
 					{:else if selectedDateInput && !range}
 						{#if title}
 							{title}
+							{#if description}
+								<Info {description} className="pl-1" />
+							{/if}
 							<Separator orientation="vertical" class="mx-2 h-4 w-[1px]" />
 						{/if}
 						{dfMedium.format(selectedDateInput.toDate(getLocalTimeZone()))}