feat: estimate the cost of running a tag from web view

.markdownlint.json

@@ -0,0 +1,7 @@
+
+{
+  "MD033": false, // Inline HTML
+  "MD013": false, // Line length
+  "MD051": false, // Link fragments should be valid"
+  "MD042": false // No empty links
+}

.vscodeignore

@@ -10,3 +10,4 @@ vsc-extension-quickstart.md
 **/*.ts
 **/.vscode-test.*
 .versionrc
+.markdownlint.json

CONTRIBUTING.md

@@ -1,33 +1,35 @@
 
-### Requirements
+# Requirements
+
 * `node v18` or higher
 * `npm` (gets installed alongside node)
 
+## How to contribute
+
+[1. Build and make changes to the extension]()
 
-### How to contribute
+* Fork this repository, clone it to your desktop and open it in VSCode
+* Run `npm install` in your terminal to install all the dependencies
+* Click the `Run and debug` icon on the left hand pane of your editor and click on `Run Extension` button
 
-#### Build the project
+    <img src="media/images/dataform_tools_run_and_debug.png" alt="compilation" width="300">
 
-1. To build and make changes to the extension
-    - Fork this repository, clone it to your desktop and open it in VSCode 
-    - Run `npm install` in your terminal to install all the dependencies
-    - Click the `Run and debug` icon on the left hand pane of your editor and click on `Run Extension` button. 
+* This should open a new VSCode window where you can open a Dataform project. Make sure that you folder opened in the workspace is at the root of the Dataform project. For example if your Dataform project is located at `~/repos/my_dataform_project` open the workspace at `~/repos/my_dataform_project`, **NOT** `~/repos`. Such that either `workflow_settings.yaml` or `dataform.json` depending on the Dataform version you are using is located at the root of the VSCode workspace.
 
-        <img src="media/images/dataform_tools_run_and_debug.png" alt="compilation" width="300">
+[2. Make your changes]()
 
-2. Doing step (1) will open a new VSCode window where you can open a Dataform project. Make sure that you folder opened in the workspace is at the root of the Dataform project. For example if your Dataform project is located at `~/repos/my_dataform_project` open the workspace at `~/repos/my_dataform_project`, **NOT** `~/repos`. Such that either `workflow_settings.yaml` or `dataform.json` depending on the Dataform version you are using is located at the root of the VSCode workspace.
+Make the desired changes to the `vscode-dataform-tools` repo and re-run/refresh the compilation to see the desired outcome in the new VSCode window
 
-#### Make your changes
+[Test your changes]()
 
-3. Make the desired changes to the `vscode-dataform-tools` repo and re-run/refresh the compilation to see the desired outcome in the new VSCode window that opens when doing step (2)
+* **Test your changes** on your Dataform repository. If you are running linux based operating system run `npm run test` on your terminal to verify if the exsisiting tests are pasing. There are some caveats with running tests, so do not panic if the test fail to run. The test would not be able to run if your project path is very long this is a [known issue reported here](https://github.com/microsoft/vscode-test/issues/232). Also, we are having to remove `.vscode-test/user-data` before running `vscode-test` in the `npm run test` script in `package.json`. These tests currently are only tested to be running on Mac OS. We will need to change the script for `npm run test` in `package.json` for it to work in multiple operating systems.
 
-#### Test your changes
+* Run `npm install markdownlint-cli2 --global` to install markdown linter and run `markdownlint-cli2 README.md` to verify the Markdown is correctly formatted if you have made any changes there.
 
-4. **Test your changes** on your Dataform repository. If you are running linux based operating system run `npm run test` on your terminal to verify if the exsisiting tests are pasing. There are some caveats with running tests, so do not panic if the test fail to run. The test would not be able to run if your project path is very long this is a [known issue reported here](https://github.com/microsoft/vscode-test/issues/232). Also, we are having to remove `.vscode-test/user-data` before running `vscode-test` in the `npm run test` script in `package.json`. These tests currently are only tested to be running on Mac OS. We will need to change the script for `npm run test` in `package.json` for it to work in multiple operating systems.
+### Open an issue / pull request
 
-#### Open an issue / pull request
+[If you'd like the feature or bug fix to be merged]()
 
-5. If you'd like the feature or bug fix to be merged
-    - Check the exsisting issues to make sure that if it has not been already raised
-    - [Create an issue here](https://github.com/ashish10alex/vscode-dataform-tools/issues)  
-    - [Create a pull request here](https://github.com/ashish10alex/vscode-dataform-tools/pulls)
+* Check the exsisting issues to make sure that if it has not been already raised
+* [Create an issue here](https://github.com/ashish10alex/vscode-dataform-tools/issues)  
+* [Create a pull request here](https://github.com/ashish10alex/vscode-dataform-tools/pulls)

README.md

@@ -12,18 +12,17 @@
 
 ⚠️ ***This is not an officially supported Google product.***
 
-
 [VS Code extension](https://marketplace.visualstudio.com/items?itemName=ashishalex.dataform-lsp-vscode) for [Dataform](https://github.com/dataform-co/dataform) with following features
 
-
 | Feature | Description |
 |---------|-------------|
-| [Compiled Query & Dry run stats](#compilation) | Compiled query in a vertical split |
+| [Compiled Query & Dry run stats](#compilation) | Compiled query with dry run stats in a vertical split |
 | [Dependancy graph](#depgraph) | Interative dependancy graph with external sources higlighted in distinct colors |
-| [Inline diagnostics on `.sqlx` file](#diagnostics) ❗ | Native lsp like experience with diagnostics being directly put on both the sqlx file & compiled query |
+| [Inline diagnostics on `.sqlx` file](#diagnostics) 🚨 | Native LSP like experience with diagnostics being directly put on sqlx file |
 | [Preview query results](#preview_query_results) | Preview query results in a table by running the file |
+| [Cost estimator](#cost_estimator) 💸 | Estimate the cost of running a Tag|
 | [Go to definition](#definition) | Go to definition for source in `$ref{("my_source")}` and javascript blocks in `.sqlx` files  |
-| [Auto-completion](#autocomplete) | - Column names of current model <br><br> - Dependencies and declarations in `${ref("..")}` trigger when `$` character is typed <br><br> - Dependencies when `"` or `'` is typed inside the config block which has `dependencies` keyword is in the line prefix <br><br> - `tags` when `"` or `'` is typed inside the config block which has `tags` keyword is in the line prefix |
+| [Auto-completion](#autocomplete) | - Column names of current model <br> - Dependencies and declarations in `${ref("..")}` trigger when `$` character is typed <br> - Dependencies when `"` or `'` is typed inside the config block which has `dependencies` keyword is in the line prefix <br> - `tags` when `"` or `'` is typed inside the config block which has `tags` keyword is in the line prefix |
 | [Code actions](#codeactions) | Apply dry run suggestions at the speed of thought |
 | [Run file(s)/tag(s)](#filetagruns) | Run file(s)/tag(s), optionally with dependencies/dependents/full refresh using vscode command pallet / menu icons |
 | [Format using Sqlfluff](#formatting) 🪄 | Fromat `.sqlx` files using [sqlfluff](https://github.com/sqlfluff/sqlfluff)|
@@ -45,22 +44,22 @@
    ```bash
    gcloud init
    ```
+
    ```bash
    gcloud auth application-default login
    ```
+
    ```bash
     gcloud config set project <project_id> #replace with your gcp project id
    ```
 
-
 3. To enable formatting using [sqlfluff](https://github.com/sqlfluff/sqlfluff) install [sqlfluff](https://github.com/sqlfluff/sqlfluff)
 
    ```bash
    # install python and run
    pip install sqlfluff
    ```
 
-
 4. To enable prettier diagnostics install [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) extension [ **optional** ]
 
 > [!NOTE]
@@ -72,19 +71,27 @@ Trouble installing ? Please see [FAQ section](FAQ.md), if you are still stuck, p
 ## Features
 
 ### <a id="compilation">Compiled query & Dry run stats</a>
+
 ![compilation](media/images/compiled_query_preview.png)
 
 ### <a id="depgraph">Dependency graph</a>
+
 ![depgraph](/media/images/dependancy_tree.png)
 
 ### <a id="diagnostics">Inline diagnostics errors on `.sqlx` files ❗</a>
+
 ![diagnostics](media/images/diagnostics.png)
 
 ### <a id="preview_query_results">Preview query results</a>
+
 ![preview_query_results](/media/images/preview_query_results.png)
 
+### <a id="cost_estimator">Estimate cost of running a Tag</a>
+
+![cost_estimator]()
 
 ### <a id="definition">Go to definition</a>
+
 Go to definition for source in `$ref{("my_source")}`. Takes you to `my_source.sqlx` or `sources.js` at the line where `my_source` is defined. There is also support for go to definiton
 from a javascript variable/module from a `.sqlx` file to `js` block or `.js` file where the virable or module declaration exsists
 
@@ -108,8 +115,6 @@ Auto completion support for `tags` when `"` or `'` is typed inside the config bl
 
 ![formatting](media/images/formatting.gif)
 
-
-
 ### <a id="filetagruns">Run file/tag with dependencies/dependents</a>
 
 Open vscode command pallet by pressing <kbd>CTLR</kbd> + <kbd>SHIFT</kbd> + <kbd>p</kbd> or <kbd>CMD</kbd> + <kbd>SHIFT</kbd> + <kbd>p</kbd> on mac and run one of the required commands
@@ -127,11 +132,9 @@ Open vscode command pallet by pressing <kbd>CTLR</kbd> + <kbd>SHIFT</kbd> + <kbd
 
 ## Known Issues
 
-- [ ] Features such as go to definition / dependancy graph might not work with consistantly with `${ref("dataset", "table")}` or when it is multiline or a different format works best with `${ref('table_name')}` format
+* [ ] Features such as go to definition / dependancy graph might not work with consistantly with `${ref("dataset", "table")}` or when it is multiline or a different format works best with `${ref('table_name')}` format
 
 ## TODO
 
-- [ ] Improved UI to support light mode users
-- [ ] Handle case where user is not connected to internet or on vpn where network request for dry run cannot be made
-
-
+* [ ] Add option to include dependents / dependencies when running cost estimator for tag
+* [ ] Handle case where user is not connected to internet or on vpn where network request for dry run cannot be made

media/css/query.css

@@ -127,6 +127,7 @@ button:disabled:hover {
 
 .topnav a {
 	color: #b8b5b5;
+	box-shadow: 0 1px 1px gray;
 	text-decoration: none;
 	font-size: 16px;
 	padding: 4px 5px;
@@ -427,4 +428,27 @@ form {
 	align-items: center;
 	cursor: pointer;
 	margin: 10px;
+}
+
+
+.cost-model {
+	background-color: #007acc;
+	color: #ffffff;
+	padding: 5px 10px;
+	font-size: 16px;
+	border-radius: 5px;
+	border: none;
+	cursor: pointer;
+}
+
+.cost-model:hover {
+	background-color: #3291d0;
+}
+
+#costEstimator {
+    margin-bottom: 20px;
+}
+
+.tag-dropdown {
+  font-size: 14px;
 }

media/css/tabulator_custom.css

@@ -26,4 +26,8 @@
 /* Optional: Add alternating row colors for better readability */
 .tabulator .tabulator-row:nth-child(even) {
     background-color: #24272a; /* Slightly different background for even rows */
+}
+
+.error-column {
+    color: #D32F2F;
 }