Differential D7379 Diff 35349 js_modules/dagit/packages/core/src/partitions/PartitionGraphSet.tsx

Changeset View

Standalone View

js_modules/dagit/packages/core/src/partitions/PartitionGraphSet.tsx

import {gql} from '@apollo/client';		import {gql} from '@apollo/client';
import {Colors} from '@blueprintjs/core';		import {Colors} from '@blueprintjs/core';
import * as React from 'react';		import * as React from 'react';
import styled from 'styled-components/macro';		import styled from 'styled-components/macro';

import {PartitionGraph} from './PartitionGraph';		import {PartitionGraph} from './PartitionGraph';
import {		import {
PIPELINE_LABEL,
PARTITION_GRAPH_FRAGMENT,		PARTITION_GRAPH_FRAGMENT,
StepSelector,		StepSelector,
getPipelineDurationForRun,		getPipelineDurationForRun,
getStepDurationsForRun,		getStepDurationsForRun,
getPipelineExpectationFailureForRun,		getPipelineExpectationFailureForRun,
getPipelineExpectationSuccessForRun,		getPipelineExpectationSuccessForRun,
getPipelineExpectationRateForRun,		getPipelineExpectationRateForRun,
getPipelineMaterializationCountForRun,		getPipelineMaterializationCountForRun,
getStepExpectationFailureForRun,		getStepExpectationFailureForRun,
getStepExpectationRateForRun,		getStepExpectationRateForRun,
getStepExpectationSuccessForRun,		getStepExpectationSuccessForRun,
getStepMaterializationCountForRun,		getStepMaterializationCountForRun,
} from './PartitionGraphUtils';		} from './PartitionGraphUtils';
import {PartitionGraphSetRunFragment} from './types/PartitionGraphSetRunFragment';		import {PartitionGraphSetRunFragment} from './types/PartitionGraphSetRunFragment';

export const PartitionGraphSet: React.FunctionComponent<{		export const PartitionGraphSet: React.FunctionComponent<{
partitions: {name: string; runs: PartitionGraphSetRunFragment[]}[];		partitions: {name: string; runs: PartitionGraphSetRunFragment[]}[];
allStepKeys: string[];		allStepKeys: string[];
}> = ({partitions, allStepKeys}) => {		}> = ({partitions, allStepKeys}) => {
const initial: {[stepKey: string]: boolean} = {[PIPELINE_LABEL]: true};		const [hiddenStepKeys, setHiddenStepKeys] = React.useState<string[]>([]);
allStepKeys.forEach((stepKey) => (initial[stepKey] = true));
const [selectedStepKeys, setSelectedStepKeys] = React.useState(initial);
const durationGraph = React.useRef<any>(undefined);		const durationGraph = React.useRef<any>(undefined);
const materializationGraph = React.useRef<any>(undefined);		const materializationGraph = React.useRef<any>(undefined);
const successGraph = React.useRef<any>(undefined);		const successGraph = React.useRef<any>(undefined);
const failureGraph = React.useRef<any>(undefined);		const failureGraph = React.useRef<any>(undefined);
const rateGraph = React.useRef<any>(undefined);		const rateGraph = React.useRef<any>(undefined);
const graphs = [durationGraph, materializationGraph, successGraph, failureGraph, rateGraph];		const graphs = [durationGraph, materializationGraph, successGraph, failureGraph, rateGraph];

const onStepChange = (selectedKeys: {[stepKey: string]: boolean}) => {		const onChangeHiddenStepKeys = (hiddenKeys: string[]) => {
setSelectedStepKeys(selectedKeys);		setHiddenStepKeys(hiddenKeys);

graphs.forEach((graph) => {		graphs.forEach((graph) => {
const chart = graph?.current?.chart?.current?.chartInstance;		const chart = graph?.current?.chart?.current?.chartInstance;
const datasets = chart?.data?.datasets \|\| [];		const datasets = chart?.data?.datasets \|\| [];
datasets.forEach((dataset: any, idx: number) => {		datasets.forEach((dataset: any, idx: number) => {
const meta = chart.getDatasetMeta(idx);		const meta = chart.getDatasetMeta(idx);
meta.hidden = dataset.label in selectedKeys ? !selectedKeys[dataset.label] : false;		meta.hidden = hiddenKeys.includes(dataset.label);
});		});
});		});
};		};

const runsByPartitionName = {};		const runsByPartitionName = {};
partitions.forEach((partition) => {		partitions.forEach((partition) => {
runsByPartitionName[partition.name] = partition.runs;		runsByPartitionName[partition.name] = partition.runs;
});		});
Show All 39 Lines	<PartitionContentContainer>
runsByPartitionName={runsByPartitionName}		runsByPartitionName={runsByPartitionName}
getPipelineDataForRun={getPipelineExpectationRateForRun}		getPipelineDataForRun={getPipelineExpectationRateForRun}
getStepDataForRun={getStepExpectationRateForRun}		getStepDataForRun={getStepExpectationRateForRun}
ref={rateGraph}		ref={rateGraph}
/>		/>
</div>		</div>
<div style={{width: 450}}>		<div style={{width: 450}}>
<NavContainer>		<NavContainer>
<StepSelector selected={selectedStepKeys} onChange={onStepChange} />		<StepSelector
		all={allStepKeys}
		hidden={hiddenStepKeys}
		onChangeHidden={onChangeHiddenStepKeys}
		/>
</NavContainer>		</NavContainer>
</div>		</div>
</PartitionContentContainer>		</PartitionContentContainer>
);		);
};		};

export const PARTITION_GRAPH_SET_RUN_FRAGMENT = gql`		export const PARTITION_GRAPH_SET_RUN_FRAGMENT = gql`
fragment PartitionGraphSetRunFragment on PipelineRun {		fragment PartitionGraphSetRunFragment on PipelineRun {
Show All 25 Lines