fix(viewCreator): cache reference calculation

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}

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...`}>

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

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...