Merge branch 'main' into demo

# Conflicts: # demo-project/.version
kedro-org · Nov 21, 2024 · 7acdba6 · 7acdba6
2 parents 7a53333 + eac8d39
commit 7acdba6
Show file tree

Hide file tree

Showing 236 changed files with 6,653 additions and 5,347 deletions.
diff --git a/.github/img/backend-architecture.png b/.github/img/backend-architecture.png
diff --git a/.github/img/frontend-architecture.png b/.github/img/frontend-architecture.png
diff --git a/.github/workflows/all-checks.yml b/.github/workflows/all-checks.yml
@@ -14,7 +14,7 @@ jobs:
     strategy:
       matrix:
         os: [ windows-latest, ubuntu-latest ]
-        python-version: [ "3.9", "3.10", "3.11" ]
+        python-version: [ "3.9", "3.10", "3.11", "3.12", "3.13" ]
     uses: ./.github/workflows/e2e-tests.yml
     with:
       os: ${{ matrix.os }}
@@ -24,7 +24,7 @@ jobs:
     strategy:
       matrix:
         os: [ windows-latest, ubuntu-latest ]
-        python-version: [ "3.9", "3.10", "3.11" ]
+        python-version: [ "3.9", "3.10", "3.11", "3.12", "3.13" ]
     uses: ./.github/workflows/unit-tests.yml
     with:
       os: ${{ matrix.os }}
@@ -34,7 +34,7 @@ jobs:
     strategy:
       matrix:
         os: [ ubuntu-latest ]
-        python-version: [ "3.9", "3.10", "3.11" ]
+        python-version: [ "3.9", "3.10", "3.11", "3.12", "3.13" ]
     uses: ./.github/workflows/lint.yml
     with:
       os: ${{ matrix.os }}

diff --git a/.github/workflows/build-backend.yml b/.github/workflows/build-backend.yml
@@ -17,7 +17,7 @@ jobs:
     strategy:
       matrix:
         os: [ windows-latest, ubuntu-latest ]
-        python-version: [ "3.9", "3.10", "3.11" ]
+        python-version: [ "3.9", "3.10", "3.11", "3.12", "3.13" ]
     uses: ./.github/workflows/e2e-tests.yml
     with:
       os: ${{ matrix.os }}
@@ -27,7 +27,7 @@ jobs:
     strategy:
       matrix:
         os: [ windows-latest, ubuntu-latest ]
-        python-version: [ "3.9", "3.10", "3.11" ]
+        python-version: [ "3.9", "3.10", "3.11", "3.12", "3.13" ]
     uses: ./.github/workflows/unit-tests.yml
     with:
       os: ${{ matrix.os }}
@@ -37,7 +37,7 @@ jobs:
     strategy:
       matrix:
         os: [ ubuntu-latest ]
-        python-version: [ "3.9", "3.10", "3.11" ]
+        python-version: [ "3.9", "3.10", "3.11", "3.12", "3.13" ]
     uses: ./.github/workflows/lint.yml
     with:
       os: ${{ matrix.os }}

diff --git a/.github/workflows/docs-only-checks.yml b/.github/workflows/docs-only-checks.yml
@@ -19,7 +19,7 @@ jobs:
     strategy:
       matrix:
         os: [ ubuntu-latest ]
-        python-version: ["3.9", "3.10", "3.11"]
+        python-version: ["3.9", "3.10", "3.11", "3.12", "3.13" ]
     uses: ./.github/workflows/lint.yml
     with:
       os: ${{ matrix.os }}

diff --git a/.github/workflows/label-community-issues.yml b/.github/workflows/label-community-issues.yml
@@ -0,0 +1,48 @@
+name: Label Community Issues
+
+on:
+  issues:
+    types:
+      - opened
+
+jobs:
+  label:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check if issue author is a member of Kedro org
+        uses: actions/github-script@v6
+        id: membership
+        with:
+          github-token: ${{ secrets.GH_TAGGING_TOKEN }}
+          result-encoding: string
+          script: |
+
+            try {
+              const result = await github.rest.orgs.getMembershipForUser({
+                       org: "kedro-org",
+                       username: '${{ github.actor }}'
+                    })
+
+              console.log(result?.data?.state)
+              if (result?.data?.state == "active"){
+                console.log("%s: detected as an active member of Kedro org", '${{ github.actor }}')
+                return "member";
+              } else {
+                console.log("%s: not detected as active member of Kedro org", '${{ github.actor }}')
+                return "notMember";
+              }
+
+            } catch (error) {
+              console.log("%s: Error occured and marked user as notMember", '${{ github.actor }}')
+              console.log("Error", error.stack);
+              console.log("Error", error.name);
+              console.log("Error", error.message);
+              return "notMember";
+            }
+
+      - name: Label issue if author is from community
+        if: ${{ steps.membership.outputs.result == 'notMember' }}
+        uses: actions-ecosystem/action-add-labels@v1
+        with:
+          github_token: ${{ secrets.GH_TAGGING_TOKEN }}
+          labels: 'Community'
diff --git a/.github/workflows/no-response.yml b/.github/workflows/no-response.yml
@@ -0,0 +1,20 @@
+name: No Response
+
+on:
+  issue_comment:
+    types: [created]
+  schedule:
+    # Run every day at 9am (UTC time)
+    - cron: '0 9 * * *'
+
+jobs:
+  noResponse:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: lee-dohm/[email protected]
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          responseRequiredLabel: "support: needs more info"
+          daysUntilClose: 28
+          closeComment: >-
+            This issue has been closed due to lack of information. Feel free to re-open this issue if you're facing a similar problem. Please provide as much information as possible so we can help resolve your issue.
diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md
@@ -6,6 +6,7 @@ For further information, see also:
 
 - [Kedro-Viz contributing documentation](CONTRIBUTING.md), which covers how to start development on the project
 - [Kedro-Viz style guide](STYLE_GUIDE.md), which walks through our standards and recommended best practices for our codebase
+- [Kedro-Viz Architecture Diagram](https://miro.com/app/board/uXjVKhNg1RE=/?moveToWidget=3458764606468376036&cot=10), to see a high level overview of both back-end and front-end and how they are connected.
 
 ## High-level Overview
 
@@ -62,7 +63,7 @@ The `localStorage` state is updated automatically on every Redux store update, v
 
 ## Data ingestion
 
-![Kedro-Viz data flow diagram](/.github/img/app-architecture-data-flow.png)
+![Kedro-Viz data flow diagram](/.github/img/frontend-architecture.png)
 
 Kedro-Viz currently utilizes two different methods of data ingestion: the Redux setup for the pipeline and flowchart-view related components, and GraphQL via Apollo Client for the experiment tracking components.
 
@@ -147,3 +148,9 @@ Kedro-Viz includes a graph layout engine, for details see the [layout engine doc
 Our layout engine runs inside a web worker, which asynchronously performs these expensive calculations in a separate CPU thread, in order to avoid this blocking other operations on the main thread (e.g. CSS transitions and other state updates).
 
 The app uses [redux-watch](https://github.com/ExodusMovement/redux-watch) with a graph input selector to watch the store for state changes relevant to the graph layout. If the layout needs to change, this listener dispatches an asynchronous action which sends a message to the web worker to instruct it to calculate the new layout. Once the layout worker completes its calculations, it returns a new action to update the store's `state.graph` property with the new layout. Updates to the graph input state during worker calculations will interrupt the worker and cause it to start over from scratch.
+
+## Backend Architecture
+
+![Kedro-Viz backend architecture](/.github/img/backend-architecture.png)
+
+The backend of Kedro-Viz serves as the data provider and API layer that interacts with Kedro projects and manages data access for visualisations in the frontend.  It offers both REST and GraphQL APIs to support data retrieval for the frontend, allowing access to pipeline structures, node-specific details, and experiment tracking data. Key components include the `DataAccessManager`, which interfaces with data `Repositories` to fetch and structure data. The CLI enables users launch with Kedro-Viz from the command line, while deploy and build options enables seamless sharing of pipeline visualisations on any static website hosting platform.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -139,6 +139,11 @@ Now you're ready to begin development. Start the development server:
 npm start
 ```
 
+> _*Note*_: If you face any issues running this, we recommend installing Node.js v18:
+> 
+> 1. Delete `package-lock.json` and `node_modules`.
+> 2. Run `npm install` to reinstall dependencies.
+
 This will serve the app at [localhost:4141](http://localhost:4141/), and watch files in `/src` for changes. It will also update the `/lib` directory, which contains a Babel-compiled copy of the source. This directory is exported to `npm`, and is used when importing as a React component into another application. It is updated automatically when you save in case you need to test/debug it locally (e.g. with `npm link`). You can also update it manually, by running
 
 ```bash
@@ -306,7 +311,7 @@ make pytest
 make e2e-tests
 ```
 
-#### Linting tests (`isort`, `black`, `pylint`, `flake8` and `mypy`)
+#### Linting tests (`ruff` linter and formatter, and `mypy`)
 
 ```bash
 make lint

diff --git a/Makefile b/Makefile
@@ -27,18 +27,15 @@ e2e-tests:
 lint: format-fix lint-check
 
 format-fix:
-	isort package/kedro_viz package/tests package/features
-	black package/kedro_viz package/tests package/features
+	ruff check --fix
+	ruff format
 
 format-check:
-	isort --check package/kedro_viz package/tests package/features
-	black --check package/kedro_viz package/tests package/features
+	ruff check
+	ruff format --check
 
 lint-check:
-	pylint --rcfile=package/.pylintrc -j 0 package/kedro_viz
-	pylint --rcfile=package/.pylintrc -j 0 --disable=protected-access,missing-docstring,redefined-outer-name,invalid-name,too-few-public-methods,no-member,unused-argument,duplicate-code,abstract-class-instantiated package/tests
-	pylint --rcfile=package/.pylintrc -j 0 --disable=missing-docstring,no-name-in-module,unused-argument package/features
-	flake8 --config=package/.flake8 package
+	ruff check
 	mypy --config-file=package/mypy.ini package/kedro_viz package/features
 	mypy --disable-error-code abstract --config-file=package/mypy.ini package/tests
 

diff --git a/README.npm.md b/README.npm.md
@@ -15,7 +15,7 @@ Live Demo: <a href="https://demo.kedro.org/" target="_blank">https://demo.kedro.
 
 <br />
 
-[![CircleCI](https://circleci.com/gh/kedro-org/kedro-viz/tree/main.svg?style=shield)](https://circleci.com/gh/kedro-org/kedro-viz/tree/main)
+[![GitHub Actions](https://img.shields.io/github/actions/workflow/status/kedro-org/kedro-viz/merge-gatekeeper.yml?label=Actions&logo=github)](https://github.com/kedro-org/kedro-viz/actions)
 [![Documentation](https://readthedocs.org/projects/kedro/badge/?version=stable)](https://docs.kedro.org/en/stable/visualisation/)
 [![Python Version](https://img.shields.io/badge/python-3.9%20%7C%203.10%20%7C%203.11-orange.svg)](https://pypi.org/project/kedro-viz/)
 [![PyPI version](https://img.shields.io/pypi/v/kedro-viz.svg?color=yellow)](https://pypi.org/project/kedro-viz/)
@@ -67,7 +67,7 @@ const MyApp = () => (
       options={/* Options to configure Kedro Viz */}
     />
   </div>
-); 
+);
 ```
 
 To use with NextJS:
@@ -89,7 +89,7 @@ The JSON can be obtained by running:
 kedro viz run --save-file=<path-to-save-kedro-viz-data-to-a-directory>
 ```
 
-On successful execution of the command above, it will generate a folder at the specified directory, containing the following structure: 
+On successful execution of the command above, it will generate a folder at the specified directory, containing the following structure:
 
 ```
 <filename>/api/
@@ -116,7 +116,7 @@ We also recommend wrapping the `Kedro-Viz` component with a parent HTML/JSX elem
 
 ## Configure Kedro-viz with `options`
 
-The example below demonstrates how to configure your kedro-viz using different `options`. 
+The example below demonstrates how to configure your kedro-viz using different `options`.
 
 ```
 <KedroViz
@@ -131,7 +131,7 @@ The example below demonstrates how to configure your kedro-viz using different `
         metadataPanel: true,
         miniMap: true,
         sidebar: true,
-        zoomToolbar: true,    
+        zoomToolbar: true,
       },
       expandAllPipelines: false,
       nodeType: {
@@ -140,41 +140,46 @@ The example below demonstrates how to configure your kedro-viz using different `
       tag: {
         enabled: {companies: true}
       },
+      behaviour: { 
+        reFocus: true,
+      },
       theme: "dark"
     }}
 />
 
 ```
 
-| 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 |
-| `globalNavigation` | boolean | true | Show/Hide global navigation |
-| `labelBtn` | boolean | true | Show/Hide label button |
-| `layerBtn` | boolean | true | Show/Hide layer button |
-| `metadataPanel` | boolean | true | Show/Hide Metadata Panel |
-| `miniMap` | boolean | true | Show/Hide Mini map and mini map button |
-| `sidebar` | boolean | true | Show/Hide Sidebar and action toolbar |
-| `zoomToolbar` | boolean | true | Show/Hide zoom-in, zoom-out and zoom reset buttons together |
-| options.expandAllPipelines | boolean | false | Expand/Collapse Modular pipelines on first load |
-| options.nodeType | `{disabled: {parameters: boolean,task: boolean,data: boolean}}` | `{disabled: {parameters: true,task: false,data: false}}` | Configuration for node type options |
-| options.tag | `{enabled: {<tagName>: boolean}}` | - | Configuration for tag options |
-| options.theme | string | dark | select `Kedro-Viz` theme : dark/light |
-
+| 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                                                                                                                                       |
+| `globalNavigation`         | boolean                                                                            | true                                                     | Show/Hide global navigation                                                                                                                                   |
+| `labelBtn`                 | boolean                                                                            | true                                                     | Show/Hide label button                                                                                                                                        |
+| `layerBtn`                 | boolean                                                                            | true                                                     | Show/Hide layer button                                                                                                                                        |
+| `metadataPanel`            | boolean                                                                            | true                                                     | Show/Hide Metadata Panel                                                                                                                                      |
+| `miniMap`                  | boolean                                                                            | true                                                     | Show/Hide Mini map and mini map button                                                                                                                        |
+| `sidebar`                  | boolean                                                                            | true                                                     | Show/Hide Sidebar and action toolbar                                                                                                                          |
+| `zoomToolbar`              | boolean                                                                            | true                                                     | Show/Hide zoom-in, zoom-out and zoom reset buttons together                                                                                                   |
+| options.expandAllPipelines | boolean                                                                            | false                                                    | Expand/Collapse Modular pipelines on first load                                                                                                               |
+| options.behaviour            |                                                                                    |                                                          |                                                                                                                                                               |
+| `reFocus`       | boolean                                                                            | true                                                     | In the flowchart, enable or disable the node re-focus behavior when clicking on nodes.
+ 
+| options.nodeType           | `{disabled: {parameters: boolean,task: boolean,data: boolean}}`                    | `{disabled: {parameters: true,task: false,data: false}}` | Configuration for node type options                                                                                                                           |
+| options.tag                | `{enabled: {<tagName>: boolean}}`                                                  | -                                                        | Configuration for tag options                                                                                                                                 |
+| options.theme              | string                                                                             | dark                                                     | select `Kedro-Viz` theme : dark/light                                                                                                                         |
 
 ### Note
+
 - `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.
 
 ![Kedro-Viz component annotation](https://raw.githubusercontent.com/kedro-org/kedro-viz/main/.github/img/kedro_viz_annotation.png)
 
-
 ## Standalone Example Repository
 
 We have created a [kedro-viz-standalone](https://github.com/kedro-org/kedro-viz-standalone.git) repository to demonstrate how to use Kedro-Viz in standalone mode or embedded in a React application.