Skip to content

chore: limit graphColorMapping to CLOUD #6641

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

chore: limit graphColorMapping to CLOUD #6641

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion src/timeMachine/components/Vis.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,9 @@ import {RemoteDataState, AppState, ViewProperties} from 'src/types'
import {getActiveTimeRange} from 'src/timeMachine/selectors/index'
import {setViewProperties} from 'src/timeMachine/actions'

// Constants
import {CLOUD} from 'src/shared/constants'

type ReduxProps = ConnectedProps<typeof connector>
type Props = ReduxProps

Expand Down Expand Up @@ -95,7 +98,7 @@ const TimeMachineVis: FC<Props> = ({
!!giraffeResult.table.length)

useEffect(() => {
if (viewProperties.hasOwnProperty('colors')) {
if (CLOUD && viewProperties.hasOwnProperty('colors')) {
const groupKey = [...giraffeResult.fluxGroupKeyUnion, 'result']
const [, fillColumnMap] = createGroupIDColumn(
giraffeResult.table,
Expand Down
30 changes: 18 additions & 12 deletions src/visualization/types/Graph/options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,9 @@ import AxisTicksGenerator from 'src/visualization/components/internal/AxisTicksG
import {XYViewProperties} from 'src/types'
import {VisualizationOptionProps} from 'src/visualization'

// Constants
const {BASE_2, BASE_10} = AXES_SCALE_OPTIONS
import {CLOUD} from 'src/shared/constants'

interface Props extends VisualizationOptionProps {
properties: XYViewProperties
Expand Down Expand Up @@ -250,19 +252,23 @@ export const GraphOptions: FC<Props> = ({properties, results, update}) => {
<ColorSchemeDropdown
value={properties.colors?.filter(c => c.type === 'scale') ?? []}
onChange={colors => {
const [, fillColumnMap] = createGroupIDColumn(
results.table,
groupKey
)
// the properties that we use to calculate the colors are updated in the next render cycle so we need
// to make a new object and override the colors
const newProperties = {...properties, colors}
const colorMapping = generateSeriesToColorHex(
fillColumnMap,
newProperties
)
if (CLOUD) {
const [, fillColumnMap] = createGroupIDColumn(
results.table,
groupKey
)
// the properties that we use to calculate the colors are updated in the next render cycle so we need
// to make a new object and override the colors
const newProperties = {...properties, colors}
const colorMapping = generateSeriesToColorHex(
fillColumnMap,
newProperties
)

update({colors, colorMapping})
update({colors, colorMapping})
} else {
update({colors})
}
}}
/>
</Form.Element>
Expand Down
40 changes: 25 additions & 15 deletions src/visualization/types/Graph/view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,9 @@ interface Props extends VisualizationProps {
properties: XYViewProperties
}

// Constants
import {CLOUD} from 'src/shared/constants'

export const Graph: FC<Props> = ({
properties,
annotations,
Expand Down Expand Up @@ -244,20 +247,25 @@ export const Graph: FC<Props> = ({
return <EmptyGraphMessage message={INVALID_DATA_COPY} />
}

const memoizedGetColorMappingObjects = memoizeOne(getColorMappingObjects)
const [, fillColumnMap] = createGroupIDColumn(resultState.table, groupKey)
const {colorMappingForGiraffe, colorMappingForIDPE, needsToSaveToIDPE} =
memoizedGetColorMappingObjects(fillColumnMap, properties)
const colorMapping = colorMappingForGiraffe
let colorMapping = null

if (CLOUD) {
const memoizedGetColorMappingObjects = memoizeOne(getColorMappingObjects)
const [, fillColumnMap] = createGroupIDColumn(resultState.table, groupKey)
const {colorMappingForGiraffe, colorMappingForIDPE, needsToSaveToIDPE} =
memoizedGetColorMappingObjects(fillColumnMap, properties)

// when the view is in a dashboard cell, and there is a need to save to IDPE, save it.
// when VEO is open, prevent from saving because it causes state issues. It will be handled in the timemachine code separately.
if (needsToSaveToIDPE && view?.dashboardID && !isVeoOpen) {
const newView = {...view}
newView.properties.colorMapping = colorMappingForIDPE
colorMapping = colorMappingForGiraffe

// save to IDPE
dispatch(updateViewAndVariables(view.dashboardID, newView))
// when the view is in a dashboard cell, and there is a need to save to IDPE, save it.
// when VEO is open, prevent from saving because it causes state issues. It will be handled in the timemachine code separately.
if (needsToSaveToIDPE && view?.dashboardID && !isVeoOpen) {
const newView = {...view}
newView.properties.colorMapping = colorMappingForIDPE

// save to IDPE
dispatch(updateViewAndVariables(view.dashboardID, newView))
}
}

const config: Config = {
Expand Down Expand Up @@ -298,11 +306,13 @@ export const Graph: FC<Props> = ({
],
}

const layer = {...(config.layers[0] as LineLayerConfig)}
if (CLOUD) {
const layer = {...(config.layers[0] as LineLayerConfig)}

layer.colorMapping = colorMapping
layer.colorMapping = colorMapping

config.layers[0] = layer
config.layers[0] = layer
}

addAnnotationLayer(
config,
Expand Down