debug-mode

web/src/auth/AuthContext.tsx

@@ -11,11 +11,11 @@
  */
 
 import { AuthState, OktaAuth } from '@okta/okta-auth-js'
-import React, { createContext, useContext, useEffect, useState } from 'react'
 import { trackEvent } from '../components/ga4'
+import React, { createContext, useContext, useEffect, useState } from 'react'
 
 function decodeBase64(str: string) {
-  return window.atob(str);
+  return window.atob(str)
 }
 
 const isStaging = window.location.origin.includes('staging')
@@ -24,8 +24,8 @@ const oktaClientId = isStaging
   : decodeBase64('MG9hMjBkNm42amI2bkc1TW4waDg=')
 
 export const oktaAuth = new OktaAuth({
-  issuer: 'https://nubank.okta.com/oauth2/default',
-  clientId: oktaClientId,
+  issuer: 'https://dev-15036446.okta.com/oauth2/default',
+  clientId: '0oam2eo020yRwwPbu5d7',
   redirectUri: window.location.origin + '/login/callback',
   pkce: true,
   scopes: ['openid', 'profile', 'email'],
@@ -72,8 +72,8 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify(userInfo),
-          });
-          trackEvent('AuthContext', 'Login Successful', userInfo.email);
+          })
+          trackEvent('AuthContext', 'Login Successful', userInfo.email)
         } else {
           setUser(null)
         }

web/src/routes/column-level/ColumnLevel.tsx

@@ -10,7 +10,7 @@ import { ZoomControls } from './ZoomControls'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { createElkNodes } from './layout'
-import { fetchColumnLineage } from '../../store/actionCreators'
+import { fetchColumnLineage, resetColumnLineage } from '../../store/actionCreators'
 import { trackEvent } from '../../components/ga4'
 import { useCallbackRef } from '../../helpers/hooks'
 import { useParams, useSearchParams } from 'react-router-dom'
@@ -26,6 +26,7 @@ interface StateProps {
 
 interface DispatchProps {
   fetchColumnLineage: typeof fetchColumnLineage
+  resetColumnLineage: typeof resetColumnLineage
 }
 
 type ColumnLevelProps = StateProps & DispatchProps
@@ -35,6 +36,7 @@ const zoomOutFactor = 1 / zoomInFactor
 
 const ColumnLevel: React.FC<ColumnLevelProps> = ({
   fetchColumnLineage: fetchColumnLineage,
+  resetColumnLineage: resetColumnLineage,
   columnLineage: columnLineage,
   isLoading: isLoading,
 }: ColumnLevelProps) => {
@@ -46,6 +48,9 @@ const ColumnLevel: React.FC<ColumnLevelProps> = ({
     searchParams.get('withDownstream') === 'true'
   )
 
+  // Estado para controlar mudanças de dataset
+  const [prevDataset, setPrevDataset] = useState<string | null>(null)
+
   const graphControls = useRef<ZoomPanControls>()
 
   useEffect(() => {
@@ -54,9 +59,24 @@ const ColumnLevel: React.FC<ColumnLevelProps> = ({
 
   useEffect(() => {
     if (name && namespace) {
+      const currentDataset = `${namespace}:${name}`
+
+      // Se mudou de dataset, limpa o estado anterior
+      if (prevDataset && prevDataset !== currentDataset) {
+        console.log(
+          'Dataset changed from',
+          prevDataset,
+          'to',
+          currentDataset,
+          '- clearing previous lineage data'
+        )
+        resetColumnLineage()
+      }
+
+      setPrevDataset(currentDataset)
       fetchColumnLineage('DATASET', namespace, name, depth, withDownstream)
     }
-  }, [name, namespace, depth, withDownstream])
+  }, [name, namespace, depth, withDownstream, prevDataset])
 
   if (!columnLineage) {
     return <div />
@@ -167,6 +187,7 @@ const mapDispatchToProps = (dispatch: Redux.Dispatch) =>
   bindActionCreators(
     {
       fetchColumnLineage: fetchColumnLineage,
+      resetColumnLineage: resetColumnLineage,
     },
     dispatch
   )

web/src/routes/column-level/layout.ts

@@ -59,13 +59,27 @@ export const createElkNodes = (
 
   const graph = columnLineageGraph.graph.filter((node) => !!node.data)
 
+  // DEBUG: Log para verificar dados do backend
+  console.log('=== DEBUG COLUMN LINEAGE ===')
+  console.log(
+    'Raw graph from backend:',
+    graph.map((n) => `${n.data.namespace}:${n.data.dataset}`)
+  )
+
   const connectedNodes = findConnectedNodes(graph, currentColumn)
+  console.log(
+    'Connected nodes:',
+    connectedNodes.map((n) => `${n.data?.namespace}:${n.data?.dataset}`)
+  )
 
   for (const node of graph) {
     const namespace = node.data.namespace
     const dataset = node.data.dataset
     const column = node.data.field
 
+    // DEBUG: Log cada dataset sendo processado
+    console.log(`Processing dataset: ${namespace}:${dataset}`)
+
     edges.push(
       ...node.outEdges.map((edge) => {
         return {
@@ -82,6 +96,8 @@ export const createElkNodes = (
 
     const datasetNode = nodes.find((n) => n.id === `datasetField:${namespace}:${dataset}`)
     if (!datasetNode) {
+      // DEBUG: Log quando um novo dataset node é criado
+      console.log(`Creating new dataset node: ${namespace}:${dataset}`)
       nodes.push({
         id: `datasetField:${namespace}:${dataset}`,
         kind: 'dataset',
@@ -105,6 +121,8 @@ export const createElkNodes = (
         ],
       })
     } else {
+      // DEBUG: Log quando uma coluna é adicionada a um dataset existente
+      console.log(`Adding column to existing dataset: ${namespace}:${dataset} - column: ${column}`)
       datasetNode.children?.push({
         id: node.id,
         width: 200,
@@ -118,5 +136,12 @@ export const createElkNodes = (
       })
     }
   }
+
+  console.log(
+    'Final nodes created:',
+    nodes.map((n) => (n.data ? `${n.data.namespace}:${n.data.dataset}` : 'no data'))
+  )
+  console.log('=== END DEBUG ===')
+
   return { nodes, edges }
 }

web/src/routes/table-level/ActionBar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react'
+import { ArrowBackIosRounded, Refresh } from '@mui/icons-material'
 import {
   Box,
   CircularProgress,
@@ -8,14 +8,14 @@ import {
   Switch,
   TextField,
 } from '@mui/material'
-import { ArrowBackIosRounded, Refresh } from '@mui/icons-material'
 import { HEADER_HEIGHT, theme } from '../../helpers/theme'
-import { fetchLineage, fetchFilteredLineage } from '../../store/actionCreators'
+import { fetchFilteredLineage, fetchLineage } from '../../store/actionCreators'
 import { trackEvent } from '../../components/ga4'
 import { truncateText } from '../../helpers/text'
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
 import MQTooltip from '../../components/core/tooltip/MQTooltip'
 import MqText from '../../components/core/text/MqText'
+import React, { useCallback, useEffect, useState } from 'react'
 
 interface ActionBarProps {
   nodeType: 'DATASET' | 'JOB'
@@ -129,10 +129,8 @@ export const ActionBar = ({
 
     if (isFull === false) {
       fetchFilteredLineage(nodeType, namespace, name, requestedDepth)
-
     } else {
       fetchLineage(nodeType, namespace, name, requestedDepth, true)
-
     }
 
     setDepth(requestedDepth)
@@ -157,12 +155,15 @@ export const ActionBar = ({
     [setIsFull, searchParams, setSearchParams]
   )
 
-  const handleHideColumnNamesToggle = useCallback((checked: boolean) => {
-    setIsCompact(checked)
-    searchParams.set('isCompact', checked.toString())
-    setSearchParams(searchParams)
-    trackEvent('ActionBar', 'Toggle Hide Column Names', checked.toString())
-  }, [setIsCompact, searchParams, setSearchParams])
+  const handleHideColumnNamesToggle = useCallback(
+    (checked: boolean) => {
+      setIsCompact(checked)
+      searchParams.set('isCompact', checked.toString())
+      setSearchParams(searchParams)
+      trackEvent('ActionBar', 'Toggle Hide Column Names', checked.toString())
+    },
+    [setIsCompact, searchParams, setSearchParams]
+  )
 
   return (
     <Box
@@ -270,4 +271,4 @@ export const ActionBar = ({
       </Snackbar> */}
     </Box>
   )
-}
+}

web/src/store/actionCreators/actionTypes.ts

@@ -103,6 +103,7 @@ export const FETCH_COLUMN_LINEAGE_SUCCESS = 'FETCH_COLUMN_LINEAGE_SUCCESS'
 export const SET_COLUMN_LINEAGE_GRAPH_DEPTH = 'SET_COLUMN_LINEAGE_GRAPH_DEPTH'
 export const FETCH_COLUMN_LINEAGE_START = 'FETCH_COLUMN_LINEAGE_START'
 export const FETCH_COLUMN_LINEAGE_END = 'FETCH_COLUMN_LINEAGE_END'
+export const RESET_COLUMN_LINEAGE = 'RESET_COLUMN_LINEAGE'
 
 // lineage metrics
 export const FETCH_LINEAGE_METRICS = 'FETCH_LINEAGE_METRICS'

web/src/store/actionCreators/index.ts

@@ -549,6 +549,10 @@ export const resetLineage = () => ({
   type: actionTypes.RESET_LINEAGE,
 })
 
+export const resetColumnLineage = () => ({
+  type: actionTypes.RESET_COLUMN_LINEAGE,
+})
+
 export const setLineageGraphDepth = (depth: number) => ({
   type: actionTypes.SET_LINEAGE_GRAPH_DEPTH,
   payload: depth,

web/src/store/reducers/columnLineage.ts

@@ -6,6 +6,7 @@ import {
   FETCH_COLUMN_LINEAGE_END,
   FETCH_COLUMN_LINEAGE_START,
   FETCH_COLUMN_LINEAGE_SUCCESS,
+  RESET_COLUMN_LINEAGE,
 } from '../actionCreators/actionTypes'
 
 import { setBottomBarHeight, setColumnLineageGraphDepth, setSelectedNode } from '../actionCreators'
@@ -32,6 +33,8 @@ export default (state = initialState, action: IColumnLineageActions) => {
       return { ...state, isLoading: false }
     case FETCH_COLUMN_LINEAGE_SUCCESS:
       return { ...state, columnLineage: action.payload }
+    case RESET_COLUMN_LINEAGE:
+      return { ...initialState }
     default:
       return state
   }