Merge d0a3420 into 89d7d28

Trrack · Mar 9, 2023 · 4a74edb · 4a74edb
2 parents 89d7d28 + d0a3420
commit 4a74edb
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 12 deletions.
diff --git a/.github/workflows/ci.yml → .github/workflows/build_test.yml b/.github/workflows/ci.yml → .github/workflows/build_test.yml
@@ -1,9 +1,24 @@
-name: Test and Build
+name: Build -> Test
 
-on: [push, pull_request]
+on:
+  push:
+    branches-ignore:
+      - main
+      - next
+      - alpha
+      - beta
+      - '*.x*'
+  pull_request:
+    branches:
+      - main
+      - next
+      - alpha
+      - beta
+      - '*.x*'
 
 jobs:
   build-test:
+    name: Build -> Test
     runs-on: ubuntu-latest
 
     steps:
@@ -43,8 +58,11 @@ jobs:
         if: steps.yarn-cache.outputs.cache-hit != 'true'
         run: yarn install
 
+      - name: Build
+        run: |
+          RUN=CI yarn nx affected --target=lint
+          RUN=CI yarn run build-affected-libs
+
       - name: Test
         run: |
           RUN=CI yarn nx affected --target=test --parallel 5
-          yarn nx affected --target=lint
-          yarn nx affected --target=build --prod
diff --git a/.github/workflows/chromatic-comment.yml b/.github/workflows/chromatic-comment.yml
@@ -0,0 +1,12 @@
+name: Add chromatic comment
+on: pull_request
+jobs:
+  chromatic-review-url:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: wow-actions/auto-comment@v1
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          pullRequestOpened: |
+            👋 @{{ author }}
+            Review your pull request on chromatic: https://www.chromatic.com/pullrequest?appId=63ee57592a53ae7413d27e43&number={{ payload.number }}
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -9,6 +9,7 @@ on: pull_request
 # List of jobs
 jobs:
   chromatic-deployment:
+    name: 'Chromatic Deployment'
     # Operating System
     runs-on: ubuntu-latest
     # Job steps
@@ -17,13 +18,32 @@ jobs:
         uses: actions/checkout@v3
         with:
           fetch-depth: 0 # 👈 Required to retrieve git history
+
       - name: Setup LTS Node
         uses: actions/setup-node@v3
         with:
           node-version: 'lts/*'
+          cache: 'yarn'
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
+
+      - name: Cache yarn dependencies
+        uses: actions/cache@v3
+        id: yarn-cache
+        with:
+          path: |
+            ${{ steps.yarn-cache-dir-path.outputs.dir }}
+            **\node_modules
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
       - name: Install dependencies
-        # 👇 Install dependencies with the same package manager used in the project (replace it as needed), e.g. yarn, npm, pnpm
-        run: yarn
+        if: steps.yarn-cache.outputs.cache-hit != 'true'
+        run: yarn install
+
         # 👇 Adds Chromatic as a step in the workflow
       - name: Publish to Chromatic
         env:

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -1,15 +1,24 @@
-name: Release
+name: Build -> Test -> Release
 
 on:
   push:
-    branches: [main, alpha, beta]
+    branches:
+      - main
+      - next
+      - alpha
+      - beta
+      - '*.x*'
 
 env:
   HUSKY: 0
+  GIT_AUTHOR_NAME: kirangadhave
+  GIT_AUTHOR_EMAIL: kirangadhave2@gmail.com
+  GIT_COMMITTER_NAME: kirangadhave
+  GIT_COMMITTER_EMAIL: kirangadhave2@gmail.com
 
 jobs:
   release:
-    name: Release
+    name: Build -> Test -> Release
     runs-on: ubuntu-latest
 
     steps:
@@ -60,6 +69,10 @@ jobs:
         run: |
           RUN=CI yarn run build-affected-libs
 
+      - name: Test
+        run: |
+          RUN=CI yarn run test-affected-libs
+
       - name: Release
         if: ${{ success() && (github.event_name != 'pull_request' || github.event.action == 'closed' && github.event.pull_request.merged == true) }}
         env:

diff --git a/README.md b/README.md
@@ -9,7 +9,10 @@
 [![license](https://img.shields.io/github/license/trrack/trrackvis?style=plastic)](https://github.com/Trrack/trrackvis/blob/main/LICENSE)
 [![npm latest version](https://img.shields.io/npm/v/@trrack/vis-react?style=plastic)](https://www.npmjs.com/package/@trrack/vis-react)
 [![npm downloads](https://img.shields.io/npm/dt/@trrack/vis-react?style=plastic)](https://www.npmjs.com/package/@trrack/vis-react)
-[![Github Action](https://img.shields.io/github/actions/workflow/status/trrack/trrackvis/release.yml?branch=main)](https://github.com/Trrack/trrackvis/actions/workflows/release.yml?query=branch%3Amain)
+[![github-action-build](https://img.shields.io/github/actions/workflow/status/trrack/trrackvis/release.yml?branch=main)](https://github.com/Trrack/trrackvis/actions/workflows/release.yml?query=branch%3Amain)
+[![storybook](https://img.shields.io/badge/storybook-latest-blueviolet)](https://main--63ee57592a53ae7413d27e43.chromatic.com)
+[![chromatic-library](https://img.shields.io/badge/chromatic--library-latest-ff69b4)](https://www.chromatic.com/library?appId=63ee57592a53ae7413d27e43&branch=main)
+
 
 ## Understand this workspace
 

diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "nx-migrate": "nx migrate --run-migrations --create-commits && rm -rf migrations.json && git add . && git commit -m 'chore: [nx migration] remove migrations.json'",
     "eslint:fix": "eslint --fix",
     "build-affected-libs": "nx affected:build --exclude $(nx print-affected --type=app --select=projects)",
+    "test-affected-libs": "nx affected --target=test --exclude $(nx print-affected --type=app --select=projects)",
     "release": "nx affected --target=release --exclude $(nx print-affected --type=app --select=projects)",
     "build-storybook": "nx build-storybook react",
     "chromatic": "npx chromatic --project-token=0819d33a1a7a"

diff --git a/packages/react/src/components/Tree.tsx b/packages/react/src/components/Tree.tsx
@@ -1,6 +1,6 @@
 import { BaseArtifactType, NodeId, ProvenanceNode } from '@trrack/core';
 import * as d3 from 'd3';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { animated, easings, useSpring } from 'react-spring';
 import { AnimatedIcon } from './AnimatedIcon';
 import { AnimatedLine } from './AnimatedLine';
@@ -24,7 +24,7 @@ export function Tree<T, S extends string, A extends BaseArtifactType<any>>({
 }) {
     const [hoverNode, setHoverNode] = useState<NodeId | null>(null);
     const [xPan, setXPan] = useState<number>(0);
-
+    const scrollRef = useRef<HTMLDivElement>(null);
     useEffect(() => {
         setXPan(0);
     }, [currentNode]);
@@ -252,8 +252,34 @@ export function Tree<T, S extends string, A extends BaseArtifactType<any>>({
         d3.select<SVGGElement, any>(`#panLayer`).call(zoom as any);
     }, [maxWidth, config, currentNode]);
 
+    const nodeCount = Object.keys(nodes).length;
+
+    useEffect(() => {
+        if (!scrollRef.current) {
+            return;
+        }
+
+        const currNodeHeight = nodes[currentNode].depth * config.verticalSpace;
+        const scrollPos = scrollRef.current.scrollTop;
+        const divHeight = scrollRef.current.clientHeight;
+
+        if (
+            scrollRef.current &&
+            currNodeHeight > scrollPos + divHeight - config.verticalSpace
+        ) {
+            scrollRef.current.scrollTo(
+                0,
+                currNodeHeight -
+                    divHeight +
+                    config.verticalSpace +
+                    config.marginTop
+            );
+        }
+    }, [nodeCount, config.marginTop, config.verticalSpace, nodes, currentNode]);
+
     return (
         <div
+            ref={scrollRef}
             style={{
                 display: 'flex',
                 height: '100%',