@finos/legend-application-studio 23.0.0 → 23.0.2

package/src/components/editor/edit-panel/mapping-editor/MappingExecutionBuilder.tsx

@@ -49,13 +49,13 @@ import {
   getMappingElementSource,
   getMappingElementTarget,
   getMappingElementLabel,
-} from '../../../../stores/editor-state/element-editor-state/mapping/MappingEditorState.js';
+} from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingEditorState.js';
 import { useDrop } from 'react-dnd';
 import { NewServiceModal } from '../service-editor/NewServiceModal.js';
 import {
   type MappingElementDragSource,
   CORE_DND_TYPE,
-} from '../../../../stores/shared/DnDUtils.js';
+} from '../../../../stores/editor/shared/DnDUtils.js';
 import { assertErrorThrown, guaranteeType, uniq } from '@finos/legend-shared';
 import {
   type MappingExecutionState,
@@ -63,7 +63,7 @@ import {
   MappingExecutionObjectInputDataState,
   MappingExecutionFlatDataInputDataState,
   MappingExecutionRelationalInputDataState,
-} from '../../../../stores/editor-state/element-editor-state/mapping/MappingExecutionState.js';
+} from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingExecutionState.js';
 import {
   EDITOR_LANGUAGE,
   ActionAlertActionType,
@@ -82,13 +82,13 @@ import {
   stub_RawLambda,
   isStubbed_RawLambda,
 } from '@finos/legend-graph';
-import { objectInputData_setData } from '../../../../stores/shared/modifier/DSL_Mapping_GraphModifierHelper.js';
-import { flatData_setData } from '../../../../stores/shared/modifier/STO_FlatData_GraphModifierHelper.js';
+import { objectInputData_setData } from '../../../../stores/editor/shared/modifier/DSL_Mapping_GraphModifierHelper.js';
+import { flatData_setData } from '../../../../stores/editor/shared/modifier/STO_FlatData_GraphModifierHelper.js';
 import {
   relationalInputData_setData,
   relationalInputData_setInputType,
-} from '../../../../stores/shared/modifier/STO_Relational_GraphModifierHelper.js';
-import { MappingExecutionQueryBuilderState } from '../../../../stores/editor-state/element-editor-state/mapping/MappingExecutionQueryBuilderState.js';
+} from '../../../../stores/editor/shared/modifier/STO_Relational_GraphModifierHelper.js';
+import { MappingExecutionQueryBuilderState } from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingExecutionQueryBuilderState.js';
 import type { QueryBuilderState } from '@finos/legend-query-builder';
 
 interface ClassMappingSelectOption {

package/src/components/editor/edit-panel/mapping-editor/MappingExecutionQueryBuilder.tsx

@@ -23,7 +23,7 @@ import {
 import { CustomSelectorInput, PURE_MappingIcon } from '@finos/legend-art';
 import { getMappingCompatibleClasses } from '@finos/legend-graph';
 import { QueryBuilderClassSelector } from '@finos/legend-query-builder';
-import type { MappingExecutionQueryBuilderState } from '../../../../stores/editor-state/element-editor-state/mapping/MappingExecutionQueryBuilderState.js';
+import type { MappingExecutionQueryBuilderState } from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingExecutionQueryBuilderState.js';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 
 /**

package/src/components/editor/edit-panel/mapping-editor/MappingExplorer.tsx

@@ -21,7 +21,7 @@ import {
   type ElementDragSource,
   CORE_DND_TYPE,
   MappingElementDragSource,
-} from '../../../../stores/shared/DnDUtils.js';
+} from '../../../../stores/editor/shared/DnDUtils.js';
 import {
   type TreeNodeContainerProps,
   clsx,
@@ -39,7 +39,7 @@ import {
   MenuContent,
   MenuContentItem,
 } from '@finos/legend-art';
-import { MappingElementState } from '../../../../stores/editor-state/element-editor-state/mapping/MappingElementState.js';
+import { MappingElementState } from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingElementState.js';
 import { useDrop, useDrag } from 'react-dnd';
 import { toSentenceCase } from '@finos/legend-shared';
 import {
@@ -50,11 +50,11 @@ import {
   getMappingElementType,
   MappingEditorState,
   getMappingElementLabel,
-} from '../../../../stores/editor-state/element-editor-state/mapping/MappingEditorState.js';
-import { LEGEND_STUDIO_TEST_ID } from '../../../LegendStudioTestID.js';
+} from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingEditorState.js';
+import { LEGEND_STUDIO_TEST_ID } from '../../../../application/LegendStudioTesting.js';
 import { getElementIcon } from '../../../shared/ElementIconUtils.js';
 import { NewMappingElementModal } from '../../../editor/edit-panel/mapping-editor/NewMappingElementModal.js';
-import { MappingElementDecorator } from '../../../../stores/editor-state/element-editor-state/mapping/MappingElementDecorator.js';
+import { MappingElementDecorator } from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingElementDecorator.js';
 import { flowResult } from 'mobx';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
@@ -69,8 +69,8 @@ import { useApplicationStore } from '@finos/legend-application';
 import {
   PureInstanceSetImplementationFilterState,
   PureInstanceSetImplementationState,
-} from '../../../../stores/editor-state/element-editor-state/mapping/PureInstanceSetImplementationState.js';
-import { pureInstanceSetImpl_setMappingFilter } from '../../../../stores/shared/modifier/DSL_Mapping_GraphModifierHelper.js';
+} from '../../../../stores/editor/editor-state/element-editor-state/mapping/PureInstanceSetImplementationState.js';
+import { pureInstanceSetImpl_setMappingFilter } from '../../../../stores/editor/shared/modifier/DSL_Mapping_GraphModifierHelper.js';
 
 export const MappingExplorerContextMenu = observer(
   forwardRef<

package/src/components/editor/edit-panel/mapping-editor/MappingTestEditor.tsx

@@ -24,7 +24,7 @@ import {
   MappingTestFlatDataInputDataState,
   MappingTestExpectedOutputAssertionState,
   MappingTestRelationalInputDataState,
-} from '../../../../stores/editor-state/element-editor-state/mapping/MappingTestState.js';
+} from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingTestState.js';
 import { JsonDiffView } from '../../../shared/DiffView.js';
 import {
   clsx,
@@ -51,7 +51,7 @@ import { useDrop } from 'react-dnd';
 import {
   type MappingElementDragSource,
   CORE_DND_TYPE,
-} from '../../../../stores/shared/DnDUtils.js';
+} from '../../../../stores/editor/shared/DnDUtils.js';
 import {
   IllegalStateError,
   guaranteeType,
@@ -75,7 +75,7 @@ import { MappingTestStatusIndicator } from './MappingTestsExplorer.js';
 import {
   getMappingElementSource,
   getMappingElementTarget,
-} from '../../../../stores/editor-state/element-editor-state/mapping/MappingEditorState.js';
+} from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingEditorState.js';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
   Class,
@@ -86,16 +86,16 @@ import {
   isStubbed_RawLambda,
   DEPRECATED__validate_MappingTestAssert,
 } from '@finos/legend-graph';
-import { flatData_setData } from '../../../../stores/shared/modifier/STO_FlatData_GraphModifierHelper.js';
+import { flatData_setData } from '../../../../stores/editor/shared/modifier/STO_FlatData_GraphModifierHelper.js';
 import {
   relationalInputData_setData,
   relationalInputData_setInputType,
-} from '../../../../stores/shared/modifier/STO_Relational_GraphModifierHelper.js';
+} from '../../../../stores/editor/shared/modifier/STO_Relational_GraphModifierHelper.js';
 import {
   type QueryBuilderState,
   QueryBuilderTextEditorMode,
 } from '@finos/legend-query-builder';
-import { MappingExecutionQueryBuilderState } from '../../../../stores/editor-state/element-editor-state/mapping/MappingExecutionQueryBuilderState.js';
+import { MappingExecutionQueryBuilderState } from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingExecutionQueryBuilderState.js';
 
 const MappingTestQueryEditor = observer(
   (props: { testState: MappingTestState; isReadOnly: boolean }) => {

package/src/components/editor/edit-panel/mapping-editor/MappingTestsExplorer.tsx

@@ -21,7 +21,7 @@ import {
   type MappingTestState,
   MAPPING_TEST_EDITOR_TAB_TYPE,
   TEST_RESULT,
-} from '../../../../stores/editor-state/element-editor-state/mapping/MappingTestState.js';
+} from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingTestState.js';
 import {
   clsx,
   ContextMenu,
@@ -43,14 +43,14 @@ import {
 import {
   type MappingElementDragSource,
   CORE_DND_TYPE,
-} from '../../../../stores/shared/DnDUtils.js';
+} from '../../../../stores/editor/shared/DnDUtils.js';
 import { ClassMappingSelectorModal } from './MappingExecutionBuilder.js';
 import { flowResult } from 'mobx';
 import { Randomizer } from '@finos/legend-shared';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import { useApplicationStore } from '@finos/legend-application';
 import { SetImplementation } from '@finos/legend-graph';
-import { MappingEditorState } from '../../../../stores/editor-state/element-editor-state/mapping/MappingEditorState.js';
+import { MappingEditorState } from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingEditorState.js';
 
 const addTestPromps = [
   `Let's add some test!`,

package/src/components/editor/edit-panel/mapping-editor/NewMappingElementModal.tsx

@@ -29,7 +29,7 @@ import {
   createEnumerationMapping,
   getAllMappingElements,
   MappingEditorState,
-} from '../../../../stores/editor-state/element-editor-state/mapping/MappingEditorState.js';
+} from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingEditorState.js';
 import {
   guaranteeNonNullable,
   UnsupportedOperationError,
@@ -43,7 +43,7 @@ import {
   Association,
   PrimitiveType,
 } from '@finos/legend-graph';
-import { BASIC_SET_IMPLEMENTATION_TYPE } from '../../../../stores/shared/ModelClassifierUtils.js';
+import { BASIC_SET_IMPLEMENTATION_TYPE } from '../../../../stores/editor/shared/ModelClassifierUtils.js';
 import {
   buildElementOption,
   getPackageableElementOptionFormatter,

package/src/components/editor/edit-panel/mapping-editor/OperationSetImplementationEditor.tsx

@@ -16,7 +16,7 @@
 
 import { useEffect, useCallback } from 'react';
 import { observer } from 'mobx-react-lite';
-import { MappingEditorState } from '../../../../stores/editor-state/element-editor-state/mapping/MappingEditorState.js';
+import { MappingEditorState } from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingEditorState.js';
 import {
   CustomSelectorInput,
   createFilter,
@@ -31,13 +31,13 @@ import {
   CORE_DND_TYPE,
   type OperationSetImplementationDropTarget,
   type MappingElementDragSource,
-} from '../../../../stores/shared/DnDUtils.js';
+} from '../../../../stores/editor/shared/DnDUtils.js';
 import { useDrop } from 'react-dnd';
 import { noop } from '@finos/legend-shared';
 import {
   MappingElementDecorator,
   MappingElementDecorationCleaner,
-} from '../../../../stores/editor-state/element-editor-state/mapping/MappingElementDecorator.js';
+} from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingElementDecorator.js';
 import {
   OperationSetImplementation,
   OperationType,
@@ -57,7 +57,7 @@ import {
   operationMapping_addParameter,
   operationMapping_changeParameter,
   operationMapping_deleteParameter,
-} from '../../../../stores/shared/modifier/DSL_Mapping_GraphModifierHelper.js';
+} from '../../../../stores/editor/shared/modifier/DSL_Mapping_GraphModifierHelper.js';
 
 interface SetImplementationOption {
   value: SetImplementation;

package/src/components/editor/edit-panel/mapping-editor/PropertyMappingsEditor.tsx

@@ -15,38 +15,38 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import { MultiplicityBadge } from '../../../shared/MultiplicityBadge.js';
 import { PurePropertyMappingEditor } from './PurePropertyMappingEditor.js';
 import { getElementIcon } from '../../../shared/ElementIconUtils.js';
 import {
   type MappingElement,
   MappingEditorState,
-} from '../../../../stores/editor-state/element-editor-state/mapping/MappingEditorState.js';
+} from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingEditorState.js';
 import type {
   InstanceSetImplementationState,
   PropertyMappingState,
-} from '../../../../stores/editor-state/element-editor-state/mapping/MappingElementState.js';
+} from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingElementState.js';
 import {
   PurePropertyMappingState,
   PureInstanceSetImplementationState,
-} from '../../../../stores/editor-state/element-editor-state/mapping/PureInstanceSetImplementationState.js';
+} from '../../../../stores/editor/editor-state/element-editor-state/mapping/PureInstanceSetImplementationState.js';
 import {
   clsx,
   ArrowCircleRightIcon,
   TimesCircleIcon,
   TimesIcon,
+  AsteriskIcon,
 } from '@finos/legend-art';
 import { guaranteeType } from '@finos/legend-shared';
 import {
   type FlatDataPropertyMappingState,
   FlatDataInstanceSetImplementationState,
-} from '../../../../stores/editor-state/element-editor-state/mapping/FlatDataInstanceSetImplementationState.js';
+} from '../../../../stores/editor/editor-state/element-editor-state/mapping/FlatDataInstanceSetImplementationState.js';
 import { FlatDataPropertyMappingEditor } from './FlatDataPropertyMappingEditor.js';
 import { RelationalPropertyMappingEditor } from './relational/RelationalPropertyMappingEditor.js';
 import type {
   RelationalPropertyMappingState,
   RootRelationalInstanceSetImplementationState,
-} from '../../../../stores/editor-state/element-editor-state/mapping/relational/RelationalInstanceSetImplementationState.js';
+} from '../../../../stores/editor/editor-state/element-editor-state/mapping/relational/RelationalInstanceSetImplementationState.js';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import {
   type Property,
@@ -61,20 +61,43 @@ import {
   OperationSetImplementation,
   FlatDataInstanceSetImplementation,
   RootRelationalInstanceSetImplementation,
+  MULTIPLICITY_INFINITE,
+  type Multiplicity,
 } from '@finos/legend-graph';
 import { useApplicationStore } from '@finos/legend-application';
 import {
   instanceSetImplementation_deletePropertyMapping,
   setImpl_nominateRoot,
   setImplementation_setRoot,
-} from '../../../../stores/shared/modifier/DSL_Mapping_GraphModifierHelper.js';
+} from '../../../../stores/editor/shared/modifier/DSL_Mapping_GraphModifierHelper.js';
 import {
   CLASS_PROPERTY_TYPE,
   getClassPropertyType,
-} from '../../../../stores/shared/ModelClassifierUtils.js';
-import type { DSL_Mapping_LegendStudioApplicationPlugin_Extension } from '../../../../stores/DSL_Mapping_LegendStudioApplicationPlugin_Extension.js';
+} from '../../../../stores/editor/shared/ModelClassifierUtils.js';
+import type { DSL_Mapping_LegendStudioApplicationPlugin_Extension } from '../../../../stores/extensions/DSL_Mapping_LegendStudioApplicationPlugin_Extension.js';
 import { Fragment } from 'react';
 
+const MultiplicityBadge: React.FC<{
+  multiplicity: Multiplicity;
+}> = (props) => {
+  const { multiplicity } = props;
+  const isRequired = multiplicity.lowerBound && multiplicity.lowerBound > 0;
+  const tooltipText = `${isRequired ? '[required]' : '[optional]'}${
+    isRequired ? ` minimum: ${multiplicity.lowerBound}` : ''
+  } maximum: ${multiplicity.upperBound ?? MULTIPLICITY_INFINITE}`;
+
+  return (
+    <div
+      className={`multiplicity-badge ${
+        isRequired ? 'multiplicity-badge--required' : ''
+      }`}
+      title={tooltipText}
+    >
+      {multiplicity.upperBound ? null : <AsteriskIcon />}
+    </div>
+  );
+};
+
 export const getExpectedReturnType = (
   targetSetImplementation: SetImplementation | undefined,
 ): Type | undefined => {

package/src/components/editor/edit-panel/mapping-editor/PurePropertyMappingEditor.tsx

@@ -20,15 +20,15 @@ import {
   type TransformDropTarget,
   CORE_DND_TYPE,
   TypeDragSource,
-} from '../../../../stores/shared/DnDUtils.js';
+} from '../../../../stores/editor/shared/DnDUtils.js';
 import {
   type MappingElement,
   MappingEditorState,
-} from '../../../../stores/editor-state/element-editor-state/mapping/MappingEditorState.js';
+} from '../../../../stores/editor/editor-state/element-editor-state/mapping/MappingEditorState.js';
 import type {
   PurePropertyMappingState,
   PureInstanceSetImplementationState,
-} from '../../../../stores/editor-state/element-editor-state/mapping/PureInstanceSetImplementationState.js';
+} from '../../../../stores/editor/editor-state/element-editor-state/mapping/PureInstanceSetImplementationState.js';
 import {
   clsx,
   CustomSelectorInput,
@@ -44,12 +44,12 @@ import {
   getRawGenericType,
   EnumerationMappingExplicitReference,
 } from '@finos/legend-graph';
-import { purePropertyMapping_setTransformer } from '../../../../stores/shared/modifier/DSL_Mapping_GraphModifierHelper.js';
+import { purePropertyMapping_setTransformer } from '../../../../stores/editor/shared/modifier/DSL_Mapping_GraphModifierHelper.js';
 import { getExpectedReturnType } from './PropertyMappingsEditor.js';
 import {
   CLASS_PROPERTY_TYPE,
   getClassPropertyType,
-} from '../../../../stores/shared/ModelClassifierUtils.js';
+} from '../../../../stores/editor/shared/ModelClassifierUtils.js';
 import { LambdaEditor } from '@finos/legend-query-builder';
 
 const SimplePropertyMappingEditor = observer(

package/src/components/editor/edit-panel/mapping-editor/TypeTree.tsx

@@ -0,0 +1,293 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useState, useEffect } from 'react';
+import {
+  isNonNullable,
+  IllegalStateError,
+  assertType,
+  addUniqueEntry,
+  printObject,
+} from '@finos/legend-shared';
+import {
+  type TreeNodeContainerProps,
+  type TreeData,
+  PURE_EnumValueIcon,
+  clsx,
+  TreeView,
+  ChevronDownIcon,
+  ChevronRightIcon,
+} from '@finos/legend-art';
+import { useDrag } from 'react-dnd';
+import {
+  TypeDragSource,
+  CORE_DND_TYPE,
+} from '../../../../stores/editor/shared/DnDUtils.js';
+import { getClassPropertyIcon } from '../../../shared/ElementIconUtils.js';
+import type { TypeTreeNodeData } from '../../../../stores/editor/shared/TreeUtils.js';
+import {
+  type Type,
+  type Enum,
+  type AbstractProperty,
+  Enumeration,
+  Class,
+  DEFAULT_SOURCE_PARAMETER_NAME,
+  VARIABLE_REFERENCE_TOKEN,
+  getAllClassProperties,
+  getAllClassDerivedProperties,
+  getRawGenericType,
+} from '@finos/legend-graph';
+import {
+  CLASS_PROPERTY_TYPE,
+  getClassPropertyType,
+} from '../../../../stores/editor/shared/ModelClassifierUtils.js';
+
+const getEnumTypeTreeNodeData = (
+  _enum: Enum,
+  parent: TypeTreeNodeData,
+): TypeTreeNodeData => {
+  // NOTE: Enum is not a type
+  assertType(
+    parent.type,
+    Enumeration,
+    'type of parent node for enum node must be enumeration',
+  );
+  return {
+    id: `${parent.id}.${_enum.name}`,
+    label: _enum.name,
+    parent: parent.type,
+    dndType: CORE_DND_TYPE.TYPE_TREE_ENUM,
+  };
+};
+
+const getPropertyTypeTreeNodeData = (
+  property: AbstractProperty,
+  parent: TypeTreeNodeData,
+): TypeTreeNodeData => {
+  assertType(
+    parent.type,
+    Class,
+    'type of parent node for class property node must be class',
+  );
+  const nodeData: TypeTreeNodeData = {
+    id: `${parent.id}.${property.name}`,
+    label: property.name,
+    type: property.genericType.value.rawType,
+    parent: parent.type,
+    dndType: CORE_DND_TYPE.TYPE_TREE_PRIMITIVE,
+    property,
+  };
+  switch (getClassPropertyType(property.genericType.value.rawType)) {
+    case CLASS_PROPERTY_TYPE.CLASS:
+      nodeData.childrenIds = getAllClassProperties(
+        getRawGenericType(property.genericType.value, Class),
+      ).map((p) => `${nodeData.id}.${p.name}`);
+      nodeData.dndType = CORE_DND_TYPE.TYPE_TREE_CLASS;
+      break;
+    case CLASS_PROPERTY_TYPE.ENUMERATION:
+      nodeData.childrenIds = getRawGenericType(
+        property.genericType.value,
+        Enumeration,
+      ).values.map((p) => `${nodeData.id}.${p.name}`);
+      nodeData.dndType = CORE_DND_TYPE.TYPE_TREE_ENUMERATION;
+      break;
+    default:
+  }
+  return nodeData;
+};
+
+const getTypeTreeData = (type: Type): TreeData<TypeTreeNodeData> => {
+  const rootIds: string[] = [];
+  const nodes = new Map<string, TypeTreeNodeData>();
+  if (type instanceof Class) {
+    getAllClassProperties(type)
+      .concat(getAllClassDerivedProperties(type))
+      .sort((a, b) => a.name.localeCompare(b.name))
+      .sort(
+        (a, b) =>
+          (b instanceof Class ? 2 : b instanceof Enumeration ? 1 : 0) -
+          (a instanceof Class ? 2 : a instanceof Enumeration ? 1 : 0),
+      )
+      .forEach((property) => {
+        const propertyTreeNodeData = getPropertyTypeTreeNodeData(property, {
+          id: `${VARIABLE_REFERENCE_TOKEN}${DEFAULT_SOURCE_PARAMETER_NAME}`,
+          label: '',
+          parent: type,
+          dndType: CORE_DND_TYPE.TYPE_TREE_CLASS,
+          type: type,
+        });
+        addUniqueEntry(rootIds, propertyTreeNodeData.id);
+        nodes.set(propertyTreeNodeData.id, propertyTreeNodeData);
+      });
+  } else if (type instanceof Enumeration) {
+    type.values.forEach((enumValue) => {
+      const propertyTreeNodeData = getEnumTypeTreeNodeData(enumValue, {
+        id: `${VARIABLE_REFERENCE_TOKEN}${DEFAULT_SOURCE_PARAMETER_NAME}`,
+        label: '',
+        parent: type,
+        dndType: CORE_DND_TYPE.TYPE_TREE_ENUMERATION,
+        type: type,
+      });
+      addUniqueEntry(rootIds, propertyTreeNodeData.id);
+      nodes.set(propertyTreeNodeData.id, propertyTreeNodeData);
+    });
+  } else {
+    throw new IllegalStateError(
+      `Can't use type tree with node type other than class and enumeration. Found:\n${printObject(
+        type,
+      )}`,
+    );
+  }
+  return { rootIds, nodes };
+};
+
+const TypeTreeNodeContainer: React.FC<
+  TreeNodeContainerProps<TypeTreeNodeData, { selectedType?: Type | undefined }>
+> = (props) => {
+  const { node, level, stepPaddingInRem, onNodeSelect, innerProps } = props;
+  const { selectedType } = innerProps;
+  const [, dragRef] = useDrag(
+    () => ({ type: node.dndType, item: new TypeDragSource(node) }),
+    [node],
+  );
+  const isExpandable = Boolean(node.childrenIds?.length);
+  const nodeTypeIcon = node.type ? (
+    getClassPropertyIcon(node.type)
+  ) : (
+    <PURE_EnumValueIcon />
+  );
+  const nodeExpandIcon = isExpandable ? (
+    node.isOpen ? (
+      <ChevronDownIcon />
+    ) : (
+      <ChevronRightIcon />
+    )
+  ) : (
+    <div />
+  );
+  const selectNode = (): void => onNodeSelect?.(node);
+
+  return (
+    <div
+      className={clsx('tree-view__node__container', {
+        'type-tree__node__container--highlighted': node.type === selectedType,
+      })}
+      onClick={selectNode}
+      ref={dragRef}
+      style={{
+        paddingLeft: `${(level - 1) * (stepPaddingInRem ?? 1)}rem`,
+        display: 'flex',
+      }}
+    >
+      <div className="tree-view__node__icon type-tree__node__icon">
+        <div className="tree-view__node__expand-icon">{nodeExpandIcon}</div>
+        <div className="type-tree__type-icon">{nodeTypeIcon}</div>
+      </div>
+      <div className="tree-view__node__label type-tree__node__label">
+        <button tabIndex={-1} title={`${node.id}`}>
+          {node.label}
+        </button>
+        {Boolean(node.type) && (
+          <div className="type-tree__node__type">
+            <button
+              className={clsx('type-tree__node__type__label', {
+                'type-tree__node__type__label--highlighted':
+                  node.type === selectedType,
+              })}
+              tabIndex={-1}
+              title={node.type?.path ?? ''}
+            >
+              {node.type?.name ?? 'unknown'}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const TypeTree: React.FC<{
+  type: Type;
+  selectedType?: Type | undefined;
+}> = (props) => {
+  const { type, selectedType } = props;
+  // NOTE: We only need to compute this once so we use lazy initial state syntax
+  // See https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const [treeData, setTreeData] = useState<TreeData<TypeTreeNodeData>>(() =>
+    getTypeTreeData(type),
+  );
+  const onNodeSelect = (node: TypeTreeNodeData): void => {
+    if (node.childrenIds?.length) {
+      node.isOpen = !node.isOpen;
+      if (node.type instanceof Class) {
+        getAllClassProperties(node.type)
+          .concat(getAllClassDerivedProperties(node.type))
+          .forEach((property) => {
+            const propertyTreeNodeData = getPropertyTypeTreeNodeData(
+              property,
+              node,
+            );
+            treeData.nodes.set(propertyTreeNodeData.id, propertyTreeNodeData);
+          });
+      } else if (node.type instanceof Enumeration) {
+        node.type.values.forEach((enumValue) => {
+          const propertyTreeNodeData = getEnumTypeTreeNodeData(enumValue, node);
+          treeData.nodes.set(propertyTreeNodeData.id, propertyTreeNodeData);
+        });
+      }
+    }
+    setTreeData({ ...treeData });
+  };
+
+  const getChildNodes = (node: TypeTreeNodeData): TypeTreeNodeData[] => {
+    if (!node.childrenIds || !node.type) {
+      return [];
+    }
+    const childrenNodes = node.childrenIds
+      .map((id) => treeData.nodes.get(id))
+      .filter(isNonNullable)
+      // class comes first then enumeration then primitive
+      .sort((a, b) => a.label.localeCompare(b.label))
+      .sort(
+        (a, b) =>
+          (b.type instanceof Class
+            ? 2
+            : b.type instanceof Enumeration
+            ? 1
+            : 0) -
+          (a.type instanceof Class ? 2 : a.type instanceof Enumeration ? 1 : 0),
+      );
+    return childrenNodes;
+  };
+
+  useEffect(() => {
+    setTreeData(() => getTypeTreeData(type));
+  }, [type]);
+
+  return (
+    <TreeView
+      components={{
+        TreeNodeContainer: TypeTreeNodeContainer,
+      }}
+      treeData={treeData}
+      onNodeSelect={onNodeSelect}
+      getChildNodes={getChildNodes}
+      innerProps={{
+        selectedType,
+      }}
+    />
+  );
+};