Create Squirrel by ArtemLazarchuk · Pull Request #286 · Ivy-Interactive/Ivy-Examples

ArtemLazarchuk · 2025-11-05T12:12:00Z

Squirrel

One-Click Development Environment

Click the badge above to open this example in GitHub Codespaces with:

.NET 9.0 SDK pre-installed
Ready-to-run environment (no local setup)

Created Using Ivy

Web application created using Ivy-Framework.

Ivy unifies front-end and back-end into a single C# codebase for building internal tools and dashboards.

What This Application Does

This example demonstrates data processing using the Squirrel library integrated with Ivy:

Load CSV: Reads fashion_products.csv into a Squirrel Table
Filter & Sort: Interactive controls for rating, price, brand, category, and sort order
Column Visibility: Toggle which columns are shown/exported
Export Filtered CSV: Download the current filtered view
Pagination: Navigate results with page controls (default page size: 25)
Charts: Brand-level line chart showing counts per brand and overall average for a selected product
Details Table: Tabular breakdown of brand counts for the selected product

Technical Implementation

Uses Squirrel Table APIs for CSV load, sort, and iteration
UI built with Ivy components and reactive state (UseState, UseEffect)
Pagination via Pagination widget bound to state (top/bottom of the table)
Chart built with Ivy LineChart using dimensions/measures
Key files:
- squirrel/Apps/SquirrelCsvApp.cs – data editor with filtering, sorting, pagination, and CSV export
- squirrel/Apps/PhysicsSimulationApp.cs – chart and details view for brand counts

How to Run

Prerequisites: .NET 9.0 SDK
Navigate to this example:
```
cd squirrel
```
Restore dependencies:
```
dotnet restore
```
Run the application:
```
dotnet watch
```
Open your browser to the URL shown in the terminal (typically http://localhost:5010).

How to Deploy

Navigate to this example:
```
cd squirrel
```
Deploy to Ivy hosting:
```
ivy deploy
```

Learn More

Squirrel library: https://github.com/sudipto80/Squirrel
Ivy Documentation: https://docs.ivy.app

…roducts.csv in project

…roduct class from SquirrelCsvApp

…n Program.cs

…bility features

…eference for Squirrel.csproj

…V with visible columns and improved UI for column visibility management

…sorting functionality; add support for saving modified data back to the original file

…s from the original table, enhancing data integrity and filtering capabilities

…w for any version

…tering logic to use arrays for selected brands and categories

…o information and framework credits

Copilot

Pull Request Overview

This PR introduces a new example application that demonstrates integration between the Ivy Framework and the Squirrel library for CSV data manipulation. The application provides a data editor with filtering, sorting, pagination, and visualization capabilities for fashion product data.

Key Changes:

Adds a new Squirrel example project with CSV data processing capabilities
Implements interactive data filtering, sorting, column visibility, and CSV export
Includes data visualization with brand-level analysis charts

Reviewed Changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 15 comments.

Show a summary per file

File	Description
`squirrel/fashion_products.csv`	Sample dataset with 1000 fashion product records for the example
`squirrel/SquirrelExample.csproj`	Project configuration with .NET 9.0 and dependencies
`squirrel/README.md`	Documentation covering setup, features, and deployment
`squirrel/Program.cs`	Application entry point with server configuration
`squirrel/Models/FashionProduct.cs`	Data model for fashion product records
`squirrel/GlobalUsings.cs`	Global using directives for the project
`squirrel/Apps/SquirrelCsvApp.cs`	Main data editor with filtering and pagination
`squirrel/Apps/PhysicsSimulationApp.cs`	Chart visualization for brand analysis
`squirrel/.gitignore`	Git ignore patterns for build artifacts
`.devcontainer/squirrel/devcontainer.json`	GitHub Codespaces configuration for the example

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-11-06T12:38:21Z

packages-demos/squirrel/Apps/PhysicsSimulationApp.cs

+            | new Card(
+                Layout.Vertical()
+				| Text.H3("Squirrel Data Chart")
+				| Text.Muted($"Analysis of product quantities by brands and names ")


Grammatical error and trailing whitespace. The text "Analysis of product quantities by brands and names " should be "Analysis of product counts by brand and name" (singular forms are more appropriate, and remove trailing space).

Suggested change

| Text.Muted($"Analysis of product quantities by brands and names ")

| Text.Muted("Analysis of product counts by brand and name")

Copilot · 2025-11-06T12:38:21Z

packages-demos/squirrel/SquirrelExample.csproj

+  </ItemGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="C:\git\Squirrel\Squirrel\Squirrel\Squirrel.csproj" />


The hardcoded absolute path C:\git\Squirrel\Squirrel\Squirrel\Squirrel.csproj will not work in other development environments or on different machines. This should use a relative path or a more portable reference method.

Suggested change

<ProjectReference Include="C:\git\Squirrel\Squirrel\Squirrel\Squirrel.csproj" />

<ProjectReference Include="..\Squirrel\Squirrel.csproj" />

Copilot · 2025-11-06T12:38:22Z

packages-demos/squirrel/README.md

+- **Filter & Sort**: Interactive controls for rating, price, brand, category, and sort order
+- **Column Visibility**: Toggle which columns are shown/exported
+- **Export Filtered CSV**: Download the current filtered view
+- **Pagination**: Navigate results with page controls (default page size: 25)


The documentation states "default page size: 25" but the code sets pageSize = 20. These values should be consistent.

Suggested change

- **Pagination**: Navigate results with page controls (default page size: 25)

- **Pagination**: Navigate results with page controls (default page size: 20)

Copilot · 2025-11-06T12:38:22Z

packages-demos/squirrel/README.md

+- Chart built with Ivy `LineChart` using dimensions/measures
+- Key files:
+  - `squirrel/Apps/SquirrelCsvApp.cs` – data editor with filtering, sorting, pagination, and CSV export
+  - `squirrel/Apps/PhysicsSimulationApp.cs` – chart and details view for brand counts


The documentation references PhysicsSimulationApp.cs which is misleading given the file's actual content. Update to match the actual app name or the corrected filename if it's renamed.

Suggested change

- `squirrel/Apps/PhysicsSimulationApp.cs` – chart and details view for brand counts

- `squirrel/Apps/SquirrelBrandChartApp.cs` – chart and details view for brand counts

Copilot · 2025-11-06T12:38:22Z

packages-demos/squirrel/Apps/PhysicsSimulationApp.cs

+        var csvPath = Path.Combine(AppContext.BaseDirectory, "fashion_products.csv");
+
+        if (!File.Exists(csvPath))
+        {
+            return new Card(
+                Layout.Vertical()
+                | Text.H3("Error")
+                | Text.Muted($"CSV file not found: {csvPath}")


Call to 'System.IO.Path.Combine'.

Suggested change

var csvPath = Path.Combine(AppContext.BaseDirectory, "fashion_products.csv");

if (!File.Exists(csvPath))

{

return new Card(

Layout.Vertical()

| Text.H3("Error")

| Text.Muted($"CSV file not found: {csvPath}")

var baseDirPath = Path.Combine(AppContext.BaseDirectory, "fashion_products.csv");

var cwdPath = Path.Combine(Directory.GetCurrentDirectory(), "fashion_products.csv");

string? csvPath = null;

if (File.Exists(baseDirPath))

csvPath = baseDirPath;

else if (File.Exists(cwdPath))

csvPath = cwdPath;

if (csvPath == null)

{

return new Card(

Layout.Vertical()

| Text.H3("Error")

| Text.Muted($"CSV file not found in either location:\n{baseDirPath}\n{cwdPath}")

Copilot · 2025-11-06T12:38:24Z

packages-demos/squirrel/Apps/SquirrelCsvApp.cs

+            catch (Exception ex)
+            {
+                client.Error(ex);
+            }


Generic catch clause.

Suggested change

catch (Exception ex)

{

client.Error(ex);

}

catch (IOException ex)

{

client.Error(ex);

}

catch (UnauthorizedAccessException ex)

{

client.Error(ex);

}

catch (FormatException ex)

{

client.Error(ex);

}

Copilot · 2025-11-06T12:38:24Z

packages-demos/squirrel/Apps/SquirrelCsvApp.cs

+            catch (Exception ex)
+            {
+                client.Error(ex);
+            }


Generic catch clause.

Copilot · 2025-11-06T12:38:25Z

squirrel/Apps/SquirrelCsvApp.cs

+                    if (!string.IsNullOrEmpty(value))
+                        values.Add(value);
+                }
+                catch { }


Generic catch clause.

Suggested change

catch { }

catch (KeyNotFoundException ex)

{

Console.WriteLine($"Key not found: {ex.Message}");

}

catch (InvalidCastException ex)

{

Console.WriteLine($"Invalid cast: {ex.Message}");

}

catch (FormatException ex)

{

Console.WriteLine($"Format error: {ex.Message}");

}

Copilot · 2025-11-06T12:38:25Z

squirrel/Apps/SquirrelCsvApp.cs

+            {
+                object? V(string col)
+                {
+                    try { return table[r][col]; } catch { return null; }


Generic catch clause.

Suggested change

try { return table[r][col]; } catch { return null; }

try { return table[r][col]; }

catch (KeyNotFoundException) { return null; }

catch (IndexOutOfRangeException) { return null; }

catch (ArgumentException) { return null; }

Copilot · 2025-11-06T12:38:25Z

squirrel/Apps/SquirrelCsvApp.cs

+                var values = AllColumns.Select(col => 
+                {
+                    try { return EscapeCsvField(Convert.ToString(row[col])); }
+                    catch { return ""; }


Generic catch clause.

Suggested change

catch { return ""; }

catch (KeyNotFoundException) { return ""; }

catch (InvalidCastException) { return ""; }

catch (FormatException) { return ""; }

catch (Exception ex)

{

Console.Error.WriteLine($"Unexpected error exporting column '{col}': {ex}");

return "";

}

squirrel/Apps/PhysicsSimulationApp.cs

sudipto80 · 2025-11-07T07:35:34Z

packages-demos/squirrel/Apps/PhysicsSimulationApp.cs

+
+        // Create detailed data with brand breakdown for each product using Squirrel Table
+        // Use Squirrel Table's Rows collection to process data
+        var detailedData = new Dictionary<string, Dictionary<string, int>>();


This can be created using nested calls to SplitOn like this

var brands = fashions.SplitOn("Brand"); var detailedData = new Dictionary<string, Dictionary<string, int>>(); brands.Select(t => new { Brand = t.Key, Products = t.Value.SplitOn("Product Name") .Select(z => new { Product = z.Key, Count = z.Value.RowCount }) } ).ToList() .ForEach(z => { detailedData.Add(z.Brand, new Dictionary<string, int>()); foreach (var product in z.Products) { detailedData[z.Brand].Add(product.Product, product.Count); } });

sudipto80 · 2025-11-07T07:37:07Z

squirrel/Apps/PhysicsSimulationApp.cs

+            ? detailedData[selectedProduct.Value]
+            : new Dictionary<string, int>();
+
+        var brandNames = selectedProductData.Keys.OrderBy(b => b).ToList();


To get the values of a column, just use the column name as the index on the Squirrel.Table instance like

var brandNames = tab["Brand"]

ArtemLazarchuk · 2025-11-07T07:49:37Z

@sudipto80 Thank you for the feedback! I’ll fix it and let you know once it’s done.

… improve product selection logic

ArtemLazarchuk · 2025-11-07T11:07:08Z

@sudipto80 Could you please review it again?

sudipto80 · 2025-11-07T11:33:32Z

squirrel/Apps/SquirrelCsvApp.cs

+        }
+
+        // Convert Squirrel Table to List<FashionProduct>
+        List<FashionProduct> ConvertTableToProducts(Squirrel.Table table)


This function can be replaced with a call like this

var allProducts = RecordTable<FashionProduct>(table).Rows;

Please use Squirrel from the release https://github.com/sudipto80/Squirrel/releases/tag/1.0.4
The Nuget package is pretty old and doesn't have this new type (RecordTable<T>)

sudipto80 · 2025-11-07T11:36:20Z

packages-demos/squirrel/Apps/SquirrelCsvApp.cs

+        }
+
+        // Save Squirrel Table to CSV file
+        void SaveTableToFile(Squirrel.Table table, string filePath)


Squirrel provides a built in function to convert a Squirrel.Table instance to CSV file. It is called ToCsv
So essentially you can use that in this like this

var writer = new StreamWriter(filePath); writer.WriteLine(table.ToCsv()); // If you are not using 'using pattern' writer.Close();

sudipto80

I have left couple of more comments around converting Squirrel table to strongly typed collection of products and saving to CSV. There is a old cheatsheet created for Squirrel. Might help

Here is a cheatsheet. I created long time ago
https://www.slideshare.net/slideshow/squirrel-do-morewithlesscodelightcheatsheet/48221385

Here is the darker version
https://www.slideshare.net/slideshow/squirrel-do-morewithlesscodecheatsheet1/48185568

Also try this code with your fashion data (change the path) and use the latest release version. There will be a Nuget soon but the current Nuget is old

using Squirrel;

namespace IvyFashion;

class Program
{
    static void Main(string[] args)
    {
        var fashions = DataAcquisition.LoadCsv(
            @"/Users/sudiptamukherjee/Documents/GitHub/Squirrel/SquirrelSolution/IvyFashion/fashion.csv");
        
        // Brand and Product Counts

        var brands = fashions.SplitOn("Brand");
        
        // How many products are there for each brand
        brands.Select ( t =>
            {
                var prices = 
                    t.Value["Price"].Select(z => Convert.ToDecimal(z.Trim()))
                        .ToList();
                return new
                {
                    Brand = t.Key,
                    Count = t.Value.RowCount,
                    // Highest and lowest price item for this brand
                    HighestPrice = prices.Max(),
                    LowestPrice = prices.Min()
                };
            })
         //Create a new table with the new columns from the Select projection 
        .ToTableFromAnonList()
        .PrettyDump(header: "Brand and Product Counts", rowColor: ConsoleColor.Blue);
        
        
        // Filter by product then by size 
        fashions.Filter("Product Name", "Dress")
                .SortInThisOrder("Size", ["S","M","L","XL"])
                .PrettyDump(header: "Dress", rowColor: ConsoleColor.Magenta);
        
        // Filter on multiple columns 
        fashions.Filter("Brand", "Adidas")
                .Filter("Product Name", "Dress")
                .Filter("Size", "M")
                .PrettyDump(header: "Adidas Dress M", rowColor: ConsoleColor.Magenta);
        
        // You can also filter by regex. find anything that has the word "Women" in it
        fashions.FilterByRegex("Category", "Women")
            .SortBy("Rating", how: SortDirection.Descending)
            .PrettyDump(header: "Women's fashion", rowColor: ConsoleColor.Red);;
        
        // Add column programmatically 
        fashions.AddColumn(columnName: "ValueForMoney", formula: "[Rating]/[Price]", decimalDigits: 2);
        var valueForMoney = fashions.SortBy("ValueForMoney", how: SortDirection.Descending)
            // Pick the columns we want 
            .Pick("Product Name","Brand","Category","Price", "Rating", "ValueForMoney");
            // Dump to console 
            valueForMoney
                //Pick the top 15
                .Top(15)
                .PrettyDump(header: "Top 5 fashion for money", rowColor: ConsoleColor.Green);
            
            valueForMoney
                //Pick the bottom 15
                .Bottom(15)
                .PrettyDump(header: "Bottom 5 fashion for money", rowColor: ConsoleColor.DarkRed);
    }
}

ArtemLazarchuk · 2025-11-07T11:45:09Z

@sudipto80 Thanks for the hint! I’ll check it out and make use of it.

…pace folder path in devcontainer.json

…relCsvApp for improved readability and performance

… using Squirrel APIs for improved efficiency

ArtemLazarchuk · 2025-11-09T14:39:14Z

@sudipto80 could you please take another look?

I’ve addressed your comments, fixed those issues, and also added a demo application for the code you provided.

sudipto80

Looks great! Thanks!

ArtemLazarchuk · 2025-11-24T11:51:56Z

@rorychatt this is ready to merge

rorychatt · 2026-01-25T21:57:36Z

@ArtemLazarchuk a new sideproject.

can you, using ivy widget init, create an example external widget which is a "smart" table that has Squirrel logic?
and then in the same place we build a sample demo app using this new component.

@sudipto80 maybe you have suggestions on what this could be

ArtemLazarchuk added 16 commits November 4, 2025 16:04

feat: init ivy example squirrel and add package TableAPI

883dfac

feat: add global usings for System.IO and Squirrel; include fashion_p…

5fae1b7

…roducts.csv in project

feat: add global using for SquirrelExample.Models and remove FashionP…

d7828bc

…roduct class from SquirrelCsvApp

feat: update SquirrelCsvApp namespace and set it as the default app i…

7936e0b

…n Program.cs

feat: enhance SquirrelCsvApp with filtering, sorting, and column visi…

47c3760

…bility features

fix: correct NoWarn format in SquirrelExample.csproj and add ProjectR…

4d5aa56

…eference for Squirrel.csproj

feat: enhance SquirrelCsvApp to export filtered and sorted data to CS…

de066e7

…V with visible columns and improved UI for column visibility management

feat: refactor SquirrelCsvApp to improve CSV loading, filtering, and …

c8cc1d3

…sorting functionality; add support for saving modified data back to the original file

feat: refactor SquirrelCsvApp to retrieve unique brands and categorie…

2bfc99e

…s from the original table, enhancing data integrity and filtering capabilities

chore: update Ivy package reference in SquirrelExample.csproj to allo…

341c164

…w for any version

feat: enhance SquirrelCsvApp with pagination support and refactor fil…

d497804

…tering logic to use arrays for selected brands and categories

feat: update SquirrelCsvApp title and adjust pagination size; add dem…

13b6e97

…o information and framework credits

feat: improve better UI for "Squirrel Data Chart"

be7c041

feat: add devcontainer.json for squirrel

37a5b43

feat: add Codespaces link and use embed instead

87a9c81

feat: update README.md

c18886f

ArtemLazarchuk requested a review from rorychatt November 5, 2025 12:12

ArtemLazarchuk self-assigned this Nov 5, 2025

ArtemLazarchuk linked an issue Nov 5, 2025 that may be closed by this pull request

(squirrel): create an Ivy example #284

Open

rorychatt requested a review from Copilot November 6, 2025 12:32

rorychatt added this to Current Sprint Ivy Framework Nov 6, 2025

rorychatt moved this to In Progress in Current Sprint Ivy Framework Nov 6, 2025

Copilot AI reviewed Nov 6, 2025

View reviewed changes

sudipto80 reviewed Nov 7, 2025

View reviewed changes

squirrel/Apps/PhysicsSimulationApp.cs Outdated Show resolved Hide resolved

sudipto80 reviewed Nov 7, 2025

View reviewed changes

squirrel/Apps/PhysicsSimulationApp.cs Outdated Show resolved Hide resolved

sudipto80 reviewed Nov 7, 2025

View reviewed changes

ArtemLazarchuk added 2 commits November 7, 2025 12:28

feat: refactor PhysicsSimulationApp to streamline data processing and…

95cee83

… improve product selection logic

Merge branch 'main' into 284-squirrel-create-an-ivy-example

c742092

sudipto80 reviewed Nov 7, 2025

View reviewed changes

sudipto80 suggested changes Nov 7, 2025

View reviewed changes

rorychatt requested a review from sudipto80 November 8, 2025 09:54

ArtemLazarchuk added 6 commits November 8, 2025 14:51

chore: move Squirrel example files in packages-demos and update works…

cce6cca

…pace folder path in devcontainer.json

Merge branch 'main' into 284-squirrel-create-an-ivy-example

2cc8388

feat: simplify product conversion and CSV export in SquirrelCsvApp

2481abc

refactor: streamline GetUniqueValuesFromOriginalTable method in Squir…

5e9f149

…relCsvApp for improved readability and performance

refactor: optimize brand and product grouping in PhysicsSimulationApp…

3503eb8

… using Squirrel APIs for improved efficiency

feat: implement FashionAnalyticsApp to better demonstrate Squirrel API

eb4139f

sudipto80 approved these changes Nov 9, 2025

View reviewed changes

chore: update SquirrelExample project references adding TableAPI

bef5924

	\| Text.Muted($"Analysis of product quantities by brands and names ")
	\| Text.Muted("Analysis of product counts by brand and name")

	<ProjectReference Include="C:\git\Squirrel\Squirrel\Squirrel\Squirrel.csproj" />
	<ProjectReference Include="..\Squirrel\Squirrel.csproj" />

	- Pagination: Navigate results with page controls (default page size: 25)
	- Pagination: Navigate results with page controls (default page size: 20)

	- `squirrel/Apps/PhysicsSimulationApp.cs` – chart and details view for brand counts
	- `squirrel/Apps/SquirrelBrandChartApp.cs` – chart and details view for brand counts

-                catch { }
+                catch (KeyNotFoundException ex)
+                {
+                    Console.WriteLine($"Key not found: {ex.Message}");
+                }
+                catch (InvalidCastException ex)
+                {
+                    Console.WriteLine($"Invalid cast: {ex.Message}");
+                }
+                catch (FormatException ex)
+                {
+                    Console.WriteLine($"Format error: {ex.Message}");
+                }

-                    try { return table[r][col]; } catch { return null; }
+                    try { return table[r][col]; }
+                    catch (KeyNotFoundException) { return null; }
+                    catch (IndexOutOfRangeException) { return null; }
+                    catch (ArgumentException) { return null; }

-                    catch { return ""; }
+                    catch (KeyNotFoundException) { return ""; }
+                    catch (InvalidCastException) { return ""; }
+                    catch (FormatException) { return ""; }
+                    catch (Exception ex)
+                    {
+                        Console.Error.WriteLine($"Unexpected error exporting column '{col}': {ex}");
+                        return "";
+                    }

Conversation

ArtemLazarchuk commented Nov 5, 2025

Squirrel

One-Click Development Environment

Created Using Ivy

What This Application Does

Technical Implementation

How to Run

How to Deploy

Learn More

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Nov 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 6, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 6, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

sudipto80 Nov 7, 2025

Choose a reason for hiding this comment

Uh oh!

sudipto80 Nov 7, 2025

Choose a reason for hiding this comment

Uh oh!

ArtemLazarchuk commented Nov 7, 2025

Uh oh!

ArtemLazarchuk commented Nov 7, 2025

Uh oh!

sudipto80 Nov 7, 2025

Choose a reason for hiding this comment

Uh oh!

sudipto80 Nov 7, 2025

Choose a reason for hiding this comment

Uh oh!

sudipto80 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ArtemLazarchuk commented Nov 7, 2025

Uh oh!

ArtemLazarchuk commented Nov 9, 2025

Uh oh!

sudipto80 left a comment

Choose a reason for hiding this comment

Uh oh!

ArtemLazarchuk commented Nov 24, 2025

Uh oh!

rorychatt commented Jan 25, 2026

Uh oh!

Reviewers

sudipto80 left a comment •

edited

Loading