Add a Select input component that also allows using results of a query as options.

• Store queries in local file system. @geclos

After choosing an option in the telemetry prompt an identical output gets printed in stdout. Does not affect usage but looks broken.

Latitude is prepared to handle env vars for secrets and other shenanigans, but we need to add support for a .env file in the root folder of a Latitude app.

We currently use node's mysql package which is old and does not support some critical features from new mysql versions. We need to migrate to mysql2 asap.

We need more visibility on CLI errors. Add optional error reporting via sentry to the CLI.

Currently the Latitude CLI update is a manual npm update -g @latitude-data/cli, it doesn't notify when there is a new version and may cause bugs or incompatibilities. We should notify users of new CLI versions when they use a command.

Users are starting to ask how to contribute to the project. We need to add some documentation on how to get set up with development.

CLI command with nicely formatted results so that you can debug your queries.

• Add watcher so that it's dynamic
• Use console.table so that it prints results in a nice format

Really wanted to try Latitude it looks so great! Would love some help here whenever possible :)

latitude start
Checking for updates...
? Whats the name of your project? latitude-app
? 🌟 Help us make Latitude better for you by sharing anonymous usage data—it’s a simple way
 to contribute, with full control to opt-in or opt-out at any time. No, maybe later
? 🌟 Help us make Latitude better for you by sharing anonymous usage data—it’s a simple way
 to contribute, with full control to opt-in or opt-out at any time. (Use arrow keys)
❯ Yes, count me in!
  No, maybe later📦 Cloning template to /latitude-app
✅ template cloned
✅ Created latitude.json
Downloading from: https://registry.npmjs.org/@latitude-data/server/-/server-0.4.0.tgz
Uninstalling old app version...
App server downloaded successfully 🎉
Installing dependencies...
┌───────────────────────────────────────── Error ──────────────────────────────────────────┐
│                                                                                          │
│                                                                                          │
│                                                                                          │
│                                                                                          │
│               🚨 Failed to install dependencies                                          │
│                                                                                          │
│               Update latitude and try again. If this does not solve the problem,         │
│               please open an issue on GitHub:                                            │
│               https://gitub.com/latitude-dev/latitude/issues                             │
│                                                                                          │
│         ERROR:                                                                           │
│         false                                                                            │
│                                                                                          │
│                                                                                          │
│                                                                                          │
└──────────────────────────────────────────────────────────────────────────────────────────┘

Self explanatory

• Charts: Line, Bar, PIe, Scatter @andresgutgon
• Layout: Grid and Col
• Inputs: Text input, number input, date input
• Table @geclos
• Link @csansoon
• Alert @geclos #127

Latitude does some automatic transformations to your code that do no play nicely with existing lsps and code completion, we need to provide at least a VS Code extension so that developing a Latitude app feels natural from the code editor.

What?

Context this comment #199 (comment)

What?

Now the columns used from the query in a <PieChart /> are always the first as dimension and the second as metric

So for example a table like this

You can pass metric and dimension like this

<PieChart metric='Amounts' dimension='Source' />

The problem

If for some reason you want to use a data that looks like this

It wont work. We have to implement metric and dimension props for pie chart

DO IN ORDER

• Review ALL package licenses
• Publish npm
• Test package works in production @cesr

QA tasks

• When using read_csv the file is not found because it's a static in a different folder

• Inputs should have a label prop @csansoon
• Charts
  • Add sort prop @andresgutgon
  • Should have a title and description prop @andresgutgon
  • Subscribe to parameter changes
  • Truncated X axis in mixed charts @andresgutgon @andresgutgon
  • Make the charts animate to the new state instead of flicker @andresgutgon
  • Error display as in old latitude
  • Line charts should not require chartType

PR:
#115

Add the option to click on a specific point in the chart to view the underlying data table for that specific slice/data point.

https://trylatitude.slack.com/archives/C03BS1B2YC9/p1711545133885489

It now looks broken. Anything that makes users wait more than a few seconds should have a visual indicator.

From the get go we tried to support whatever package manager the user was using in Latitude's CLI: pnpm yarn or npm. The problem with this is that we either have to ask the user what manager they want the CLI to use or we have to take a guess, which more often than not could be wrong. In order to deliver a more robust solution and taking into consideration our bandwith we are gonna remove support for alternative package managers and instead focus on providing a rock solid solution with npm, which ships with all versions of NodeJS and is plenty fast for all versions of node that Latitude supports.

WAT

We want to offer a standalone library of react components that communicate with a Latitude backend, so that you can easily integrate more deeply Latitude into existing codebases.

TODO

• Implement data layer in @latitude-data/react here
• Implement latitude-embed JS component to communicate with an embedded iframe of a latitude app here
• Implement native React components for tables & visualizations

WHAT?

The idea is to have a common theming system that can be shared between different client framkeworks implementations of Latitude sdk components. Svelte, React, Vue...

TODO

• Extract theme and Tailwind config
• Generate individual CSS files for each component

CSS

We have two ways of using Latitude sdk components.

a) Use the components and you build the CSS

This is the way you want to use if you maximum configuration. If you want to override some of the Tailwind config. This way require that you have in your dev bundler (Vite, Webpack,...) a way of running Tailwind.

You have to extend your Tailwind config with SDK client theme

// your-project/tailwind.config.js
{
  extends: ["@latitude-sdk/client/theme/tailwind.config.js"],
  // ... Extend with your custom config
}

### b) Use individual exported CSS files
This way is ideal if you are ok with our theme system and you just want to use the components. The components that comes from our client implementations: `@latitude-sdk/svelte`, `@latitude-sdk/react` comes without styles. If you implemented a) you will see those styles. The other way is by importing our pre-build CSS files.

You can import all the CSS generated by our components (the easiest but more heaviest way)
``` javascript
import '@latitude-sdk/client/css/all.min.css'

Or you can import only the components you use

import '@latitude-sdk/client/css/button.min.css'
import '@latitude-sdk/client/css/chart.min.css'
import '@latitude-sdk/client/css/column.min.css'
//....

How to extract individual CSS files.

Here is a starting point but the idea is to use tailwind config for each component and in the Tailwind content put only the path to the component. This way the files are smaller and can be imported individually.

• NOTE: Not sure if it's worthy do this. Let's wait to see if there are people that needs this way of working with our CSS.

WAT

Same than #105 but with svelte components instead

Some users have asked about a potential integration wtih LLM providers that would help them develop Latitude projects and write queries. We need to invesigate the fesability of providing an AI-assistant solution without hardcoding an integration with non-OSS providers like OpenAI. To be clear, OpenAI could be one of the supported providers, but I think the solution should be provider-agnostic so that people can integrate with whatever AI solution they want.

What?

We want to allow users of the framework to pass encrypted params that they can use when embedding the view in an iframe. Example:

<iframe src="https://your-latitudepage.com/some/query?secret=ENCRYPTED" />

So the idea is to pass to the API this secret or whatever you want to call your secret param and decrypt it on the server so only the owner of your-latitudepage.com can know what's the value of ENCRYPTED.

Considerations

We need to think about how to differentiate between encrypted and non-encrypted params. One idea could be to add a prefix to the value or the name of the param
To the name:

lt__secret=ENCRYPTED

To the value:

secret=lt--ENCRYPTED

I think both ways can work

We also need to document how encryption work. Users needs to have a LATITUDE_SECRET_KEY in their .env file (which should be in the .gitignore file of the data project). The idea is to do what Rails does. Use this LATITUDE_SECRET_KEY do decrypt it on latitude's server.

On their side they need to encrypt the value of the encrypted params in the same way and with the same LATITUDE_SECRET_KEY. TO_BE_DEFINED

I think nothing need to be done in terms of using the encrypted param in queries or views. In a view users do param('secret') or whatever name they use for this param. And this send to the API the param encrypted. Is the server which before passing to the query builder decrypt the params with LATITUDE_SECRET_KEY

It should fail if we find some param that needs to be decrypted and we don't have the secret key. Also it should not fail if decryption fail. If someone pass an incorrect encrypted key we pass through the param to the query and the query will fail

WAT

We need to add support for adding static files to a Latitude app such as svgs, pngs, and whatnot. The static files need to be bundled with the production build.

TODO

• Review / implement SSL support
• QA with real data
• Review and fix the docs

Progress

• postgres
• mysql
• athena
• bigquery
• clickhouse @samulatitude
• databricks @samulatitude
• duckdb
• redshift @samulatitude
• snowflake @geclos
• sqlite @geclos
• trino

Right now we rely on clickhouse's postgres interface to connect to Clickhouse with our postgres client. This is far from ideal specially considering Clickhouse's own cloud offering does not allow you to activate the postgres inteface. We need to reimplement the connector with Clickhouse's offical nodejs client.

We should make it work from any subfolder inside a latitude project. Pretty easy: recursively look up the tree until we find a latitude.json

Users are missing an easy way to include icons to Latitude.

And potentially the homepage also?

What?

If I try to use generated types from Svelte on our ./apps/server/routes/+layout.servert.ts file it does not work at runtime

Doing this

Result in this runtime error:

The error is pointing to an issue with our vite plugin

Temporary fix

Not ideal but the solution is to remove lang="ts" from the <script> tag in +layout.svelte and use JSDoc instead

• Table cuts off the last 2 results and there's no way to navigate to them

• Accept full file paths in the run command.

Right now the latitude run command accepts referring to queries just with the name of the file.

We want to support VSCode tasks to make the experience more streamlined, so the command needs to accept full file paths too through a flag or parameter.

It seems that each time the RunButton is clicked, the connector initiates a new MySQL connection, leading to an error message stating: "ER_CON_COUNT_ERROR: Too many connections

@geclos

We need a param function to display parameters in views, like this:

<Input param='name' />

<Text.H1>
  Hello, {param('name')}!
</Text.H1>

To create a function like this, which is 1. autoimported and 2. reactive without needing to add "$", wee can use the same method as we are doing with runQuery, where a vite script creates the import, moves the method call to a script tag and assignes the result to a variable, and finally replaces the original call with a suscription to that variable. After the transformation, it should look like this:

<script>
  import { param } from '...';
  const val = param('name');
</script>

<Input param='name' />

<Text.H1>
  Hello, {$val}!
</Text.H1>

We need a way to declare different themes in a project and then apply them to the views.