Merge pull request #4658 from 3drepo/ISSUE_4642

ISSUE #4642 - Tickets supports transformations

Author: carmenfan

frontend/.storybook/preview.js

@@ -1,7 +1,7 @@
 import { theme as V5Theme } from '@/v5/ui/themes/theme';
 import { theme as V5ViewerTheme } from '@/v5/ui/routes/viewer/theme';
 import { IntlProvider } from 'react-intl';
-import { getIntlProviderProps } from '@/v5/services/intl';
+import { getIntl } from '@/v5/services/intl';
 import { GlobalStyle } from '@/v5/ui/themes/global';
 import { ThemeProvider as MuiThemeProvider } from '@mui/material';
 import { ThemeProvider, createGlobalStyle } from 'styled-components';
@@ -73,7 +73,7 @@ const withThemeProvider = (Story, context)=>{
 export const decorators = [
 	withThemeProvider,
 	(Story) => (
-		<IntlProvider {...getIntlProviderProps()}>
+		<IntlProvider {...getIntl()}>
 			<Story />
 		</IntlProvider>
 	),

frontend/src/main.tsx

@@ -30,7 +30,7 @@ import { Root as V5Root } from '@/v5/ui/routes';
 
 import { UnityUtil } from '@/globals/unity-util';
 import { clientConfigService } from '@/v4/services/clientConfig';
-import { formatMessage, getIntlProviderProps, initializeIntl } from '@/v5/services/intl';
+import { formatMessage, getIntl, initializeIntl } from '@/v5/services/intl';
 import { initializeActionsDispatchers } from '@/v5/helpers/actionsDistpatchers.helper';
 import { IntlProvider } from 'react-intl';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
@@ -68,7 +68,7 @@ const render = () => {
 	ReactDOM.render(
 		<Provider store={store as any}>
 			<ConnectedRouter history={history as History}>
-				<IntlProvider {...getIntlProviderProps()}>
+				<IntlProvider {...getIntl()}>
 					<LocalizationProvider dateAdapter={AdapterDayjs}>
 						<Switch>
 							<Route exact path="/">

frontend/src/v4/routes/viewerGui/viewerGui.component.tsx

@@ -16,7 +16,7 @@
  */
 
 import { Tickets } from '@/v5/ui/routes/viewer/tickets/tickets.component';
-import { isEmpty } from 'lodash';
+import { isEmpty, isEqual } from 'lodash';
 import { PureComponent } from 'react';
 import { Toolbar } from '@/v5/ui/routes/viewer/toolbar/toolbar.component';
 import { VIEWER_EVENTS } from '../../constants/viewer';
@@ -181,6 +181,7 @@ export class ViewerGui extends PureComponent<IProps, IState> {
 			this.props.setPanelVisibility(VIEWER_PANELS.COMPARE, false);
 			this.props.resetCompareComponent();
 		}
+
 	}
 
 	public componentWillUnmount() {

frontend/src/v4/routes/viewerGui/viewerGui.container.ts

@@ -19,6 +19,7 @@ import { TeamspacesActions } from '@/v4/modules/teamspaces';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
+import { selectSelectedTicket } from '@/v5/store/tickets/card/ticketsCard.selectors';
 import { CompareActions } from '../../modules/compare';
 
 import { selectCurrentTeamspace, selectCurrentUser } from '../../modules/currentUser';

frontend/src/v5/helpers/viewpoint.helpers.ts

@@ -20,11 +20,8 @@ import { generateViewpoint as generateViewpointV4, getNodesIdsFromSharedIds, toS
 import { formatMessage } from '@/v5/services/intl';
 import { dispatch, getState } from '@/v4/modules/store';
 import { isEmpty, isString } from 'lodash';
-import { Viewer as ViewerService } from '@/v4/services/viewer/viewer';
-import { TreeActions } from '@/v4/modules/tree';
-import { ViewerGuiActions } from '@/v4/modules/viewerGui';
 import { selectCurrentTeamspace } from '../store/teamspaces/teamspaces.selectors';
-import { TicketsCardActionsDispatchers } from '../services/actionsDispatchers';
+import { ViewpointsActions } from '@/v4/modules/viewpoints';
 
 export const convertToV5GroupNodes = (objects) => objects.map((object) => ({
 	container: object.model as string,
@@ -73,6 +70,12 @@ const convertToV5GroupOverride = (group: any, type: ViewpointGroupOverrideType):
 		override.opacity = opacity;
 	}
 
+	if (group.transformation) {
+		const { transformation } = group;
+		override.transformation = transformation;
+	}
+
+
 	return override;
 };
 
@@ -100,10 +103,8 @@ export const getViewerState = async () => {
 	return state;
 };
 
-const mergeGroups = (groups: any[]) => ({ objects: groups.flatMap((group) => group.objects) });
-
 const convertToV4Group = (groupOverride: GroupOverride) => {
-	const { color, opacity, group: v5Group } = groupOverride;
+	const { color, opacity, transformation, group: v5Group } = groupOverride;
 
 	if (isString(v5Group)) {
 		return { color: [0, 0, 0, 0], objects: [] }; // theres no info yet so I say us an empty group
@@ -121,9 +122,15 @@ const convertToV4Group = (groupOverride: GroupOverride) => {
 		group.opacity = opacity;
 	}
 
+	if (transformation) {
+		group.transformation = transformation;
+	}
+
 	return group;
 };
 
+const mergeGroups = (groups: any[]) => ({ objects: groups.flatMap((group) => group.objects) });
+
 export const viewpointV5ToV4 = (viewpoint: Viewpoint) => {
 	let v4Viewpoint:any = {};
 	if (viewpoint.camera) {
@@ -140,14 +147,15 @@ export const viewpointV5ToV4 = (viewpoint: Viewpoint) => {
 		v4Viewpoint.clippingPlanes = viewpoint.clippingPlanes;
 	}
 
-	if (!isEmpty(viewpoint.state?.colored)) {
-		v4Viewpoint.override_groups = viewpoint.state.colored.map(convertToV4Group);
-	}
-
 	if (!isEmpty(viewpoint.state?.transformed)) {
 		v4Viewpoint.transformation_groups = viewpoint.state.transformed.map(convertToV4Group);
 	}
 
+
+	if (!isEmpty(viewpoint.state?.colored)) {
+		v4Viewpoint.override_groups = viewpoint.state.colored.map(convertToV4Group);
+	}
+	
 	if (!isEmpty(viewpoint.state?.hidden)) {
 		v4Viewpoint.hidden_group = mergeGroups(viewpoint.state.hidden.map(convertToV4Group));
 	}
@@ -160,19 +168,21 @@ export const meshObjectsToV5GroupNode = (objects) => objects.map((obj) => ({
 	_ids: obj.mesh_ids,
 }));
 
-export const toColorAndTransparencyDicts = (overrides: GroupOverride[]): OverridesDicts => {
-	const toMeshDictionary = (objects: V4GroupObjects, color: string, opacity: number): OverridesDicts => objects.shared_ids.reduce((dict, id) => {
-		if (color !== undefined) {
+export const toGroupPropertiesDicts = (overrides: GroupOverride[]): OverridesDicts => {
+	const toMeshDictionary = (objects: V4GroupObjects, color: string, opacity: number): OverridesDicts => 
+		objects.shared_ids.reduce((dict, id) => {
+			if (color !== undefined) {
 			// eslint-disable-next-line no-param-reassign
-			dict.overrides[id] = color;
-		}
+				dict.overrides[id] = color;
+			} 
 
-		if (opacity !== undefined) {
+			if (opacity !== undefined) {
 			// eslint-disable-next-line no-param-reassign
-			dict.transparencies[id] = opacity;
-		}
-		return dict;
-	}, { overrides: {}, transparencies: {} } as OverridesDicts);
+				dict.transparencies[id] = opacity;
+			}
+
+			return dict;
+		}, { overrides: {}, transparencies: {} } as OverridesDicts);
 
 	return overrides.reduce((acum, current) => {
 		const color = current.color ? getGroupHexColor(current.color) : undefined;
@@ -186,32 +196,21 @@ export const toColorAndTransparencyDicts = (overrides: GroupOverride[]): Overrid
 			dict.overrides = { ...dict.overrides, ...overrideDict.overrides };
 			// eslint-disable-next-line no-param-reassign
 			dict.transparencies = { ...dict.transparencies, ...overrideDict.transparencies };
+
 			return dict;
 		}, acum);
 	}, { overrides: {}, transparencies: {} } as OverridesDicts);
 };
 
 export const goToView = async (view: Viewpoint) => {
-	if (isEmpty(view?.state?.colored)  && isEmpty(view?.state?.hidden) && isEmpty(view?.camera) && isEmpty(view?.clippingPlanes)) {
+	if (
+		isEmpty(view?.state?.colored) && 
+		isEmpty(view?.state?.hidden) && 
+		isEmpty(view?.state?.transformed) && 
+		isEmpty(view?.camera) && 
+		isEmpty(view?.clippingPlanes)) {
 		return;
 	}
-
 
-	dispatch(ViewerGuiActions.clearColorOverrides());
-	await ViewerService.setViewpoint(view);
-	const overrides = toColorAndTransparencyDicts(view?.state?.colored || []);
-	TicketsCardActionsDispatchers.setOverrides(overrides);
-
-	await ViewerService.clearHighlights();
-
-	if (view?.state) {
-		dispatch(TreeActions.setHiddenGeometryVisible(!!view.state.showHidden));
-	}
-
-	const v4HiddenObjects = convertToV4GroupNodes(view.state?.hidden?.flatMap((hiddenOverride) => (hiddenOverride.group as Group)?.objects || []));
-	if (v4HiddenObjects.length) {
-		dispatch(TreeActions.hideNodesBySharedIds(v4HiddenObjects, true));
-	} else {
-		dispatch(TreeActions.showAllNodes());
-	}
+	dispatch(ViewpointsActions.showViewpoint(null, null, viewpointV5ToV4(view)));
 };

frontend/src/v5/services/intl.ts

@@ -43,12 +43,19 @@ export const initializeIntl = (locale: string) => {
 			// Locale of the fallback defaultMessage
 			defaultLocale: DEFAULT_LOCALE,
 			messages,
+			onError: (error) => {
+				if (error.code === 'MISSING_TRANSLATION') {
+					return;
+				}
+		
+				console.error(error);
+			},
 		},
 		cache,
 	);
 };
 
-const getIntl = () => {
+export const getIntl = () => {
 	if (!intlInternal) {
 		initializeIntl(DEFAULT_LOCALE);
 	}
@@ -70,16 +77,3 @@ export const formatRelativeTime: typeof intlInternal.formatRelativeTime = (value
 
 // eslint-disable-next-line max-len
 export const formatPlural: typeof intlInternal.formatPlural = (value, opts?): Intl.LDMLPluralRule => getIntl().formatPlural(value, opts);
-
-export const getIntlProviderProps = () => ({
-	messages: getIntl().messages,
-	defaultLocal: getIntl().defaultLocale,
-	locale: getIntl().locale,
-	onError: (error) => {
-		if (error.code === 'MISSING_TRANSLATION' && getIntl().locale === DEFAULT_LOCALE) {
-			return;
-		}
-
-		console.error(error);
-	},
-});

frontend/src/v5/store/tickets/card/ticketsCard.redux.ts

@@ -36,6 +36,7 @@ export const { Types: TicketsCardTypes, Creators: TicketsCardActions } = createA
 	resetState: [],
 	setOverrides: ['overrides'],
 	setUnsavedTicket: ['ticket'],
+	setTransformations: ['transformations'],
 }, { prefix: 'TICKETS_CARD/' }) as { Types: Constants<ITicketsCardActionCreators>; Creators: ITicketsCardActionCreators };
 
 export interface ITicketsCardState {
@@ -47,6 +48,7 @@ export interface ITicketsCardState {
 	readOnly: boolean,
 	overrides: OverridesDicts | null,
 	unsavedTicket: EditableTicket | null,
+	transformations: any,
 }
 
 export const INITIAL_STATE: ITicketsCardState = {
@@ -60,6 +62,7 @@ export const INITIAL_STATE: ITicketsCardState = {
 	},
 	view: TicketsCardViews.List,
 	overrides: null,
+	transformations: null,
 	readOnly: false,
 	unsavedTicket: null,
 };
@@ -156,5 +159,5 @@ export interface ITicketsCardActionCreators {
 	setReadOnly: (readOnly: boolean) => SetReadOnlyAction,
 	resetState: () => ResetStateAction,
 	setOverrides: (overrides: OverridesDicts) => SetOverridesAction,
-	setUnsavedTicket: (ticket: EditableTicket) => SetUnsavedTicketAction,
+	setUnsavedTicket: (ticket: EditableTicket) => SetUnsavedTicketAction
 }

frontend/src/v5/store/tickets/card/ticketsCard.selectors.ts

@@ -67,7 +67,7 @@ export const selectSelectedTicketPinId = createSelector(
 
 export const selectTicketOverridesDict = createSelector(
 	selectTicketsCardDomain,
-	(ticketCardState) => ticketCardState.overrides || { overrides: {}, transparencies: {} },
+	(ticketCardState) => ticketCardState.overrides || { overrides: {}, transparencies: {}, transformations: {} },
 );
 
 export const selectTicketOverrides = createSelector(

frontend/src/v5/store/tickets/tickets.helpers.ts

@@ -273,6 +273,7 @@ const fillEmptyOverrides = (values: Partial<ITicket>) => {
 			viewValue.state ||= {} as any;
 			viewValue.state.colored ||= [];
 			viewValue.state.hidden ||= [];
+			viewValue.state.transformed ||= [];
 		}
 	});
 };

frontend/src/v5/store/tickets/tickets.selectors.ts

@@ -19,8 +19,8 @@ import { createSelector } from 'reselect';
 import { orderBy } from 'lodash';
 import { BaseProperties } from '@/v5/ui/routes/viewer/tickets/tickets.constants';
 import { ITicketsState } from './tickets.redux';
-import { createPropertiesWithGroups } from './ticketsGroups.helpers';
-import { ITicket, Properties, TicketWithModelIdAndName } from './tickets.types';
+import { createPropertiesWithGroups, ticketWithGroups } from './ticketsGroups.helpers';
+import { ITicket, TicketWithModelIdAndName } from './tickets.types';
 import { selectContainers } from '../containers/containers.selectors';
 import { selectFederations } from '../federations/federations.selectors';
 
@@ -70,27 +70,27 @@ export const selectTicketsGroups = createSelector(
 	(state) => state.groupsByGroupId,
 );
 
-export const selectTickets = createSelector(
+const selectTicketsRaw = createSelector(
 	selectTicketsDomain,
 	(state, modelId) => modelId,
+	(state, modelId) => state.ticketsByModelId[modelId] || [],
+);
+
+export const selectTickets = createSelector(
+	selectTicketsRaw,
 	selectTicketsGroups,
-	(state, modelId, groups): ITicket[] => {
+	(ticketsList, groups): ITicket[] => {
 		const tickets = [];
-		(state.ticketsByModelId[modelId] || []).forEach((ticket) => {
-			let { properties } = ticket;
-			properties = createPropertiesWithGroups(properties, groups);
-			tickets.push({
-				...ticket,
-				properties,
-			});
+		ticketsList.forEach((ticket) => {
+			tickets.push({ ...ticket, properties: createPropertiesWithGroups(ticket.properties, groups) });
 		});
 
 		return orderBy(tickets, `properties.${BaseProperties.CREATED_AT}`, 'desc');
 	},
 );
 
 export const selectTicketByIdRaw = createSelector(
-	selectTickets,
+	selectTicketsRaw,
 	(_, modelId, ticketId) => ticketId,
 	(tickets, ticketId) => tickets.find(({ _id }) => _id === ticketId) || null,
 );
@@ -102,25 +102,7 @@ export const selectTicketById = createSelector(
 		if (!ticket) {
 			return ticket;
 		}
-
-		let { properties } = ticket;
-		properties = createPropertiesWithGroups(properties, groups);
-		const finalTicket = {
-			...ticket,
-			properties,
-		};
-
-		if (ticket.modules) {
-			let { modules } = ticket;
-			modules = Object.keys(modules).reduce((partialModules, key) => {
-				// eslint-disable-next-line no-param-reassign
-				partialModules[key] = createPropertiesWithGroups(modules[key], groups);
-				return partialModules;
-			}, {} as Record<string, Properties>);
-
-			finalTicket.modules = modules;
-		}
-		return finalTicket;
+		return ticketWithGroups(ticket, groups);
 	},
 );