https://www.itwinjs.org/sandboxes/grigas/Hayley-the-azure-bobolink-114

The expected behavior for the above situation is:

• 1st click disables everything, enables "roof" subcategory
• 2nd click enables everything, disables "roof" subcategory

We should provide more details on each tree component in the package and the widget as a whole, possibly add screeshots.

should be able to override the provider to set default priority of the group

Originally posted by @aruniverse in iTwin/viewer#177 (comment)

After upgrading to node 16, there were some leaks in test code for the following 2 pkgs
Cover scripts were updated to skip these tests for the time being.

==[ FAILURE: 2 operations ]====================================================

--[ FAILURE: @itwin/breakdown-trees-react ]-----------------[ 11.02 seconds ]--

This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills
This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.
at div
at div
at div
at TreeNode (/home/vsts/work/1/s/common/temp/node_modules/.pnpm/@iTwin[email protected]_192e986a3ccac8c463840e3cecabb201/node_modules/@itwin/core-react/lib/cjs/core-react/tree/Node.js:27:9)
at div
at div
at TreeNodeWrapper (/home/vsts/work/1/s/packages/itwin/breakdown-trees/lib/cjs/Views/NodeRenderers/FunctionalTreeNodeRenderer.js:61:9)
...2 lines omitted...
at div
at div
at TreeNode (/home/vsts/work/1/s/common/temp/node_modules/.pnpm/@iTwin[email protected]_192e986a3ccac8c463840e3cecabb201/node_modules/@itwin/core-react/lib/cjs/core-react/tree/Node.js:27:9)
at div
at div
at TreeNodeWrapper (/home/vsts/work/1/s/packages/itwin/breakdown-trees/lib/cjs/Views/NodeRenderers/FunctionalTreeNodeRenderer.js:61:9)
at WrapperComponent (/home/vsts/work/1/s/common/temp/node_modules/.pnpm/@wojtekmaj[email protected][email protected]/node_modules/@wojtekmaj/enzyme-adapter-utils/build/createMountWrapper.js:111:7)
##[error]Handle leak detected. Node was still running 5 seconds after tests completed.
Try running with the DEBUG_LEAKS env var set to see open handles.
Terminated

--[ FAILURE: @itwin/geo-tools-react ]-----------------------[ 14.01 seconds ]--

This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills
This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://reactjs.org/link/react-polyfills
##[error]Handle leak detected. Node was still running 5 seconds after tests completed.
Try running with the DEBUG_LEAKS env var set to see open handles.
Terminated

Operations failed.

rush cover (1 minute 49.7 seconds)
##[error]Bash exited with code '1'.

At the moment ModelsTree uses all types of bis.GeometricElement3d in the hierarchy. Some consumers may want to specify a more concrete subclass or exclude some subclasses. We should make this configuration option available.

Review TreeWidget API and internal components:

• Check if all internal components are still necessary. Maybe some of them have alternatives in itwinui-react package.
• Rewrite class components into function components.
• Remove unused props from internal components.

Proposal for a Selection Tree component

Problems

When an element is selected, it's impossible see its context in one place - model, category, parent elements, child elements. Model, category and the immediate parent can be checked in the Property Grid component, but they're not interactive (you can't do anything with them except view their labels) and you can only see child elements in the Models Tree component, but that requires finding the selected element in the hierarchy, which could be an impossible task in large iModels.

In addition, not being able to see and/or interact with selected element's ancestor and child elements takes away a convenient way to adjust selection, which is especially important when there are non-graphical ancestors with properties that users want to see.

Suggestion

The suggestion is to introduce a new Selection Tree component that could become part of the Visibility Widget.

Hierarchy

The important part is to show selected element's Model, Category, ancestors and possibly child elements. How it's going to be set up is TBD. A couple of ideas:

• Model (auto-expanded) -> Category (auto-expanded) -> ...Ancestors (auto-expanded) -> Selected Element (collapsed) -> Child elements. All top level nodes (Model, Category, Ancestors) up to Selected Element would only have one child node that's relevant to the selected element. Problems with this approach: parent and child elements don't necessarily share the same Model and Category. For the selection tree we'd want to see Model and Category of the selected element, but the hierarchy structure suggests the Model and Category belong to the topmost ancestor.

• Selected Element (auto-expanded) -> [Model, Category, Ancestors' hierarchy, Children hierarchy]. This approach would solve the problem of the previous one, but it wouldn't be as convenient to adjust selection as the whole hierarchy would be changed upon selection change.

We may want to consider showing Subject hierarchy from Model through InformationPartitionElement, parent Subject up to the root Subject. If we do, need to consider the case when Model models a non-InformationPartitionElement.

Interactions

• Node selection would cause unified selection to update with all the consequences - graphics view changes highlighted elements, property grid shows content of newly selected element, etc.

• Visibility control could be added similar to what we have in Models Tree.

Add a new "External Sources" tree component to the @itwin/tree-widget-react package.

Proposed ruleset

{
  "id": "ExternalSources",
  "requiredSchemas": [
    {
      "name": "BisCore",
      "minVersion": "1.0.13"
    }
  ],
  "rules": [
    {
      "ruleType": "RootNodes",
      "specifications": [
        {
          "specType": "InstanceNodesOfSpecificClasses",
          "classes": [
            {
              "schemaName": "BisCore",
              "classNames": [
                "ExternalSource"
              ]
            }
          ],
          "arePolymorphic": false,
          "relatedInstances": [
            {
              "relationshipPath": [
                {
                  "relationship": {
                    "schemaName": "BisCore",
                    "className": "SynchronizationConfigSpecifiesRootSources"
                  },
                  "direction": "Backward"
                }
              ],
              "isRequired": true,
              "alias": "configRoot"
            },
            {
              "relationshipPath": [
                {
                  "relationship": {
                    "schemaName": "BisCore",
                    "className": "ExternalSourceIsInRepository"
                  },
                  "direction": "Forward"
                }
              ],
              "isRequired": true,
              "alias": "repo"
            }
          ],
          "instanceFilter": "configRoot.ECInstanceId <> NULL",
          "groupByClass": false,
          "groupByLabel": false
        }
      ]
    },
    {
      "ruleType": "ChildNodes",
      "condition": "ParentNode.IsOfClass(\"ExternalSourceGroup\", \"BisCore\")",
      "specifications": [
        {
          "specType": "RelatedInstanceNodes",
          "hideIfNoChildren": false,
          "relationshipPaths": [
            [
              {
                "relationship": {
                  "schemaName": "BisCore",
                  "className": "ExternalSourceGroupGroupsSources"
                },
                "direction": "Forward"
              }
            ]
          ],
          "groupByClass": false,
          "groupByLabel": false
        }
      ]
    },
    {
      "ruleType": "ChildNodes",
      "condition": "ParentNode.IsOfClass(\"ExternalSource\", \"BisCore\")",
      "specifications": [
        {
          "specType": "RelatedInstanceNodes",
          "hideIfNoChildren": false,
          "relationshipPaths": [
            [
              {
                "relationship": {
                  "schemaName": "BisCore",
                  "className": "ExternalSourceOwnsAttachments"
                },
                "direction": "Forward"
              },
              {
                "relationship": {
                  "schemaName": "BisCore",
                  "className": "ExternalSourceAttachmentAttachesSource"
                },
                "direction": "Forward"
              }
            ]
          ],
          "groupByClass": false,
          "groupByLabel": false
        },
        {
          "specType": "CustomNode",
          "type": "T_ExternalSource_Elements",
          "label": "Elements",
          "imageId": "icon-sitemap",
          "hideIfNoChildren": true,
          "nestedRules": [
            {
              "ruleType": "ChildNodes",
              "specifications": [
                {
                  "specType": "RelatedInstanceNodes",
                  "relationshipPaths": [
                    [
                      {
                        "relationship": {
                          "schemaName": "BisCore",
                          "className": "ElementIsFromSource"
                        },
                        "direction": "Backward",
                        "targetClass": {
                          "schemaName": "BisCore",
                          "className": "ExternalSourceAspect"
                        }
                      },
                      {
                        "relationship": {
                          "schemaName": "BisCore",
                          "className": "ElementOwnsMultiAspects"
                        },
                        "direction": "Backward",
                        "targetClass": {
                          "schemaName": "BisCore",
                          "className": "GeometricElement"
                        }
                      }
                    ]
                  ],
                  "groupByClass": true,
                  "groupByLabel": false
                }
              ]
            }
          ]
        }
      ]
    },
    {
      "ruleType": "InstanceLabelOverride",
      "class": {
        "schemaName": "BisCore",
        "className": "RepositoryLink"
      },
      "values": [
        {
          "specType": "Property",
          "propertyName": "UserLabel"
        }
      ]
    },
    {
      "ruleType": "InstanceLabelOverride",
      "class": {
        "schemaName": "BisCore",
        "className": "ExternalSource"
      },
      "values": [
        {
          "specType": "Composite",
          "separator": " - ",
          "parts": [
            {
              "spec": {
                "specType": "RelatedInstanceLabel",
                "pathToRelatedInstance": {
                  "relationship": {
                    "schemaName": "BisCore",
                    "className": "ExternalSourceIsInRepository"
                  },
                  "direction": "Forward"
                }
              }
            },
            {
              "spec": {
                "specType": "Property",
                "propertyName": "UserLabel"
              }
            }
          ]
        }
      ]
    },
    {
      "ruleType": "ImageIdOverride",
      "condition": "this.IsOfClass(\"ExternalSource\", \"BisCore\")",
      "imageIdExpression": "IIF(this.ConnectorName = \"IFCBridge\", \"icon-file-types-word\", IIF(this.ConnectorName = \"iModelBridgeForMstn\", \"icon-file-types-microstation\", \"icon-file-types-unknown\"))"
    },
    {
      "ruleType": "ImageIdOverride",
      "condition": "ThisNode.IsClassGroupingNode",
      "imageIdExpression": "\"icon-ec-class\""
    }
  ]
}

Live preview

Example 1

link to preview

Example 2

link to preview

TBD

• Icons
• Interactions

As described here.

At the moment linter reports 245 usages of internal APIs. Need to evaluate and fix.

Determined with @wilmaier that until an iModel cache is created (i.e. by opening an iModel in design review), the prompt will remain forever "fetching project info". I'm not personally aware of the cache or implementation, but was having issues using this package until Wil recommended me to try loading an iModel in design review first (which I did in a different browser), after which it started loading immediately.

Before 0.7.0 when the searchbar is clicked in Models tree, "..." will be displayed. When clicking the "..." button, Toolbar will expand horizontally , Refer to the below screenshot

After 0.7.0 when "..." is clicked, Toolbar is explanding vertically.

Partner would want it to be expanding horizontally . Is it possible?

It looks like this relies on the core's ViewTool and ViewGlobalLocation to get the terrain height from the BingElevationProvider if the terrain is enabled on the Map Layers setting panel.
And uses it as is without any adjustments when zooming to a location.
Without terrain enabled, zooms really far out.
With terrain enabled, zooms closer but still can't tell which address we are going to.
I had a play with the Map Layers' setting but couldn't see any way of controlling the zoom level.

I am seeing the following kinds of chaotic movement when the tree view animations are running. The framerate in the gifs does not represent the framerate seen by the user, which appears to happen every frame so probably 60fps, whereas the gifs appear much slower (although still unnatural)

This one occurs upon opening the itwin viewer in the default UI state, every frame it alternates, overflowing the visibility icons and scroll bars appear:

This one occurs when there is overflow of the visibility icons and you try to open+close a search:

This one really does not capture the maybe 20 frames of chaos that occur while it is closing

I can provide my application for reproducing if necessary.

The "show all", "hide all", "invert" buttons in the Models Tree should make sure they really show/hide ALL. At the moment it seems they only work at the models' level and making sure all models are displayed doesn't guarantee that all iModel content is going to be visible.

https://github.com/iTwin/presentation-performance-tests/issues/70#issuecomment-1511303070 shows that Models Tree initial load takes a long time because we're spending it determining children for Subject nodes, running the following ECSQL query:

SELECT
  *
FROM
  [bis].[GeometricModel3d] [this],
  ONLY [bis].[Subject] [parent]
  INNER JOIN [bis].[InformationPartitionElement] [partition] ON [partition].[ECInstanceId] = [this].[ModeledElement].[Id]
WHERE
  [parent].[ECInstanceId] IN (?)
  AND (
    [parent].[ECInstanceId] = [partition].[Parent].[Id]
    OR json_extract(
      [parent].[JsonProperties],
      '$.Subject.Model.TargetPartition'
    ) = printf('0x%x', [partition].[ECInstanceId])
  )
  AND NOT [this].[IsPrivate]
  AND json_extract(
    [partition].[JsonProperties],
    '$.PhysicalPartition.Model.Content'
  ) IS NULL
  AND json_extract(
    [partition].[JsonProperties],
    '$.GraphicalPartition3d.Model.Content'
  ) IS NULL
  AND EXISTS (
    SELECT
      1
    FROM
      [BisCore].[ModelContainsElements] relationship
      JOIN [BisCore].[GeometricElement3d] related ON [relationship].[TargetECClassId] = [related].[ECClassId]
      AND [relationship].[TargetECInstanceId] = [related].[ECInstanceId]
    WHERE
      [relationship].[SourceECInstanceId] = +[this].[ECInstanceId]
  )

Need to looks for ways to improve this.

Some ideas:

• Add an instance filter to Subject nodes to avoid selecting ones that we're not going to display. Then, add hasChildren: "Always" flag.
• Split Subject nodes' child specifications. Make sure cheaper ones are handled first.

Prerequisite: Release of a package version using itwinjs-core@4

See #448

Steps to reproduce

1. create a new package.json as follows

{
  "name": "measure",
  "version": "1.0.0",
  "dependencies": {
    "@itwin/measure-tools-react": "^0.11.0"
  }
}

2. run npm install. I'm using npm version 8.1.4, which is bundled with node 18 LTS
3. NPM throws error: ERESOLVE unable to resolve dependency tree

Previous version 0.10.6 of @itwin/measure-tools-react didn't have this problem (however it was showing a bunch of peer dependency conflicts as warnings)

We should provide more details on each configuration option, possibly add screenshots.

README.md references images using a relative path, but the images aren't packed, so they won't show up in npmjs.com. After merging to master we could change those relative links to appropriate links of images hosted on github in this repository.

CategoriesTree component in tree-wdget-react package shouldn't show SubCategory nodes if they have IsPrivate = true.

had a build fail because package.json was unsorted, which rush doesn't support sorting of. We should just invoke the sort-package-json script from npm on lint-staged as a pre-commit hook, so it never bothers us.

After upgrading to v3 the Measurements widget seems to always autoload, as a widget, but blank with nothing on it.

I forced upgraded to the implicit reference to 0.3.0 with no change.

Currently calling this as a workaround when the view is created, as I don't especially want the widget

UiItemsManager.unregister("MeasureToolsUiItemsProvider");

• itwinjs-core
• appui
• presentation

On Monday, October 4th, the viewer-components-react repo will be transferred to the iTwin Platform organization on Github.

All branches, pull requests, issues, and discussions will be transferred along with the repository, and all links to the old repository will redirect to the new repository which will be found at https://github.com/iTwin/viewer-components-react.

Once the move is complete, we recommend that you update the git origin in your local copy of the repo to the new repository location using:

git remote set-url origin https://github.com/iTwin/viewer-components-react.git

Hi there, I have set up the grouping and mapping widget, however out of the box the check boxes seem to not be working as they should. They are so small and skinny that I cant tell if anything is checked/selected or not. see image provided for evidence. Thanks in advance for you time

There is a lot of cleanup that need to be done regarding API of the Property Widget, e.g.:

• Props are not documented at all or documented very poorly.
• Prop favoritePropertiesScope makes no sense if you don't set enableFavoriteProperties.
• Prop headerContent makes no sense as it's overriden internally.
• Some context menu options are enabled through flags (e.g. enableCopyingPropertyText) and some by providing an array of options (additionalContextMenuOptions)

... and a bunch of other issues.

• itwinjs-core
• appui
• presentation

With the upcoming iTwin.js Core 3.0 release, the packages within this repository will need to be updated.

The following list of packages are still active in this repository and need to be updated. In addition some notes on how the release of these packages will happen is defined below (feedback is definitely appreciated).

List of packages

If anyone has a PR for updating, please link them to this issue to keep track.

• @bentley/tree-widget-react
• @bentley/property-grid-react
• @bentley/imodel-content-tree-react
• @bentley/imodel-react-hooks
• @bentley/geo-tools-react
• @bentley/measure-tools-react
• @bentley/breakdown-trees-react

Release strategy

The new version of the packages will live along side the currently supported 2.x packages in the repository to avoid having to create a separate release branch if a fix is required.

All packages released for the 3.0 release are transitioning to use the @itwin scope instead of the currently used @bentley. With the transition to the new scope/name we will be resetting all versions back down to 0.x.0 for the initial releases. Once they are deemed stable on top of iTwin.js Core 3.0 they will be released as a new major version 1.0.

(Side Note: The iTwin Viewer depends on the @bentley/property-grid-react and @bentley/tree-widget-react so those will be a requirement for the 3.0 release of both iTwin.js Core and the iTwin Viewer).

The component at the moment doesn't have a single test. Let's try to hit 80% coverage for the 1.0.

Maybe I'm doing something wrong here, but I am initializing UiFramework with a custom store instance, and as a result the Viewer component throws this error:

BentleyError.ts:400 Uncaught Error: Redux Store has not been initialized
    at Function.get store [as store] (StateManager.ts:89)
    at IModelLoader.tsx:247
    at renderWithHooks (react-dom.development.js:14803)
    at updateFunctionComponent (react-dom.development.js:17034)
    at updateSimpleMemoComponent (react-dom.development.js:16972)
    at beginWork (react-dom.development.js:18687)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22157)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at scheduleUpdateOnFiber (react-dom.development.js:21199)
    at dispatchAction (react-dom.development.js:15660)
    at getModelConnection (IModelLoader.tsx:161)

My cursory understanding is that itwin-viewer-react erroneously uses StateManager's store reference when it should be using UiFramework's store reference which allows both. Otherwise I don't know much about StateManager's role.

See iTwin/itwinjs-core#3737
Resolve the error re findDOMNode: https://user-images.githubusercontent.com/19624580/170455508-982a1d67-a348-4b07-8f7b-6e0cdb74c4d6.png

https://github.com/iTwin/itwinjs-core/blob/master/ui/components-react/src/components-react/table/component/Table.tsx#L86

here's the usage causing the error in strict mode:
https://github.com/iTwin/viewer-components-react/blob/master/packages/itwin/property-grid/src/components/ElementList.tsx#L202

Should be able to use CoSpace to test changes

At the moment the only difference between public and internal APIs is the barrel export. It's very inconvenient as it makes it hard to know whether a file is exported through the barrel (it may be exported indirectly) and error prone as it's very easy to mistakenly make a function public by adding an internal function to an exported file.

At the very least we should tag our functions. Using API exporter would help us identify possible issues (e.g. public function returning internal type) and track breaking changes in public API.

This is sad:

I hope for the 1.0 release we could at least get to 80%

In Models tree, tooltip of eye icon shows the localization key rather than value. Refer to the below screenshot

This behavior is observed in tree-widget-react 0.7.2 version, not sure about the previous versions.
Issue can be reproduced in below sandbox:
https://www.itwinjs.org/sandboxes/MuthuKalamani/ModelTreeWidgetCustomizations

Since the partner from Japan is using this and would like to show the text in Japanese, Request to fix it earlier

At the moment the widget has a default set of trees, but provides a pretty inconvenient way to hide them and include others. We should rethink the API to make it more convenient to use.

Hi

Is it going to be compatible with react 18? anybody working on it

The current implementation makes sure we display all models, all categories and there's nothing in the "never drawn" list.

However, there may be some elements in "always drawn" list with "exclusive" flag, which means we're going to draw only those elements. Which means we're not going to "show all".

Enable @itwin/no-internal lint rule and clean up internal API usages

Based on this conversation.