(explorerViewMachine);
const { toast, explorerView } = value as SchemaValue;
- const { id, tree, expanded, maxDepth, synchronized, message } = context;
+ const { id, tree, expanded, maxDepth, synchronizedSelection, synchronizedWithRepresentation, message } = context;
const [getTreePath, { loading: treePathLoading, data: treePathData, error: treePathError }] = useLazyQuery<
GQLGetTreePathData,
@@ -72,17 +74,17 @@ export const ExplorerView = ({ editingContextId, selection, setSelection, readOn
>(getTreePathQuery);
useEffect(() => {
- if (tree) {
+ if (tree && synchronizedSelection) {
const variables: GQLGetTreePathVariables = {
editingContextId,
treeId: tree.id,
- selectionEntryIds: synchronized ? selection.entries.map((entry) => entry.id) : [],
+ selectionEntryIds: synchronizedSelection ? selection.entries.map((entry) => entry.id) : [],
};
getTreePath({
variables,
});
}
- }, [editingContextId, tree, selection, synchronized, getTreePath]);
+ }, [editingContextId, tree, selection, synchronizedSelection, getTreePath]);
useEffect(() => {
if (!treePathLoading) {
@@ -131,10 +133,14 @@ export const ExplorerView = ({ editingContextId, selection, setSelection, readOn
}
}, [error, dispatch]);
- // Enable synchronize mode when the selection is explicitly changed
useEffect(() => {
- const synchronizeEvent: SynchronizeEvent = { type: 'SYNCHRONIZE', synchronized: true };
- dispatch(synchronizeEvent);
+ if (synchronizedWithRepresentation) {
+ const synchronizeSelectionEvent: SynchronizeSelectionEvent = {
+ type: 'SYNCHRONIZE_SELECTION',
+ synchronizedSelection: true,
+ };
+ dispatch(synchronizeSelectionEvent);
+ }
}, [selection]);
const onExpand = (id: string, depth: number) => {
@@ -142,8 +148,22 @@ export const ExplorerView = ({ editingContextId, selection, setSelection, readOn
dispatch(handleExpandedEvent);
};
+ const onSynchronizedClick = () => {
+ const synchronizeWithRepresentationEvent: SynchronizeWithRepresentationEvent = {
+ type: 'SYNCHRONISE_WITH_REPRESENTATION',
+ synchronizedWithRepresentation: !synchronizedWithRepresentation,
+ };
+ dispatch(synchronizeWithRepresentationEvent);
+ };
return (
<>
+
+
+
{tree ? (
;
};
export type HandleCompleteEvent = { type: 'HANDLE_COMPLETE' };
-export type SynchronizeEvent = { type: 'SYNCHRONIZE'; synchronized: boolean };
+export type SynchronizeSelectionEvent = { type: 'SYNCHRONIZE_SELECTION'; synchronizedSelection: boolean };
+export type SynchronizeWithRepresentationEvent = {
+ type: 'SYNCHRONISE_WITH_REPRESENTATION';
+ synchronizedWithRepresentation: boolean;
+};
export type HandleExpandedEvent = { type: 'HANDLE_EXPANDED'; id: string; depth: number };
export type HandleTreePathEvent = { type: 'HANDLE_TREE_PATH'; treePathData: GQLGetTreePathData };
export type ExplorerViewEvent =
@@ -68,9 +73,10 @@ export type ExplorerViewEvent =
| HandleCompleteEvent
| ShowToastEvent
| HideToastEvent
- | SynchronizeEvent
+ | SynchronizeSelectionEvent
| HandleExpandedEvent
- | HandleTreePathEvent;
+ | HandleTreePathEvent
+ | SynchronizeWithRepresentationEvent;
const isTreeRefreshedEventPayload = (payload: GQLTreeEventPayload): payload is GQLTreeRefreshedEventPayload =>
payload.__typename === 'TreeRefreshedEventPayload';
@@ -83,7 +89,8 @@ export const explorerViewMachine = Machine {
- const { synchronized } = event as SynchronizeEvent;
- return { synchronized };
+ synchronizeWithRepresentation: assign((_, event) => {
+ const { synchronizedWithRepresentation } = event as SynchronizeWithRepresentationEvent;
+ return {
+ synchronizedWithRepresentation: synchronizedWithRepresentation,
+ synchronized: synchronizedWithRepresentation,
+ };
+ }),
+ synchronizeSelection: assign((_, event) => {
+ const { synchronizedSelection } = event as SynchronizeSelectionEvent;
+ return { synchronizedSelection };
}),
expand: assign((context, event) => {
const { expanded, maxDepth } = context;
@@ -185,7 +202,7 @@ export const explorerViewMachine = Machine