diff --git a/src/actions/index.js b/src/actions/index.js index e169c38900..43583214a2 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -326,36 +326,6 @@ export function toggleBookmark(bookmark, runId) { }; } -export const UPDATE_RUN_TITLE = 'UPDATE_RUN_TITLE'; - -/** - * Update Run title - * @param {String} title - * @param {string} runId - */ -export function updateRunTitle(title, runId) { - return { - type: UPDATE_RUN_TITLE, - title, - runId, - }; -} - -export const UPDATE_RUN_NOTES = 'UPDATE_RUN_NOTES'; - -/** - * Update Run Notes - * @param {String} notes - * @param {string} runId - */ -export function updateRunNotes(notes, runId) { - return { - type: UPDATE_RUN_NOTES, - notes, - runId, - }; -} - export const UPDATE_STATE_FROM_OPTIONS = 'UPDATE_STATE_FROM_OPTIONS'; /** diff --git a/src/components/app/app.scss b/src/components/app/app.scss index bd53527605..7968fa1624 100644 --- a/src/components/app/app.scss +++ b/src/components/app/app.scss @@ -25,24 +25,6 @@ --color-base-20: #{colors.$grey-300}; --color-black-10: #{colors.$white-200}; --color-border-line: #{colors.$white-500}; - - // Experiment tracking colors below - --color-exp-tracking-bg: #{colors.$white-0}; - --color-exp-tracking-metadata: #{colors.$white-0}; - --color-exp-tracking-datasets: #{colors.$white-100}; - --color-metrics-plot-text: #{colors.$grey-200}; - --color-metrics-plot-text-bold: #{colors.$black-900}; - --color-metrics-plot-axis-ends: #{colors.$grey-800}; - --color-metrics-plot-parallel-coords-line: #{colors.$white-200}; - --color-metrics-plot-parallel-coords-line-hover: #{colors.$black-0}; - --color-metrics-plot-parallel-coords-axis-hover: #{colors.$grey-800}; - --color-metrics-plot-tooltip-value: #{colors.$white-0}; - --color-metrics-plot-tooltip-label: #{colors.$grey-300}; - --color-metrics-plot-time-series-metric-line: #{colors.$grey-200}; - --color-metrics-plot-time-series-axis: #{colors.$grey-300}; - --color-metrics-plot-time-series-run-line: #{colors.$grey-100}; - --color-metrics-plot-time-series-run-line-hovered: #{colors.$black-0}; - --color-metrics-plot-time-series-dotted-line: #{colors.$grey-600}; } .kui-theme--dark { @@ -67,24 +49,6 @@ --color-run-list-hover: #{colors.$slate-0}; --color-base-20: #{colors.$grey-800}; --color-black-10: #{colors.$slate-700}; - - // Experiment tracking colors below - --color-exp-tracking-bg: #{colors.$slate-900}; - --color-exp-tracking-metadata: #{colors.$slate-800}; - --color-exp-tracking-datasets: #{colors.$black-850}; - --color-metrics-plot-text: #{colors.$grey-900}; - --color-metrics-plot-text-bold: #{colors.$white-0}; - --color-metrics-plot-axis-ends: #{colors.$grey-300}; - --color-metrics-plot-parallel-coords-line: #{colors.$slate-300}; - --color-metrics-plot-parallel-coords-line-hover: #{colors.$grey-400}; - --color-metrics-plot-parallel-coords-axis-hover: #{colors.$white-900}; - --color-metrics-plot-tooltip-value: #{colors.$black-900}; - --color-metrics-plot-tooltip-label: #{colors.$black-500}; - --color-metrics-plot-time-series-metric-line: #{colors.$grey-700}; - --color-metrics-plot-time-series-axis: #{colors.$grey-900}; - --color-metrics-plot-time-series-run-line: #{colors.$slate-200}; - --color-metrics-plot-time-series-run-line-hovered: #{colors.$white-0}; - --color-metrics-plot-time-series-dotted-line: #{colors.$grey-500}; } .kedro { diff --git a/src/components/experiment-warning/experiment-warning.js b/src/components/experiment-warning/experiment-warning.js deleted file mode 100644 index 603b345853..0000000000 --- a/src/components/experiment-warning/experiment-warning.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; - -import './experiment-warning.scss'; - -const ExperimentWarning = ({ title, subTitle }) => ( -
-

{title}

-

{subTitle}

-
-); - -export default ExperimentWarning; diff --git a/src/components/experiment-warning/experiment-warning.scss b/src/components/experiment-warning/experiment-warning.scss deleted file mode 100644 index 8729cf31ae..0000000000 --- a/src/components/experiment-warning/experiment-warning.scss +++ /dev/null @@ -1,24 +0,0 @@ -.experiment-warning__wrapper { - align-items: center; - display: flex; - flex-direction: column; - height: 70%; - justify-content: center; - width: 85%; - font-size: 16px; -} - -.experiment-warning__title { - font-size: 2.5em; - font-weight: 400; - line-height: 1.75em; - margin: 0; - margin-bottom: 10px; -} - -.experiment-warning__subtitle { - font-size: 1em; - font-weight: 400; - line-height: 1.25em; - margin: 0; -} diff --git a/src/components/experiment-warning/index.js b/src/components/experiment-warning/index.js deleted file mode 100644 index af3e7a79e0..0000000000 --- a/src/components/experiment-warning/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import ExperimentWarning from './experiment-warning'; - -export default ExperimentWarning; diff --git a/src/components/flowchart-wrapper/flowchart-wrapper.js b/src/components/flowchart-wrapper/flowchart-wrapper.js index f6f5bfc167..f09470a6a4 100644 --- a/src/components/flowchart-wrapper/flowchart-wrapper.js +++ b/src/components/flowchart-wrapper/flowchart-wrapper.js @@ -1,5 +1,5 @@ import React, { useState, useEffect, useCallback, useRef } from 'react'; -import { useHistory, useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom'; import { connect } from 'react-redux'; import classnames from 'classnames'; import { isLoading } from '../../selectors/loading'; @@ -24,13 +24,9 @@ import MetaData from '../metadata'; import MetadataModal from '../metadata-modal'; import ShareableUrlMetadata from '../shareable-url-modal/shareable-url-metadata'; import Sidebar from '../sidebar'; -import Button from '../ui/button'; -import CircleProgressBar from '../ui/circle-progress-bar'; import { loadLocalStorage, saveLocalStorage } from '../../store/helpers'; import { errorMessages, - linkToFlowchartInitialVal, - localStorageFlowchartLink, localStorageName, localStorageBannerStatus, params, @@ -54,7 +50,6 @@ export const FlowChartWrapper = ({ displaySidebar, graph, loading, - metadataVisible, modularPipelinesTree, nodes, onToggleFocusMode, @@ -72,7 +67,6 @@ export const FlowChartWrapper = ({ displayExportBtn, displayBanner, }) => { - const history = useHistory(); const { pathname, search } = useLocation(); const searchParams = new URLSearchParams(search); const { toSetQueryParam } = useGeneratePathname(); @@ -81,10 +75,6 @@ export const FlowChartWrapper = ({ const [isInvalidUrl, setIsInvalidUrl] = useState(false); const [usedNavigationBtn, setUsedNavigationBtn] = useState(false); - const [counter, setCounter] = useState(60); - const [goBackToExperimentTracking, setGoBackToExperimentTracking] = - useState(false); - const graphRef = useRef(null); const { @@ -232,10 +222,6 @@ export const FlowChartWrapper = ({ }; }, [handlePopState]); - useEffect(() => { - setGoBackToExperimentTracking(loadLocalStorage(localStorageFlowchartLink)); - }, []); - /** * To handle redirecting to a different location via the URL (e.g. selectedNode, * focusNode, etc.) we only need to call the matchPath actions when: @@ -280,37 +266,6 @@ export const FlowChartWrapper = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [graph, usedNavigationBtn, isInvalidUrl]); - const resetLinkingToFlowchartLocalStorage = useCallback(() => { - saveLocalStorage(localStorageFlowchartLink, linkToFlowchartInitialVal); - - setGoBackToExperimentTracking(linkToFlowchartInitialVal); - }, []); - - useEffect(() => { - if (goBackToExperimentTracking?.showGoBackBtn) { - const timer = - counter > 0 && setInterval(() => setCounter(counter - 1), 1000); - - if (counter === 0) { - resetLinkingToFlowchartLocalStorage(); - } - - return () => clearInterval(timer); - } - }, [ - counter, - goBackToExperimentTracking?.showGoBackBtn, - resetLinkingToFlowchartLocalStorage, - ]); - - const onGoBackToExperimentTrackingHandler = () => { - const url = goBackToExperimentTracking.fromURL; - - history.push(url); - - resetLinkingToFlowchartLocalStorage(); - }; - const handleBannerClose = (bannerKey) => { saveLocalStorage(localStorageBannerStatus, { [bannerKey]: false }); }; @@ -355,21 +310,6 @@ export const FlowChartWrapper = ({
-
- -
{ const { toSelectedPipeline } = useGeneratePathname(); - const { toExperimentTrackingPath, toMetricsViewPath } = - useGeneratePathnameForExperimentTracking(); // Hide code panel when selected metadata changes useEffect(() => onToggleCode(false), [metadata, onToggleCode]); @@ -321,23 +315,6 @@ const MetaData = ({ )} - {isRunningLocally() - ? hasTrackingData && ( - - ) - : null} {hasTablePreview && ( <>
diff --git a/src/components/metadata/metadata.test.js b/src/components/metadata/metadata.test.js index 849d8cc3e4..5147b9918e 100644 --- a/src/components/metadata/metadata.test.js +++ b/src/components/metadata/metadata.test.js @@ -425,13 +425,6 @@ describe('MetaData', () => { expect.stringContaining('3 items') ); }); - it('shows the experiment link', () => { - const wrapper = mount({ - nodeId: modelInputDatasetNodeId, - mockMetadata: nodeMetricsData, - }); - expect(wrapper.find('.pipeline-metadata__link').length).toBe(1); - }); }); describe('JSON dataset nodes', () => { @@ -445,13 +438,6 @@ describe('MetaData', () => { expect.stringContaining('3 items') ); }); - it('shows the experiment link', () => { - const wrapper = mount({ - nodeId: modelInputDatasetNodeId, - mockMetadata: nodeJSONData, - }); - expect(wrapper.find('.pipeline-metadata__link').length).toBe(1); - }); }); describe('Plot nodes', () => { diff --git a/src/components/primary-toolbar/primary-toolbar.js b/src/components/primary-toolbar/primary-toolbar.js index a286d7eeaa..b66af19f7d 100644 --- a/src/components/primary-toolbar/primary-toolbar.js +++ b/src/components/primary-toolbar/primary-toolbar.js @@ -6,7 +6,7 @@ import MenuIcon from '../icons/menu'; import './primary-toolbar.scss'; /** - * Toolbar to house buttons that controls display options for the main panel (flowchart, experiment details, etc) + * Toolbar to house buttons that controls display options for the main panel (flowchart, etc) * @param {JSX} children The content to be rendered within the toolbar * @param {Function} onToggleSidebar Handle toggling of sidebar collapsable view * @param {Boolean} visible Handle display of tooltip text in relation to collapsable view diff --git a/src/components/sidebar/sidebar.scss b/src/components/sidebar/sidebar.scss index 2575bcb166..8973075730 100644 --- a/src/components/sidebar/sidebar.scss +++ b/src/components/sidebar/sidebar.scss @@ -61,10 +61,6 @@ visibility: visible; transition: visibility 0s; } - - &--experiment-tracking { - overflow-y: scroll; - } } .pipeline-toolbar { diff --git a/src/config.js b/src/config.js index 425a4500eb..bb0773a105 100644 --- a/src/config.js +++ b/src/config.js @@ -3,7 +3,6 @@ import { sanitizedPathname } from './utils'; export const localStorageName = 'KedroViz'; export const localStorageFlowchartLink = 'KedroViz-link-to-flowchart'; export const localStorageMetricsSelect = 'KedroViz-metrics-chart-select'; -export const localStorageRunsMetadata = 'KedroViz-runs-metadata'; export const localStorageShareableUrl = 'KedroViz-shareable-url'; export const localStorageFeedbackSeen = 'KedroViz-feedback-seen'; export const localStorageBannerStatus = 'KedroViz-banners'; @@ -123,19 +122,12 @@ export const routes = { selectedName: `${pathname}?${activePipeline}&${params.selectedName}=:fullName`, selectedPipeline: `${pathname}?${activePipeline}`, }, - experimentTracking: { - main: `${pathname}experiment-tracking`, - selectedView: `${pathname}experiment-tracking?${params.view}=:view`, - selectedRuns: `${pathname}experiment-tracking?${params.run}=:ids&${params.view}=:view&${params.comparisonMode}=:isComparison`, - }, }; export const errorMessages = { node: 'Please check the value of "selected_id"/"sid" or "selected_name"/"sn" in the URL', modularPipeline: 'Please check the value of "focused_id"/"fid" in the URL', pipeline: 'Please check the value of "pipeline_id"/"pid" in the URL', - experimentTracking: `Please check the spelling of "run_ids" or "view" or "comparison" in the URL. It may be a typo 😇`, - runIds: `Please check the value of "run_ids" in the URL. Perhaps you've deleted the entity 🙈 or it may be a typo 😇`, }; export const datasetStatLabels = ['rows', 'columns', 'file_size']; @@ -167,9 +159,6 @@ export const inputKeyToStateKeyMap = { endpoint: 'hasEndpoint', }; -export const RUN_TITLE = 'title'; -export const RUN_NOTES = 'notes'; - export const PACKAGE_FSSPEC = 'fsspec'; export const PACKAGE_KEDRO_DATASETS = 'kedro-datasets'; diff --git a/src/reducers/index.js b/src/reducers/index.js index 79af193f24..4af8356df6 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -1,5 +1,4 @@ import { combineReducers } from 'redux'; -import runsMetadata from './runs-metadata'; import flags from './flags'; import graph from './graph'; import layer from './layers'; @@ -84,7 +83,6 @@ const combinedReducer = combineReducers({ tag, modularPipeline, visible, - runsMetadata, showBanner: bannerReducer, // These props don't have any actions associated with them display: createReducer(null), diff --git a/src/reducers/runs-metadata.js b/src/reducers/runs-metadata.js deleted file mode 100644 index 2440779459..0000000000 --- a/src/reducers/runs-metadata.js +++ /dev/null @@ -1,39 +0,0 @@ -import { - TOGGLE_BOOKMARK, - UPDATE_RUN_TITLE, - UPDATE_RUN_NOTES, -} from '../actions'; - -function runsMetadataReducer(runsMetadataState = {}, action) { - switch (action.type) { - case TOGGLE_BOOKMARK: { - return Object.assign({}, runsMetadataState, { - [action.runId]: { - ...runsMetadataState[action.runId], - bookmark: action.bookmark, - }, - }); - } - case UPDATE_RUN_TITLE: { - return Object.assign({}, runsMetadataState, { - [action.runId]: { - ...runsMetadataState[action.runId], - title: action.title, - }, - }); - } - case UPDATE_RUN_NOTES: { - return Object.assign({}, runsMetadataState, { - [action.runId]: { - ...runsMetadataState[action.runId], - notes: action.notes, - }, - }); - } - - default: - return runsMetadataState; - } -} - -export default runsMetadataReducer; diff --git a/src/store/initial-state.js b/src/store/initial-state.js index 60f2423310..f45a8ca9fa 100644 --- a/src/store/initial-state.js +++ b/src/store/initial-state.js @@ -7,7 +7,6 @@ import { settings, sidebarWidth, localStorageName, - localStorageRunsMetadata, params, BANNER_KEYS, } from '../config'; @@ -62,7 +61,6 @@ export const createInitialState = () => ({ reFocus: true, }, zoom: {}, - runsMetadata: {}, }); export const parseUrlParameters = () => { @@ -167,18 +165,17 @@ const applyUrlParametersToNonPipelineState = (state, urlParams) => { */ export const mergeLocalStorage = (state) => { const localStorageState = loadLocalStorage(localStorageName); - const localStorageRunsMetadataState = loadLocalStorage( - localStorageRunsMetadata - ); + Object.keys(localStorageState).forEach((key) => { if (!(key in state)) { delete localStorageState[key]; } }); + const allLocalStorageState = { ...localStorageState, - ...{ runsMetadata: localStorageRunsMetadataState }, }; + return deepmerge(state, allLocalStorageState); }; diff --git a/src/store/store.js b/src/store/store.js index 8013c2f8e5..8a70c9e807 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -5,7 +5,7 @@ import reducer from '../reducers'; import { getGraphInput } from '../selectors/layout'; import { calculateGraph } from '../actions/graph'; import { saveLocalStorage, pruneFalseyKeys } from './helpers'; -import { localStorageName, localStorageRunsMetadata } from '../config'; +import { localStorageName } from '../config'; import createCallbackMiddleware from './middleware'; /** @@ -62,9 +62,6 @@ const saveStateToLocalStorage = (state) => { flags: state.flags, expandAllPipelines: state.expandAllPipelines, }); - - // Store Run's metadata to localstorage - saveLocalStorage(localStorageRunsMetadata, state.runsMetadata); }; /** diff --git a/src/utils/experiment-tracking-utils.js b/src/utils/experiment-tracking-utils.js deleted file mode 100644 index 617cf11409..0000000000 --- a/src/utils/experiment-tracking-utils.js +++ /dev/null @@ -1,85 +0,0 @@ -/** - * Take a value and return a meaningful value for display on experiment tracking tables - * @param {value} value The value to be sanitized - * @returns A sanitized value - */ -export const sanitizeValue = (value) => { - if (value === '' || value === null || value === undefined) { - return '-'; - } else if (typeof value === 'object' || typeof value === 'boolean') { - return JSON.stringify(value); - } - - return value; -}; - -/** - * Takes a set of run metadata and run tracking data to construct the array object for csv export - * @param {Array} runMetadata The set of runMetadata - * @param {Array} runTrackingData The set of runTrackingData - * @returns An array formatted for CSV export - */ -export const constructExportData = (runMetadata, runTrackingData) => { - let csvData = []; - - if (runMetadata && runTrackingData) { - // Obtain runMetadata - const runTitle = runMetadata?.map((run) => sanitizeValue(run.title)); - const createdBy = runMetadata?.map((run) => sanitizeValue(run.author)); - const gitSha = runMetadata?.map((run) => sanitizeValue(run.gitSha)); - const gitBranch = runMetadata?.map((run) => sanitizeValue(run.gitBranch)); - const runCommand = runMetadata?.map((run) => sanitizeValue(run.runCommand)); - const notes = runMetadata?.map((run) => sanitizeValue(run.notes)); - - csvData.push( - ['Title', ...runTitle], - ['Created By', ...createdBy], - ['Git SHA', ...gitSha], - ['Git Branch', ...gitBranch], - ['Run Command', ...runCommand], - ['Notes', ...notes] - ); - - // Create empty line between metadata fields and tracking data fields. - csvData.push([]); - - buildCSVRows('Metrics'); - buildCSVRows('JSON Data'); - - function buildCSVRows(section) { - runTrackingData[section].forEach((trackingDataset) => { - const { datasetName, data } = trackingDataset; - const dataKeyNames = Object.keys(data).sort((a, b) => { - return a.localeCompare(b); - }); - - csvData.push([datasetName]); - - dataKeyNames.forEach((key) => { - let keyData = [key]; - - data[key].forEach((dataField) => keyData.push(dataField.value)); - csvData.push(keyData); - }); - - csvData.push([]); - }); - } - } - - return csvData; -}; - -/** - * Take a the runMetadata list to generate a meaningful file name for csv export - * @param {Array} runMetadata The set of runMetadata to be exported - * @returns A string to be used as the file name - */ -export const generateCSVFileName = (runMetadata) => { - let filename = 'rundata'; - - runMetadata?.forEach((run) => (filename += `-${run.id}`)); - filename += '.csv'; - - return filename; -}; diff --git a/src/utils/hooks/use-generate-pathname.js b/src/utils/hooks/use-generate-pathname.js index a70fd14ecf..06468154b5 100644 --- a/src/utils/hooks/use-generate-pathname.js +++ b/src/utils/hooks/use-generate-pathname.js @@ -1,9 +1,8 @@ import { useCallback } from 'react'; -import { useHistory, generatePath } from 'react-router-dom'; +import { useHistory } from 'react-router-dom'; import { localStorageName, params, - routes, defaultQueryParams, NODE_TYPES, } from '../../config'; @@ -134,39 +133,3 @@ export const useGeneratePathname = () => { toUpdateUrlParamsOnFilter, }; }; - -export const useGeneratePathnameForExperimentTracking = () => { - const history = useHistory(); - - const toExperimentTrackingPath = useCallback(() => { - const url = generatePath(routes.experimentTracking.main); - - history.push(url); - }, [history]); - - const toMetricsViewPath = useCallback(() => { - const url = generatePath(routes.experimentTracking.selectedView, { - view: 'Metrics', - }); - history.push(url); - }, [history]); - - const toSelectedRunsPath = useCallback( - (ids, view, isComparison) => { - const url = generatePath(routes.experimentTracking.selectedRuns, { - ids: ids.length === 1 ? ids[0] : ids.toString(), - view, - isComparison, - }); - - history.push(url); - }, - [history] - ); - - return { - toExperimentTrackingPath, - toMetricsViewPath, - toSelectedRunsPath, - }; -}; diff --git a/src/utils/match-path.js b/src/utils/match-path.js index 58a707437c..e1cc879314 100644 --- a/src/utils/match-path.js +++ b/src/utils/match-path.js @@ -23,29 +23,11 @@ export const findMatchedPath = (pathname, search) => { const matchedSelectedNodeName = () => hasQueryParam(params.selectedName); const matchedFocusedNode = () => hasQueryParam(params.focused); - const matchedExperimentTrackingMainPage = matchPath(pathname + search, { - exact: true, - path: [routes.experimentTracking.main], - }); - - const matchedSelectedView = matchPath(pathname + search, { - exact: true, - path: [routes.experimentTracking.selectedView], - }); - - const matchedSelectedRuns = matchPath(pathname + search, { - exact: true, - path: [routes.experimentTracking.selectedRuns], - }); - return { matchedFlowchartMainPage, matchedSelectedPipeline, matchedSelectedNodeId, matchedSelectedNodeName, matchedFocusedNode, - matchedExperimentTrackingMainPage, - matchedSelectedView, - matchedSelectedRuns, }; };