From 4fdec163ffd259164da6b2ecb9d022a3c260a750 Mon Sep 17 00:00:00 2001
From: "oleksiy.medvediev" <oleksiy.medvediev@zade.agency>
Date: Thu, 17 Nov 2022 13:17:18 +0200
Subject: [PATCH] add: "Street Segments" and "imagery" entities are expanded
 upon load by default

---
 src/components/scenegraph/Entity.js     | 34 +++++++++++++++++--------
 src/components/scenegraph/SceneGraph.js | 18 ++++++++++++-
 2 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/src/components/scenegraph/Entity.js b/src/components/scenegraph/Entity.js
index d43a1640..900ebd09 100644
--- a/src/components/scenegraph/Entity.js
+++ b/src/components/scenegraph/Entity.js
@@ -1,7 +1,8 @@
-import React from 'react';
+import { cloneEntity, printEntity, removeEntity } from '../../lib/entity';
+
 import PropTypes from 'prop-types';
+import React from 'react';
 import classnames from 'classnames';
-import { printEntity, removeEntity, cloneEntity } from '../../lib/entity';
 
 const Events = require('../../lib/Events.js');
 
@@ -13,7 +14,9 @@ export default class Entity extends React.Component {
     isFiltering: PropTypes.bool,
     isSelected: PropTypes.bool,
     selectEntity: PropTypes.func,
-    toggleExpandedCollapsed: PropTypes.func
+    toggleExpandedCollapsed: PropTypes.func,
+    isInitiallyExpanded: PropTypes.bool,
+    initiallyExpandEntity: PropTypes.func
   };
 
   constructor(props) {
@@ -21,15 +24,19 @@ export default class Entity extends React.Component {
     this.state = {};
   }
 
-  onClick = (evt) => {
+  componentDidMount() {
+    !this.props.isInitiallyExpanded && this.props.initiallyExpandEntity();
+  }
+
+  onClick = evt => {
     if (!evt.target.classList.contains('fa')) {
       this.props.selectEntity(this.props.entity);
-    }    
-  }
+    }
+  };
 
   onDoubleClick = () => Events.emit('objectfocus', this.props.entity.object3D);
 
-  toggleVisibility = (evt) => {
+  toggleVisibility = evt => {
     const entity = this.props.entity;
     const visible =
       entity.tagName.toLowerCase() === 'a-scene'
@@ -68,13 +75,20 @@ export default class Entity extends React.Component {
       );
 
     // Add spaces depending on depth.
-    const pad = (this.props.depth > 1)? '&nbsp;&nbsp;&nbsp;&nbsp;'.repeat(this.props.depth):'';
+    const pad =
+      this.props.depth > 1
+        ? '&nbsp;&nbsp;&nbsp;&nbsp;'.repeat(this.props.depth)
+        : '';
 
     let collapse;
-    if (entity.children.length > 0 && !isFiltering && !!entity.hasAttribute('data-layer-show-children')) {
+    if (
+      entity.children.length > 0 &&
+      !isFiltering &&
+      !!entity.hasAttribute('data-layer-show-children')
+    ) {
       collapse = (
         <span
-          onClick={(evt) => {
+          onClick={evt => {
             evt.stopPropagation();
             this.props.toggleExpandedCollapsed(entity);
           }}
diff --git a/src/components/scenegraph/SceneGraph.js b/src/components/scenegraph/SceneGraph.js
index 23bef6e0..d301c899 100644
--- a/src/components/scenegraph/SceneGraph.js
+++ b/src/components/scenegraph/SceneGraph.js
@@ -30,7 +30,8 @@ export default class SceneGraph extends React.Component {
       filter: '',
       filteredEntities: [],
       selectedIndex: -1,
-      leftBarHide: false
+      leftBarHide: false,
+      initiallyExpandedEntities: []
     };
 
     this.rebuildEntityOptions = debounce(
@@ -279,6 +280,21 @@ export default class SceneGraph extends React.Component {
           isSelected={this.props.selectedEntity === entityOption.entity}
           selectEntity={this.selectEntity}
           toggleExpandedCollapsed={this.toggleExpandedCollapsed}
+          isInitiallyExpanded={this.state.initiallyExpandedEntities.some(
+            item => item === entityOption.entity.id
+          )}
+          initiallyExpandEntity={() => {
+            this.toggleExpandedCollapsed(entityOption.entity);
+            this.setState(prevState => ({
+              ...prevState,
+              initiallyExpandedEntities: [
+                ...prevState.initiallyExpandedEntities.filter(
+                  item => item !== entityOption.entity.id
+                ),
+                entityOption.entity.id
+              ]
+            }));
+          }}
         />
       );
       layerEntities.push(entity);