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,14 +24,21 @@ export const variableStepsList = (context, previousSteps, key, variable, variabl
     }
   }
   const sublists = Object.entries(description)
-    .map(([key, description]) => (
-      variableStepsList(
+    .map(([nextKey, description]) => (
+      (
+        // Cycle killer
+        variableType === description.type
+        && variableType !== type
+      )
+        ? []
+        : variableStepsList(
           context,
           previousSteps.concat(steps),
-        key,
-        ('object' === typeof variable && null !== variable) ? variable[key] : undefined,
+          nextKey,
+          ('object' === typeof variable && null !== variable) ? variable[nextKey] : undefined,
           description.type,
-        type
+          type,
+          maxDepth - 1,
         )
     ))
     .map((childLists) => (
@@ -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;
-  if ('undefined' === typeof value) {
-    stepsList = contextStepsList(context, type);
-  }
-  else {
-    stepsList = contextStepsList(
+  const stepsList = contextStepsList(
     context,
-      value.steps ? typeFromSteps(context, value.steps) : typeFromLiteral(value),
+    'undefined' === typeof value
+      ? type
+      : 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;