From 04b4c2f7d5e998638930c178e23b02393d851d6f Mon Sep 17 00:00:00 2001
From: Stig Ofstad <stigofstad@gmail.com>
Date: Mon, 11 Mar 2024 09:29:26 +0100
Subject: [PATCH] fix(viewCreator): cache reference calculation

---
 .../src/view_selector/SidebarPlugin.tsx              |  1 +
 packages/dm-core/src/components/EntityView.tsx       |  6 +++++-
 .../src/components/ViewCreator/ViewCreator.tsx       | 12 +++++++-----
 packages/dm-core/styleMock.js                        |  2 ++
 4 files changed, 15 insertions(+), 6 deletions(-)
 create mode 100644 packages/dm-core/styleMock.js

diff --git a/packages/dm-core-plugins/src/view_selector/SidebarPlugin.tsx b/packages/dm-core-plugins/src/view_selector/SidebarPlugin.tsx
index e10540b1a..573168b9b 100644
--- a/packages/dm-core-plugins/src/view_selector/SidebarPlugin.tsx
+++ b/packages/dm-core-plugins/src/view_selector/SidebarPlugin.tsx
@@ -46,6 +46,7 @@ export const SidebarPlugin = (
       />
       {viewItem.viewConfig ? (
         <ViewCreator
+          key={`${viewItem.rootEntityId}-${viewItem.viewConfig.scope}`}
           idReference={viewItem.rootEntityId}
           viewConfig={viewItem.viewConfig}
           onOpen={addView}
diff --git a/packages/dm-core/src/components/EntityView.tsx b/packages/dm-core/src/components/EntityView.tsx
index 4c3c6c349..05ee0d331 100644
--- a/packages/dm-core/src/components/EntityView.tsx
+++ b/packages/dm-core/src/components/EntityView.tsx
@@ -34,7 +34,9 @@ export const EntityView = (props: IEntityView): React.ReactElement => {
     onChange,
   } = props
   if (!type)
-    throw new Error(`<EntityView> must be called with a type. Got "${type}"`)
+    throw new Error(
+      `<EntityView> must be called with a type. Got "${type}", idReference: "${idReference}"`
+    )
   const { recipe, isLoading, error, getUiPlugin } = useRecipe(
     type,
     recipeName,
@@ -44,6 +46,7 @@ export const EntityView = (props: IEntityView): React.ReactElement => {
   // Refresh Button stuff
   const [reloadCounter, setReloadCounter] = useState(0)
   const [hoverRefresh, setHoverRefresh] = useState(false)
+
   if (isLoading)
     return (
       <div style={{ alignSelf: 'center', padding: '50px' }}>
@@ -63,6 +66,7 @@ export const EntityView = (props: IEntityView): React.ReactElement => {
     return <div className='w-full flex'>No compatible uiRecipes for entity</div>
 
   const refreshable = showRefreshButton ?? recipe.showRefreshButton ?? false
+
   return (
     <Suspense fallback={<Loading />}>
       <ErrorBoundary message={`Plugin "${recipe.plugin}" crashed...`}>
diff --git a/packages/dm-core/src/components/ViewCreator/ViewCreator.tsx b/packages/dm-core/src/components/ViewCreator/ViewCreator.tsx
index 92ebab793..801ef4553 100644
--- a/packages/dm-core/src/components/ViewCreator/ViewCreator.tsx
+++ b/packages/dm-core/src/components/ViewCreator/ViewCreator.tsx
@@ -1,6 +1,6 @@
 import { Typography } from '@equinor/eds-core-react'
 import { AxiosResponse } from 'axios'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import { EntityView, Loading, TAttribute, useApplication } from '../../index'
 import {
   IUIPlugin,
@@ -43,9 +43,12 @@ export const ViewCreator = (props: TViewCreator): React.ReactElement => {
   const [isLoading, setIsLoading] = useState<boolean>(true)
   const [error, setError] = useState<Error>()
   const [attribute, setAttribute] = useState<TAttribute>()
-  const [directAddress, setDirectAddress] = useState<string>(idReference)
+  const [directAddress, setDirectAddress] = useState<string>()
 
-  const reference = getTarget(idReference, viewConfig)
+  const reference = useMemo(
+    () => getTarget(idReference, viewConfig),
+    [idReference, viewConfig]
+  )
 
   useEffect(() => {
     dmssAPI
@@ -61,7 +64,7 @@ export const ViewCreator = (props: TViewCreator): React.ReactElement => {
       .finally(() => setIsLoading(false))
   }, [reference])
 
-  if (isLoading) return <Loading />
+  if (isLoading || !directAddress) return <Loading />
   if (error)
     return (
       <Typography>
@@ -76,7 +79,6 @@ export const ViewCreator = (props: TViewCreator): React.ReactElement => {
     throw new Error(
       'Cannot create a View without a "viewConfig". Sure the attribute is properly named?'
     )
-
   if (isInlineRecipeViewConfig(viewConfig)) {
     return (
       <InlineRecipeView
diff --git a/packages/dm-core/styleMock.js b/packages/dm-core/styleMock.js
new file mode 100644
index 000000000..072e1e5f6
--- /dev/null
+++ b/packages/dm-core/styleMock.js
@@ -0,0 +1,2 @@
+// Tests will fail if you delete this file.
+// Has something to do with importing css files...