release 10.0.0

Signed-off-by: rashidakanchwala <[email protected]>

.eslintrc.json

@@ -4,8 +4,7 @@
     "curly": ["error"],
     "valid-typeof": ["error"],
     "camelcase": "error",
-    "id-length": ["error", { "min": 3, "exceptions": ["_","a","b","d","e","i","j","k","x","y","id","el","pi","PI","up"] }],
-    "no-var": ["error"],
+"id-length": ["error", { "min": 3, "exceptions": ["_","a","b","d","e","i","j","k","x","y","id","el","pi","PI","up","to"] }],    "no-var": ["error"],
     "lines-between-class-members": ["error", "always"]
   }
 }

README.npm.md

@@ -149,6 +149,7 @@ The example below demonstrates how to configure your kedro-viz using different `
 | Name         | Type    | Default | Description |
 | ------------ | ------- | ------- | ----------- |
 | `data` | `{ edges: array (required), layers: array, nodes: array (required), tags: array }` | - | Pipeline data to be displayed on the chart |
+| `onActionCallback` | function | - | Callback function to be invoked when the specified action is dispatched. e.g. `const action = { type: NODE_CLICK, payload: node }; onActionCallback(action);`  |
 | options.display |  |  |  |
 | `expandPipelinesBtn` | boolean | true | Show/Hide expand pipelines button |
 | `exportBtn` | boolean | true | Show/Hide export button |
@@ -166,7 +167,8 @@ The example below demonstrates how to configure your kedro-viz using different `
 
 
 ### Note
-When `display.sidebar` is `false`, `display.miniMap` prop will be ignored.
+- `onActionCallback` callback is only called when the user clicks on a node in the flowchart, and we are passing the node object as the payload in the callback argument. In future releases, we will add more actions to be dispatched in this callback.
+- When `display.sidebar` is `false`, `display.miniMap` prop will be ignored.
 
 All components are annotated to understand their positions in the Kedro-Viz UI.
 

RELEASE.md

@@ -5,6 +5,33 @@ Please follow the established format:
 - Use present tense (e.g. 'Add new feature')
 - Include the ID number for the related PR (or PRs) in parentheses
 -->
+# Release 10.0.0
+
+## Major features and improvements
+
+- Add `kedro viz --lite`, allowing users to run Kedro-Viz without installing Kedro project dependencies. (#1966, #2077, #2093)
+- Enable visual slicing of a Kedro pipeline in Kedro-viz. (#2036)
+- Improve Kedro-Viz CLI startup time with lazy subcommands and deferring imports (#1920)
+- Add documentation for Kedro-viz in VSCode Extension. (#2078)
+
+
+## Bug fixes and other changes
+
+- Introduce `onActionCallback` prop in Kedro-Viz React component. (#2022)
+- Enhance documentation for Dataset previews on Kedro-viz. (#2074)
+- Add documentation for Kedro-viz CLI Commands. (#2044)
+- Fix design issues in metadata panel. (#2009)
+- Fix bug where reloading the page reset to the default pipeline instead of retaining the selected one. (#2041)
+- Add feedback component for slicing pipeline. (#2085)
+- Add `kedro viz --lite` user warning banner component. (#2092)
+- Add `UnavailableDataset` as a default dataset for `--lite` mode. (#2083)
+- Fix missing run command in metadata panel for task nodes. (#2055)
+- Fix highlight width inconsistency in the Nodelist component.(#2004)
+- Migrate `demo.kedro.org` from AWS Lightsail to Github Pages. (#2034, #2084)
+- Refactor disable preview feature to run entirely on the frontend without backend calls. (#2067)
+- Implement a method to send JSON data to the VSCode integration without running the Kedro-Viz server. (#2049)
+
+
 # Release 9.2.0
 
 ## Major features and improvements

cypress/fixtures/mock/compatibleMetadata.json

@@ -0,0 +1,15 @@
+{
+  "has_missing_dependencies": false,
+  "package_compatibilities": [
+    {
+      "package_name": "fsspec",
+      "package_version": "2023.9.1",
+      "is_compatible": true
+    },
+    {
+      "package_name": "kedro-datasets",
+      "package_version": "2.0.0",
+      "is_compatible": true
+    }
+  ]
+}

cypress/fixtures/mock/package-compatibilities-incompatible.json → cypress/fixtures/mock/inCompatibleMetadata.json

@@ -1,12 +1,15 @@
-[
-  {
+{
+  "has_missing_dependencies": true,
+  "package_compatibilities": [
+    {
       "package_name": "fsspec",
       "package_version": "2023.8.1",
       "is_compatible": false
-  },
-  {
+    },
+    {
       "package_name": "kedro-datasets",
       "package_version": "1.8.0",
       "is_compatible": false
-  }
-]
+    }
+  ]
+}

cypress/tests/ui/flowchart/banners.cy.js

@@ -0,0 +1,32 @@
+describe('Banners in Kedro-Viz', () => {
+  beforeEach(() => {
+    // Clears localStorage before each test
+    cy.clearLocalStorage();
+  });
+
+  it("shows a missing dependencies banner in viz lite mode if the kedro project dependencies are not installed.", () => {
+    // Intercept the network request to mock with a fixture
+    cy.__interceptRest__(
+      '/api/metadata',
+      'GET',
+      '/mock/inCompatibleMetadata.json'
+    ).as("appMetadata");
+
+    // Action
+    cy.reload();
+
+    // Assert after action
+    cy.get('[data-test="flowchart-wrapper--lite-banner"]').should('exist');
+    cy.get('.banner-message-body').should('contains.text', 'please install the missing Kedro project dependencies')
+    cy.get('.banner-message-title').should('contains.text', 'Missing dependencies')
+
+    // Test Learn more link
+    cy.get(".banner a")
+      .should("contains.attr", "href", "https://docs.kedro.org/projects/kedro-viz/en/latest/kedro-viz_visualisation.html#visualise-a-kedro-project-without-installing-project-dependencies");
+
+    // Close the banner
+    cy.get(".banner-close").click()
+    cy.get('[data-test="flowchart-wrapper--lite-banner"]').should('not.exist');
+
+  });
+});

cypress/tests/ui/flowchart/flowchart.cy.js

@@ -6,13 +6,14 @@ describe('Flowchart DAG', () => {
 
   beforeEach(() => {
     cy.enablePrettyNames(); // Enable pretty names using the custom command
+    cy.wait(500);
+    cy.get('.feature-hints__close').click(); // Close the feature hints so can click on a node
+    cy.wait(500);
   });
 
   it('verifies that users can expand a collapsed modular pipeline in the flowchart. #TC-23', () => {
     const modularPipelineText = 'feature_engineering';
-    const taskNodeText = 'Create Derived Features';
-
-    cy.enablePrettyNames();
+    const taskNodeText = 'create_derived_features';
 
     // Assert before action
     cy.get('.pipeline-node > .pipeline-node__text').should(

cypress/tests/ui/flowchart/menu.cy.js

@@ -1,10 +1,11 @@
 // All E2E Tests Related to Flowchart Menu goes here.
 
-import { prettifyName } from '../../../../src/utils';
-
 describe('Flowchart Menu', () => {
   beforeEach(() => {
     cy.enablePrettyNames(); // Enable pretty names using the custom command
+    cy.wait(500);
+    cy.get('.feature-hints__close').click(); // Close the feature hints so can click on a node
+    cy.wait(500);
   });
 
   it('verifies that users can select a section of the flowchart through the drop down. #TC-16', () => {
@@ -144,7 +145,7 @@ describe('Flowchart Menu', () => {
       .invoke('text')
       .then((focusedNodesText) =>
         expect(focusedNodesText.toLowerCase()).to.contains(
-          prettifyName(nodeToFocusText).toLowerCase()
+          nodeToFocusText
         )
       );
     cy.get('.pipeline-node--active > .pipeline-node__text').should(

cypress/tests/ui/flowchart/panel.cy.js

@@ -124,7 +124,7 @@ describe('Pipeline Minimap Toolbar', () => {
     cy.__waitForPageLoad__(() => {
       let initialZoomValue;
       let zoomInValue;
-
+      
       cy.get('@zoomScale')
         .invoke('text')
         .then((text) => {
@@ -155,6 +155,7 @@ describe('Pipeline Minimap Toolbar', () => {
       cy.get('@zoomScale')
         .invoke('text')
         .should((text) => {
+          initialZoomValue = parseFloat(text.replace('%', ''));
           expect(initialZoomValue).to.be.eq(parseFloat(text.replace('%', '')));
         });
     });

cypress/tests/ui/flowchart/shareable-urls.cy.js

@@ -7,9 +7,9 @@ describe('Shareable URLs with empty localStorage', () => {
   it('verifies that users can open the Deploy Kedro-Viz modal if the localStorage is empty. #TC-52', () => {
     // Intercept the network request to mock with a fixture
     cy.__interceptRest__(
-      '/api/package-compatibilities',
+      '/api/metadata',
       'GET',
-      '/mock/package-compatibilities-compatible.json'
+      '/mock/compatibleMetadata.json'
     );
 
     // Action
@@ -25,9 +25,9 @@ describe('Shareable URLs with empty localStorage', () => {
   it("shows an incompatible message given the user's fsspec package version is outdated. #TC-53", () => {
     // Intercept the network request to mock with a fixture
     cy.__interceptRest__(
-      '/api/package-compatibilities',
+      '/api/metadata',
       'GET',
-      '/mock/package-compatibilities-incompatible.json'
+      '/mock/inCompatibleMetadata.json'
     );
 
     // Action

demo-project/.version

@@ -1 +1 @@
-9.2.0
+10.0.0

demo-project/build/api/metadata

@@ -0,0 +1,15 @@
+{
+  "has_missing_dependencies": false,
+  "package_compatibilities": [
+    {
+      "package_name": "fsspec",
+      "package_version": "2024.6.1",
+      "is_compatible": true
+    },
+    {
+      "package_name": "kedro-datasets",
+      "package_version": "4.0.0",
+      "is_compatible": true
+    }
+  ]
+}

demo-project/lightsail.json

@@ -2,7 +2,7 @@
   "serviceName": "kedro-viz-live-demo",
   "containers": {
     "kedro-viz-live-demo": {
-      "image": "public.ecr.aws/g0x0s3o2/kedro-viz-live-demo:9.2.0",
+      "image": "public.ecr.aws/g0x0s3o2/kedro-viz-live-demo:10.0.0",
       "ports": {
         "4141": "HTTP"
       }