Scene fixes

src/benchmarks/avatarBenchmark.tsx

@@ -36,9 +36,9 @@ export const metadata = {
 
 export default function AvatarBenchmarkEntry() {
   const sceneEntity = useRouteScene()
-  return sceneEntity.value ? (
+  return sceneEntity ? (
     <>
-      <AvatarBenchmark rootEntity={sceneEntity.value} onComplete={undefined as any} />
+      <AvatarBenchmark rootEntity={sceneEntity} onComplete={undefined as any} />
       <ProfilerUI systemUUIDs={[SkinnedMeshTransformSystem, AvatarAnimationSystem]} />
     </>
   ) : null

src/benchmarks/avatarIKBenchmark.tsx

@@ -12,9 +12,9 @@ export const metadata = {
 
 export default function AvatarIKBenchmarkEntry() {
   const sceneEntity = useRouteScene()
-  return sceneEntity.value ? (
+  return sceneEntity ? (
     <>
-      <AvatarIKBenchmark rootEntity={sceneEntity.value} onComplete={undefined as any} />
+      <AvatarIKBenchmark rootEntity={sceneEntity} onComplete={undefined as any} />
       <ProfilerUI systemUUIDs={[SkinnedMeshTransformSystem]} />
     </>
   ) : null

src/benchmarks/heapBenchmark.tsx

@@ -54,10 +54,10 @@ export default function HeapBenchmarkEntry() {
     }
   }, [grow])
 
-  return sceneEntity.value && memory ? (
+  return sceneEntity && memory ? (
     <>
       <ProfilerUI systemUUIDs={[]} />
-      <div style={{ position: 'absolute', right: 12, top: 36, textAlign: 'right', pointerEvents: 'auto' }}>
+      <div style={{ position: 'absolute', right: 12, bottom: 36, textAlign: 'right', pointerEvents: 'auto' }}>
         <div>{`Used Heap: ${Math.trunc(memory.usedJSHeapSize * 0.000001)}mb`}</div>
         <button style={buttonStyle} onClick={() => setGrow(!grow)}>
           {grow ? 'Stop' : 'Grow'}

src/benchmarks/particlesBenchmark.tsx

@@ -12,9 +12,9 @@ export const metadata = {
 
 export default function ParticlesBenchmarkEntry() {
   const sceneEntity = useRouteScene()
-  return sceneEntity.value ? (
+  return sceneEntity ? (
     <>
-      <ParticlesBenchmark rootEntity={sceneEntity.value} onComplete={undefined as any} />
+      <ParticlesBenchmark rootEntity={sceneEntity} onComplete={undefined as any} />
       <ProfilerUI systemUUIDs={[ParticleSystem]} />
     </>
   ) : null

src/benchmarks/physicsBenchmark.tsx

@@ -12,9 +12,9 @@ export const metadata = {
 
 export default function PhysicsBenchmarkEntry() {
   const sceneEntity = useRouteScene()
-  return sceneEntity.value ? (
+  return sceneEntity ? (
     <>
-      <PhysicsBenchmark rootEntity={sceneEntity.value} onComplete={undefined as any} />
+      <PhysicsBenchmark rootEntity={sceneEntity} onComplete={undefined as any} />
       <ProfilerUI systemUUIDs={[PhysicsSystem, PhysicsPreTransformSystem]} />
     </>
   ) : null

src/benchmarks/utils/profilerUI.tsx

@@ -1,4 +1,4 @@
-import { ECSState, SystemUUID } from '@etherealengine/ecs'
+import { ECSState, System, SystemUUID, filterAndSortSystemsByAvgDuration } from '@etherealengine/ecs'
 import { getState } from '@etherealengine/hyperflux'
 import React, { useEffect, useState } from 'react'
 import { ProfileState, SystemProfileData } from '../../engine/benchmarks/Profiling'
@@ -9,12 +9,18 @@ export default function ProfilerUI(props: { systemUUIDs: SystemUUID[] }) {
   const { systemUUIDs } = props
   const [frameTime, SetFrameTime] = useState(0)
   const [systemProfileData, SetSystemProfileData] = useState([] as ({ uuid: SystemUUID } & SystemProfileData)[])
+  const [sortedSystemProfileData, SetSortedSystemProfileData] = useState([] as System[])
 
   useEffect(() => {
     const id = setInterval(() => {
       const ecsState = getState(ECSState)
       SetFrameTime(Math.trunc(ecsState.deltaSeconds * 1000))
 
+      SetSortedSystemProfileData(
+        filterAndSortSystemsByAvgDuration(0.2)
+          .filter((system) => system.uuid !== 'eepro.eetest.SystemProfilerSystem')
+          .slice(0, 6)
+      )
       SetSystemProfileData(
         systemUUIDs.map((uuid) => {
           return {
@@ -33,16 +39,30 @@ export default function ProfilerUI(props: { systemUUIDs: SystemUUID[] }) {
   return (
     <div className="ProfilerUI" style={{ position: 'absolute', right: 12, top: 12, textAlign: 'right' }}>
       <div>{`Frame Time: ${frameTime}ms`}</div>
-      {systemProfileData.map((profileData) => {
-        return (
-          <>
-            <div>{`System: ${profileData.uuid}`}</div>
-            <div>{`avg: ${Math.trunc(profileData.avgDuration * 1000) / 1000}ms \n max: ${
-              Math.trunc(profileData.maxDuration * 1000) / 1000
-            }ms`}</div>
-          </>
-        )
-      })}
+      <div style={{ paddingTop: '18px' }}>
+        {'Benchmarked Systems: '}
+        {systemProfileData.map((profileData) => {
+          return (
+            <>
+              <div>{`System: ${profileData.uuid}`}</div>
+              <div>{`avg: ${Math.trunc(profileData.avgDuration * 1000) / 1000}ms \n max: ${
+                Math.trunc(profileData.maxDuration * 1000) / 1000
+              }ms`}</div>
+            </>
+          )
+        })}
+      </div>
+      <div style={{ paddingTop: '18px' }}>
+        {'Longest Running Systems: '}
+        {sortedSystemProfileData.map((system) => {
+          return (
+            <>
+              <div>{`System: ${system.uuid}`}</div>
+              <div>{`avg: ${Math.trunc(system.avgSystemDuration * 1000) / 1000}ms`}</div>
+            </>
+          )
+        })}
+      </div>
     </div>
   )
 }

src/benchmarksAllRoute.tsx

@@ -8,9 +8,9 @@ const BenchmarkAllRoute = () => {
   const sceneEntity = useRouteScene()
 
   useEffect(() => {
-    if (!sceneEntity.value) return
+    if (!sceneEntity) return
 
-    setComponent(sceneEntity.value, BenchmarkComponent)
+    setComponent(sceneEntity, BenchmarkComponent)
     import('./engine/benchmarks/BenchmarkOrchestration')
   }, [sceneEntity])
 

src/engine/benchmarks/Profiling.ts

@@ -40,23 +40,23 @@ const execute = () => {
   const engineVersion = global.__IR_ENGINE_VERSION__
   const profileData = getMutableState(ProfileState)
   const { gpu, device } = getState(PerformanceState)
-  const systems = [...SystemDefinitions.values()]
+  const systems = SystemDefinitions.values()
 
   const engineVersionData = profileData.systemProfilingData[engineVersion]
 
   if (!engineVersionData[gpu].value) engineVersionData.merge({ [gpu]: {} })
   const systemDataMap = engineVersionData[gpu]
 
+  const data = {}
   for (const system of systems) {
     if (system.uuid == 'eepro.eetest.SystemProfilerSystem') continue
     const max = systemDataMap[system.uuid].value ? systemDataMap[system.uuid].maxDuration.value : 0
-    systemDataMap.merge({
-      [system.uuid]: {
-        avgDuration: system.avgSystemDuration,
-        maxDuration: Math.max(max, system.systemDuration)
-      }
-    })
+    data[system.uuid] = {
+      avgDuration: system.avgSystemDuration,
+      maxDuration: Math.max(max, system.systemDuration)
+    }
   }
+  systemDataMap.merge(data)
 }
 
 export default defineSystem({

src/examples/avatarMocap.tsx

@@ -233,5 +233,5 @@ function AvatarMocap(props: { sceneEntity: Entity }) {
 
 export default function AvatarMocapEntry() {
   const sceneEntity = useRouteScene()
-  return sceneEntity.value ? <AvatarMocap sceneEntity={sceneEntity.value} /> : null
+  return sceneEntity ? <AvatarMocap sceneEntity={sceneEntity} /> : null
 }

src/examples/avatarTest.tsx

@@ -25,7 +25,7 @@ export default function AvatarTestEntry() {
   const created = useHookstate(false)
 
   useEffect(() => {
-    if (sceneEntity.value && network?.ready?.value && avatarList.value.length > 0 && !created.value) {
+    if (sceneEntity && network?.ready?.value && avatarList.value.length > 0 && !created.value) {
       created.set(true)
       const data = [...avatarList.get(NO_PROXY)] as AvatarType[]
       mockNetworkAvatars(data)

src/examples/avatarTestByIndex.tsx

@@ -20,7 +20,7 @@ export default function AvatarBenchmarking() {
   const created = useHookstate(false)
 
   useEffect(() => {
-    if (sceneEntity.value && network?.ready.value && avatarData.value && !created.value) {
+    if (sceneEntity && network?.ready.value && avatarData.value && !created.value) {
       created.set(true)
 
       const avatar = avatarData.get(NO_PROXY) as AvatarType

src/examples/componentExamples/componentExamples.tsx

@@ -424,5 +424,5 @@ export default function ComponentExamplesRoute(props: {
   Reactor: React.FC<{ parent: Entity; onLoad: (entity: Entity) => void }>
 }) {
   const sceneEntity = useRouteScene()
-  return sceneEntity.value ? <ComponentExamples sceneEntity={sceneEntity.value} Reactor={props.Reactor} /> : null
+  return sceneEntity ? <ComponentExamples sceneEntity={sceneEntity} Reactor={props.Reactor} /> : null
 }

src/examples/gltf.tsx

@@ -86,7 +86,7 @@ const GLTF = (props: { sceneEntity: Entity }) => {
 export default function GLTFViewer() {
   const sceneEntity = useRouteScene()
 
-  return sceneEntity.value ? (
+  return sceneEntity ? (
     <div
       id="dnd-container"
       style={{
@@ -100,7 +100,7 @@ export default function GLTFViewer() {
       }}
     >
       <DndWrapper id="dnd-container">
-        <GLTF sceneEntity={sceneEntity.value} />
+        <GLTF sceneEntity={sceneEntity} />
       </DndWrapper>
     </div>
   ) : null

src/sceneRoute.tsx

@@ -86,7 +86,7 @@ export const useRouteScene = (projectName = 'ee-development-test-suite', sceneNa
     getComponent(viewerEntity, CameraComponent).position.set(0, 3, 4)
   }, [viewerEntity])
 
-  return sceneEntity
+  return sceneEntity.value
 }
 
 const getPathForRoute = (category: string, name: string) => {