fix: step cycles

src/client/components/entity.jsx

@@ -9,7 +9,7 @@ const decorate = compose(
   contempo(require('./entity.raw.scss')),
 );
 
-const json = require('~/../fixtures/rock-projectile.entity.json');
+const json = require('~/../fixtures/mama-kitty.entity.json');
 
 const EntityComponent = (props) => {
   const entity = new Entity(json);

src/client/components/types/steps-lists.js

@@ -4,8 +4,11 @@ import {Traversal} from '@avocado/behavior/item/traversal';
 
 import {typeFits} from './typing';
 
-export const variableStepsList = (context, previousSteps, key, variable, variableType, type) => {
+export const variableStepsList = (context, previousSteps, key, variable, variableType, type, maxDepth) => {
   const steps = [];
+  if (0 === maxDepth) {
+    return [steps];
+  }
   if (typeFits(type, variableType)) {
     steps.push({type: 'key', key});
   }
@@ -21,15 +24,22 @@ export const variableStepsList = (context, previousSteps, key, variable, variabl
     }
   }
   const sublists = Object.entries(description)
-    .map(([key, description]) => (
+    .map(([nextKey, description]) => (
-      variableStepsList(
+      (
-        context,
+        // Cycle killer
-        previousSteps.concat(steps),
+        variableType === description.type
-        key,
+        && variableType !== type
-        ('object' === typeof variable && null !== variable) ? variable[key] : undefined,
-        description.type,
-        type
       )
+        ? []
+        : variableStepsList(
+          context,
+          previousSteps.concat(steps),
+          nextKey,
+          ('object' === typeof variable && null !== variable) ? variable[nextKey] : undefined,
+          description.type,
+          type,
+          maxDepth - 1,
+        )
     ))
     .map((childLists) => (
       childLists.map((stepsList) => (
@@ -41,11 +51,11 @@ export const variableStepsList = (context, previousSteps, key, variable, variabl
   return sublists.length > 0 ? [steps].concat(flatten(sublists)) : [steps];
 };
 
-export const contextStepsList = (context, type) => (
+export const contextStepsList = (context, type, maxDepth) => (
   flatten(
     Object.entries(context.all())
       .map(([key, [variable, variableType]]) => (
-        variableStepsList(context, [{type: 'key', key}], key, variable, variableType, type)
+        variableStepsList(context, [{type: 'key', key}], key, variable, variableType, type, maxDepth)
       ))
   )
     .filter((stepsList) => stepsList.length > 0)

src/client/components/types/steps.jsx

@@ -12,16 +12,15 @@ const decorate = compose(
 
 const Steps = (props) => {
   const {context, steps, type, value} = props;
-  let stepsList;
+  const stepsList = contextStepsList(
-  if ('undefined' === typeof value) {
+    context,
-    stepsList = contextStepsList(context, type);
+    'undefined' === typeof value
-  }
+      ? type
-  else {
+      : value.steps
-    stepsList = contextStepsList(
+        ? typeFromSteps(context, value.steps)
-      context,
+        : typeFromLiteral(value),
-      value.steps ? typeFromSteps(context, value.steps) : typeFromLiteral(value),
+    steps.length + 2
-    );
+  );
-  }
   return (
     <div className="steps">
       {steps.map((step, i) => {

src/client/components/types/value.type-renderer.jsx

@@ -35,7 +35,7 @@ const renderValue = (context, type, value) => {
       return <Component context={context} value={value} />;
     }
     case 'literal': {
-      const stepsList = contextStepsList(context, type);
+      const stepsList = contextStepsList(context, type, 3);
       const tierOptions = Object.keys(stepsList.reduce((r, optionSteps) => {
         if (!optionSteps[0] || !optionSteps[0].key) {
           return r;