From 72b1b95eac98a0c1fd8f8ad550fa8b1466727a29 Mon Sep 17 00:00:00 2001
From: jy95 <jacques.yakoub@gmail.com>
Date: Sun, 31 Dec 2023 20:08:15 +0100
Subject: [PATCH] feat: display json-pointer and level in SchemaItem

---
 .../__snapshots__/array.test.tsx.snap         |  90 +++++++--
 .../__snapshots__/constructor.test.tsx.snap   |  25 ++-
 .../__snapshots__/corner_cases.test.tsx.snap  |  25 ++-
 .../generateFriendlyName.test.tsx.snap        | 135 ++++++++++---
 .../generic_keywords.test.tsx.snap            |   5 +-
 .../__snapshots__/object.test.tsx.snap        | 130 ++++++++++---
 .../__snapshots__/refs.test.tsx.snap          |  15 +-
 .../schema_conditionally.test.tsx.snap        | 180 ++++++++++++++----
 .../__snapshots__/string.test.tsx.snap        | 105 ++++++++--
 .../components/SchemaItem/SchemaItem.tsx      |   5 +-
 10 files changed, 572 insertions(+), 143 deletions(-)

diff --git a/__tests__/JSONSchemaViewer/__snapshots__/array.test.tsx.snap b/__tests__/JSONSchemaViewer/__snapshots__/array.test.tsx.snap
index 5cba6132..80774d5f 100644
--- a/__tests__/JSONSchemaViewer/__snapshots__/array.test.tsx.snap
+++ b/__tests__/JSONSchemaViewer/__snapshots__/array.test.tsx.snap
@@ -61,7 +61,10 @@ exports[`JSONSchemaViewer - Array type test 1 1`] = `
         array
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/contains"
+        >
           <details
             open={false}
           >
@@ -144,7 +147,10 @@ exports[`JSONSchemaViewer - Array type test 2 1`] = `
         array
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/items"
+        >
           <details
             open={false}
           >
@@ -281,7 +287,10 @@ exports[`JSONSchemaViewer - Array type test 4 1`] = `
         array
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/contains"
+        >
           <details
             open={false}
           >
@@ -386,7 +395,10 @@ exports[`JSONSchemaViewer - Array type test 5 1`] = `
         array
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/prefixItems/0"
+        >
           <details
             open={false}
           >
@@ -440,7 +452,10 @@ exports[`JSONSchemaViewer - Array type test 5 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/prefixItems/1"
+        >
           <details
             open={false}
           >
@@ -494,7 +509,10 @@ exports[`JSONSchemaViewer - Array type test 5 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/prefixItems/2"
+        >
           <details
             open={false}
           >
@@ -572,7 +590,10 @@ exports[`JSONSchemaViewer - Array type test 5 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/prefixItems/3"
+        >
           <details
             open={false}
           >
@@ -657,7 +678,10 @@ exports[`JSONSchemaViewer - Array type test 5 1`] = `
         </li>
       </ul>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/items"
+        >
           <details
             open={false}
           >
@@ -986,7 +1010,10 @@ exports[`JSONSchemaViewer - Array type test 11 1`] = `
         array
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/items/0"
+        >
           <details
             open={false}
           >
@@ -1031,7 +1058,10 @@ exports[`JSONSchemaViewer - Array type test 11 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/items/1"
+        >
           <details
             open={false}
           >
@@ -1124,7 +1154,10 @@ exports[`JSONSchemaViewer - Array type test 12 1`] = `
         array
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/prefixItems/0"
+        >
           <details
             open={false}
           >
@@ -1173,7 +1206,10 @@ exports[`JSONSchemaViewer - Array type test 12 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/prefixItems/1"
+        >
           <details
             open={false}
           >
@@ -1270,7 +1306,10 @@ exports[`JSONSchemaViewer - Array type test 13 1`] = `
         array
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/items"
+        >
           <details
             open={false}
           >
@@ -1408,7 +1447,10 @@ exports[`JSONSchemaViewer - Array type test 15 1`] = `
         array
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/items/0"
+        >
           <details
             open={false}
           >
@@ -1457,7 +1499,10 @@ exports[`JSONSchemaViewer - Array type test 15 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/items/1"
+        >
           <details
             open={false}
           >
@@ -1508,7 +1553,10 @@ exports[`JSONSchemaViewer - Array type test 15 1`] = `
         </li>
       </ul>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/additionalItems"
+        >
           <details
             open={false}
           >
@@ -1605,7 +1653,10 @@ exports[`JSONSchemaViewer - Array type test 16 1`] = `
         array
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/prefixItems/0"
+        >
           <details
             open={false}
           >
@@ -1652,7 +1703,10 @@ exports[`JSONSchemaViewer - Array type test 16 1`] = `
         </li>
       </ul>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/unevaluatedItems"
+        >
           <details
             open={false}
           >
diff --git a/__tests__/JSONSchemaViewer/__snapshots__/constructor.test.tsx.snap b/__tests__/JSONSchemaViewer/__snapshots__/constructor.test.tsx.snap
index 92015e30..69525c28 100644
--- a/__tests__/JSONSchemaViewer/__snapshots__/constructor.test.tsx.snap
+++ b/__tests__/JSONSchemaViewer/__snapshots__/constructor.test.tsx.snap
@@ -78,7 +78,10 @@ exports[`JSONSchemaViewer - constructor Overwrite default UnresolvedRefsComponen
         object
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/data"
+        >
           <details
             open={false}
           >
@@ -125,7 +128,10 @@ exports[`JSONSchemaViewer - constructor Overwrite default UnresolvedRefsComponen
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/children"
+        >
           <details
             open={false}
           >
@@ -164,7 +170,10 @@ exports[`JSONSchemaViewer - constructor Overwrite default UnresolvedRefsComponen
                   array
                 </span>
                 <ul>
-                  <li>
+                  <li
+                    data-level={2}
+                    id="/properties/children/items"
+                  >
                     <details
                       open={false}
                     >
@@ -272,7 +281,10 @@ exports[`JSONSchemaViewer - constructor Overwrite default ValueComponent value 1
         object
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/customField"
+        >
           <details
             open={false}
           >
@@ -402,7 +414,10 @@ exports[`JSONSchemaViewer - constructor Overwrite default ValueComponent value 1
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/customConstObject"
+        >
           <details
             open={false}
           >
diff --git a/__tests__/JSONSchemaViewer/__snapshots__/corner_cases.test.tsx.snap b/__tests__/JSONSchemaViewer/__snapshots__/corner_cases.test.tsx.snap
index bde7833b..63eb09b0 100644
--- a/__tests__/JSONSchemaViewer/__snapshots__/corner_cases.test.tsx.snap
+++ b/__tests__/JSONSchemaViewer/__snapshots__/corner_cases.test.tsx.snap
@@ -16,7 +16,10 @@ exports[`JSONSchemaViewer - corner cases CreateArray - invalid usage of Addition
     array
   </span>,
   <ul>
-    <li>
+    <li
+      data-level={1}
+      id="/items"
+    >
       <details
         open={false}
       >
@@ -63,7 +66,10 @@ exports[`JSONSchemaViewer - corner cases CreateArray - invalid usage of Addition
     </li>
   </ul>,
   <ul>
-    <li>
+    <li
+      data-level={1}
+      id="/additionalItems"
+    >
       <details
         open={false}
       >
@@ -135,7 +141,10 @@ exports[`JSONSchemaViewer - corner cases CreateArray - sub properties as boolean
     array
   </span>,
   <ul>
-    <li>
+    <li
+      data-level={1}
+      id="/prefixItems"
+    >
       <details
         open={false}
       >
@@ -184,7 +193,10 @@ exports[`JSONSchemaViewer - corner cases CreateArray - sub properties as boolean
     </li>
   </ul>,
   <ul>
-    <li>
+    <li
+      data-level={1}
+      id="/items"
+    >
       <details
         open={false}
       >
@@ -233,7 +245,10 @@ exports[`JSONSchemaViewer - corner cases CreateArray - sub properties as boolean
     </li>
   </ul>,
   <ul>
-    <li>
+    <li
+      data-level={1}
+      id="/contains"
+    >
       <details
         open={false}
       >
diff --git a/__tests__/JSONSchemaViewer/__snapshots__/generateFriendlyName.test.tsx.snap b/__tests__/JSONSchemaViewer/__snapshots__/generateFriendlyName.test.tsx.snap
index d1ada8c1..4ca81f22 100644
--- a/__tests__/JSONSchemaViewer/__snapshots__/generateFriendlyName.test.tsx.snap
+++ b/__tests__/JSONSchemaViewer/__snapshots__/generateFriendlyName.test.tsx.snap
@@ -25,7 +25,10 @@ exports[`JSONSchemaViewer - generateFriendlyName cases test Array specified only
         array
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/prefixItems/0"
+        >
           <details
             open={false}
           >
@@ -76,7 +79,10 @@ exports[`JSONSchemaViewer - generateFriendlyName cases test Array specified only
                   array
                 </span>
                 <ul>
-                  <li>
+                  <li
+                    data-level={2}
+                    id="/prefixItems/0/items"
+                  >
                     <details
                       open={false}
                     >
@@ -270,7 +276,10 @@ exports[`JSONSchemaViewer - generateFriendlyName cases test Array specified only
         array
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/prefixItems/0"
+        >
           <details
             open={false}
           >
@@ -317,7 +326,10 @@ exports[`JSONSchemaViewer - generateFriendlyName cases test Array specified only
                   array
                 </span>
                 <ul>
-                  <li>
+                  <li
+                    data-level={2}
+                    id="/prefixItems/0/prefixItems/0"
+                  >
                     <details
                       open={false}
                     >
@@ -362,7 +374,10 @@ exports[`JSONSchemaViewer - generateFriendlyName cases test Array specified only
                       </div>
                     </details>
                   </li>
-                  <li>
+                  <li
+                    data-level={2}
+                    id="/prefixItems/0/prefixItems/1"
+                  >
                     <details
                       open={false}
                     >
@@ -409,7 +424,10 @@ exports[`JSONSchemaViewer - generateFriendlyName cases test Array specified only
                   </li>
                 </ul>
                 <ul>
-                  <li>
+                  <li
+                    data-level={2}
+                    id="/prefixItems/0/items"
+                  >
                     <details
                       open={false}
                     >
@@ -511,7 +529,10 @@ exports[`JSONSchemaViewer - generateFriendlyName cases test Array specified with
         array
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/items"
+        >
           <details
             open={false}
           >
@@ -570,7 +591,10 @@ exports[`JSONSchemaViewer - generateFriendlyName cases test Array specified with
                   array
                 </span>
                 <ul>
-                  <li>
+                  <li
+                    data-level={2}
+                    id="/items/items/0"
+                  >
                     <details
                       open={false}
                     >
@@ -615,7 +639,10 @@ exports[`JSONSchemaViewer - generateFriendlyName cases test Array specified with
                       </div>
                     </details>
                   </li>
-                  <li>
+                  <li
+                    data-level={2}
+                    id="/items/items/1"
+                  >
                     <details
                       open={false}
                     >
@@ -662,7 +689,10 @@ exports[`JSONSchemaViewer - generateFriendlyName cases test Array specified with
                   </li>
                 </ul>
                 <ul>
-                  <li>
+                  <li
+                    data-level={2}
+                    id="/items/additionalItems"
+                  >
                     <details
                       open={false}
                     >
@@ -757,7 +787,10 @@ exports[`JSONSchemaViewer - generateFriendlyName cases test Array specified with
         array
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/prefixItems/0"
+        >
           <details
             open={false}
           >
@@ -808,7 +841,10 @@ exports[`JSONSchemaViewer - generateFriendlyName cases test Array specified with
                   array
                 </span>
                 <ul>
-                  <li>
+                  <li
+                    data-level={2}
+                    id="/prefixItems/0/items/0"
+                  >
                     <details
                       open={false}
                     >
@@ -855,7 +891,10 @@ exports[`JSONSchemaViewer - generateFriendlyName cases test Array specified with
                   </li>
                 </ul>
                 <ul>
-                  <li>
+                  <li
+                    data-level={2}
+                    id="/prefixItems/0/contains"
+                  >
                     <details
                       open={false}
                     >
@@ -950,7 +989,10 @@ exports[`JSONSchemaViewer - generateFriendlyName cases test Array specified with
         array
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/items"
+        >
           <details
             open={false}
           >
@@ -1009,7 +1051,10 @@ exports[`JSONSchemaViewer - generateFriendlyName cases test Array specified with
                   array
                 </span>
                 <ul>
-                  <li>
+                  <li
+                    data-level={2}
+                    id="/items/prefixItems/0"
+                  >
                     <details
                       open={false}
                     >
@@ -1054,7 +1099,10 @@ exports[`JSONSchemaViewer - generateFriendlyName cases test Array specified with
                       </div>
                     </details>
                   </li>
-                  <li>
+                  <li
+                    data-level={2}
+                    id="/items/prefixItems/1"
+                  >
                     <details
                       open={false}
                     >
@@ -1101,7 +1149,10 @@ exports[`JSONSchemaViewer - generateFriendlyName cases test Array specified with
                   </li>
                 </ul>
                 <ul>
-                  <li>
+                  <li
+                    data-level={2}
+                    id="/items/unevaluatedItems"
+                  >
                     <details
                       open={false}
                     >
@@ -1196,7 +1247,10 @@ exports[`JSONSchemaViewer - generateFriendlyName cases test Multiple types 1`] =
         array
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/prefixItems/0"
+        >
           <details
             open={false}
           >
@@ -1298,7 +1352,10 @@ exports[`JSONSchemaViewer - generateFriendlyName cases test Not (integer) 1`] =
         array
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/prefixItems/0"
+        >
           <details
             open={false}
           >
@@ -1394,7 +1451,10 @@ exports[`JSONSchemaViewer - generateFriendlyName cases test Number without expli
         array
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/prefixItems/0"
+        >
           <details
             open={false}
           >
@@ -1487,7 +1547,10 @@ exports[`JSONSchemaViewer - generateFriendlyName cases test OR / XOR / AND 1`] =
         array
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/prefixItems/0"
+        >
           <details
             open={false}
           >
@@ -1653,7 +1716,10 @@ exports[`JSONSchemaViewer - generateFriendlyName cases test OR / XOR / AND 1`] =
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/prefixItems/1"
+        >
           <details
             open={false}
           >
@@ -1819,7 +1885,10 @@ exports[`JSONSchemaViewer - generateFriendlyName cases test OR / XOR / AND 1`] =
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/prefixItems/2"
+        >
           <details
             open={false}
           >
@@ -2013,7 +2082,10 @@ exports[`JSONSchemaViewer - generateFriendlyName cases test Object without expli
         array
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/prefixItems/0"
+        >
           <details
             open={false}
           >
@@ -2106,7 +2178,10 @@ exports[`JSONSchemaViewer - generateFriendlyName cases test Prefer title 1`] = `
         array
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/prefixItems/0"
+        >
           <details
             open={false}
           >
@@ -2133,7 +2208,10 @@ exports[`JSONSchemaViewer - generateFriendlyName cases test Prefer title 1`] = `
                   object
                 </span>
                 <ul>
-                  <li>
+                  <li
+                    data-level={2}
+                    id="/prefixItems/0/properties/text"
+                  >
                     <details
                       open={false}
                     >
@@ -2238,7 +2316,10 @@ exports[`JSONSchemaViewer - generateFriendlyName cases test Simple array 1`] = `
         array
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/prefixItems/0"
+        >
           <details
             open={false}
           >
diff --git a/__tests__/JSONSchemaViewer/__snapshots__/generic_keywords.test.tsx.snap b/__tests__/JSONSchemaViewer/__snapshots__/generic_keywords.test.tsx.snap
index 65477383..34e77071 100644
--- a/__tests__/JSONSchemaViewer/__snapshots__/generic_keywords.test.tsx.snap
+++ b/__tests__/JSONSchemaViewer/__snapshots__/generic_keywords.test.tsx.snap
@@ -153,7 +153,10 @@ exports[`JSONSchemaViewer - Generic keywords test const 1`] = `
         object
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/country"
+        >
           <details
             open={false}
           >
diff --git a/__tests__/JSONSchemaViewer/__snapshots__/object.test.tsx.snap b/__tests__/JSONSchemaViewer/__snapshots__/object.test.tsx.snap
index a839017a..d3df0385 100644
--- a/__tests__/JSONSchemaViewer/__snapshots__/object.test.tsx.snap
+++ b/__tests__/JSONSchemaViewer/__snapshots__/object.test.tsx.snap
@@ -25,7 +25,10 @@ exports[`JSONSchemaViewer - object test Unspecified required properties 1`] = `
         object
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/prop1"
+        >
           <details
             open={false}
           >
@@ -76,7 +79,10 @@ exports[`JSONSchemaViewer - object test Unspecified required properties 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/prop2"
+        >
           <details
             open={false}
           >
@@ -211,7 +217,10 @@ exports[`JSONSchemaViewer - object test additionalProperties (JSON Schema) 1`] =
         object
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/number"
+        >
           <details
             open={false}
           >
@@ -256,7 +265,10 @@ exports[`JSONSchemaViewer - object test additionalProperties (JSON Schema) 1`] =
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/street_name"
+        >
           <details
             open={false}
           >
@@ -301,7 +313,10 @@ exports[`JSONSchemaViewer - object test additionalProperties (JSON Schema) 1`] =
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/street_type"
+        >
           <details
             open={false}
           >
@@ -372,7 +387,10 @@ exports[`JSONSchemaViewer - object test additionalProperties (JSON Schema) 1`] =
         </li>
       </ul>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/additionalProperties"
+        >
           <details
             open={false}
           >
@@ -455,7 +473,10 @@ exports[`JSONSchemaViewer - object test additionalProperties (false) 1`] = `
         object
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/number"
+        >
           <details
             open={false}
           >
@@ -500,7 +521,10 @@ exports[`JSONSchemaViewer - object test additionalProperties (false) 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/street_name"
+        >
           <details
             open={false}
           >
@@ -545,7 +569,10 @@ exports[`JSONSchemaViewer - object test additionalProperties (false) 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/street_type"
+        >
           <details
             open={false}
           >
@@ -657,7 +684,10 @@ exports[`JSONSchemaViewer - object test additionalProperties with patternPropert
         object
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/builtin"
+        >
           <details
             open={false}
           >
@@ -704,7 +734,10 @@ exports[`JSONSchemaViewer - object test additionalProperties with patternPropert
         </li>
       </ul>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/patternProperties/^S_"
+        >
           <details
             open={false}
           >
@@ -749,7 +782,10 @@ exports[`JSONSchemaViewer - object test additionalProperties with patternPropert
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/patternProperties/^I_"
+        >
           <details
             open={false}
           >
@@ -796,7 +832,10 @@ exports[`JSONSchemaViewer - object test additionalProperties with patternPropert
         </li>
       </ul>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/additionalProperties"
+        >
           <details
             open={false}
           >
@@ -1025,7 +1064,10 @@ exports[`JSONSchemaViewer - object test patternProperties 1`] = `
         object
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/patternProperties/^S_"
+        >
           <details
             open={false}
           >
@@ -1070,7 +1112,10 @@ exports[`JSONSchemaViewer - object test patternProperties 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/patternProperties/^I_"
+        >
           <details
             open={false}
           >
@@ -1153,7 +1198,10 @@ exports[`JSONSchemaViewer - object test properties 1`] = `
         object
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/number"
+        >
           <details
             open={false}
           >
@@ -1198,7 +1246,10 @@ exports[`JSONSchemaViewer - object test properties 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/street_name"
+        >
           <details
             open={false}
           >
@@ -1243,7 +1294,10 @@ exports[`JSONSchemaViewer - object test properties 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/street_type"
+        >
           <details
             open={false}
           >
@@ -1350,7 +1404,10 @@ exports[`JSONSchemaViewer - object test propertyNames 1`] = `
         object
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/propertyNames"
+        >
           <details
             open={false}
           >
@@ -1442,7 +1499,10 @@ exports[`JSONSchemaViewer - object test required 1`] = `
         object
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/id"
+        >
           <details
             open={false}
           >
@@ -1496,7 +1556,10 @@ exports[`JSONSchemaViewer - object test required 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/name"
+        >
           <details
             open={false}
           >
@@ -1545,7 +1608,10 @@ exports[`JSONSchemaViewer - object test required 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/email"
+        >
           <details
             open={false}
           >
@@ -1594,7 +1660,10 @@ exports[`JSONSchemaViewer - object test required 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/address"
+        >
           <details
             open={false}
           >
@@ -1639,7 +1708,10 @@ exports[`JSONSchemaViewer - object test required 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/telephone"
+        >
           <details
             open={false}
           >
@@ -1693,7 +1765,10 @@ exports[`JSONSchemaViewer - object test required 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/pin_code"
+        >
           <details
             open={false}
           >
@@ -1871,7 +1946,10 @@ exports[`JSONSchemaViewer - object test unevaluatedProperties as not a boolean 1
         object
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/unevaluatedProperties"
+        >
           <details
             open={false}
           >
diff --git a/__tests__/JSONSchemaViewer/__snapshots__/refs.test.tsx.snap b/__tests__/JSONSchemaViewer/__snapshots__/refs.test.tsx.snap
index 20136986..ba94d4ae 100644
--- a/__tests__/JSONSchemaViewer/__snapshots__/refs.test.tsx.snap
+++ b/__tests__/JSONSchemaViewer/__snapshots__/refs.test.tsx.snap
@@ -25,7 +25,10 @@ exports[`JSONSchemaViewer - References cases test 0 1`] = `
         object
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/data"
+        >
           <details
             open={false}
           >
@@ -72,7 +75,10 @@ exports[`JSONSchemaViewer - References cases test 0 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/children"
+        >
           <details
             open={false}
           >
@@ -111,7 +117,10 @@ exports[`JSONSchemaViewer - References cases test 0 1`] = `
                   array
                 </span>
                 <ul>
-                  <li>
+                  <li
+                    data-level={2}
+                    id="/properties/children/items"
+                  >
                     <details
                       open={false}
                     >
diff --git a/__tests__/JSONSchemaViewer/__snapshots__/schema_conditionally.test.tsx.snap b/__tests__/JSONSchemaViewer/__snapshots__/schema_conditionally.test.tsx.snap
index d68d5ec9..4bc2ff93 100644
--- a/__tests__/JSONSchemaViewer/__snapshots__/schema_conditionally.test.tsx.snap
+++ b/__tests__/JSONSchemaViewer/__snapshots__/schema_conditionally.test.tsx.snap
@@ -25,7 +25,10 @@ exports[`JSONSchemaViewer - schema conditionally test If Then Else (multiple) 1`
         object
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/street_address"
+        >
           <details
             open={false}
           >
@@ -70,7 +73,10 @@ exports[`JSONSchemaViewer - schema conditionally test If Then Else (multiple) 1`
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/country"
+        >
           <details
             open={false}
           >
@@ -312,7 +318,10 @@ exports[`JSONSchemaViewer - schema conditionally test If Then Else (multiple) 1`
                                 object
                               </span>
                               <ul>
-                                <li>
+                                <li
+                                  data-level={3}
+                                  id="/allOf/0/if/properties/country"
+                                >
                                   <details
                                     open={false}
                                   >
@@ -398,7 +407,10 @@ exports[`JSONSchemaViewer - schema conditionally test If Then Else (multiple) 1`
                                 object
                               </span>
                               <ul>
-                                <li>
+                                <li
+                                  data-level={3}
+                                  id="/allOf/0/then/properties/postal_code"
+                                >
                                   <details
                                     open={false}
                                   >
@@ -565,7 +577,10 @@ exports[`JSONSchemaViewer - schema conditionally test If Then Else (multiple) 1`
                                 object
                               </span>
                               <ul>
-                                <li>
+                                <li
+                                  data-level={3}
+                                  id="/allOf/1/if/properties/country"
+                                >
                                   <details
                                     open={false}
                                   >
@@ -655,7 +670,10 @@ exports[`JSONSchemaViewer - schema conditionally test If Then Else (multiple) 1`
                                 object
                               </span>
                               <ul>
-                                <li>
+                                <li
+                                  data-level={3}
+                                  id="/allOf/1/then/properties/postal_code"
+                                >
                                   <details
                                     open={false}
                                   >
@@ -822,7 +840,10 @@ exports[`JSONSchemaViewer - schema conditionally test If Then Else (multiple) 1`
                                 object
                               </span>
                               <ul>
-                                <li>
+                                <li
+                                  data-level={3}
+                                  id="/allOf/2/if/properties/country"
+                                >
                                   <details
                                     open={false}
                                   >
@@ -912,7 +933,10 @@ exports[`JSONSchemaViewer - schema conditionally test If Then Else (multiple) 1`
                                 object
                               </span>
                               <ul>
-                                <li>
+                                <li
+                                  data-level={3}
+                                  id="/allOf/2/then/properties/postal_code"
+                                >
                                   <details
                                     open={false}
                                   >
@@ -1017,7 +1041,10 @@ exports[`JSONSchemaViewer - schema conditionally test If Then Else 1`] = `
         object
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/street_address"
+        >
           <details
             open={false}
           >
@@ -1062,7 +1089,10 @@ exports[`JSONSchemaViewer - schema conditionally test If Then Else 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/country"
+        >
           <details
             open={false}
           >
@@ -1211,7 +1241,10 @@ exports[`JSONSchemaViewer - schema conditionally test If Then Else 1`] = `
                       object
                     </span>
                     <ul>
-                      <li>
+                      <li
+                        data-level={2}
+                        id="/if/properties/country"
+                      >
                         <details
                           open={false}
                         >
@@ -1297,7 +1330,10 @@ exports[`JSONSchemaViewer - schema conditionally test If Then Else 1`] = `
                       object
                     </span>
                     <ul>
-                      <li>
+                      <li
+                        data-level={2}
+                        id="/then/properties/postal_code"
+                      >
                         <details
                           open={false}
                         >
@@ -1383,7 +1419,10 @@ exports[`JSONSchemaViewer - schema conditionally test If Then Else 1`] = `
                       object
                     </span>
                     <ul>
-                      <li>
+                      <li
+                        data-level={2}
+                        id="/else/properties/postal_code"
+                      >
                         <details
                           open={false}
                         >
@@ -1483,7 +1522,10 @@ exports[`JSONSchemaViewer - schema conditionally test dependencies (dependentReq
         object
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/name"
+        >
           <details
             open={false}
           >
@@ -1532,7 +1574,10 @@ exports[`JSONSchemaViewer - schema conditionally test dependencies (dependentReq
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/credit_card"
+        >
           <details
             open={false}
           >
@@ -1577,7 +1622,10 @@ exports[`JSONSchemaViewer - schema conditionally test dependencies (dependentReq
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/billing_address"
+        >
           <details
             open={false}
           >
@@ -1766,7 +1814,10 @@ exports[`JSONSchemaViewer - schema conditionally test dependencies (dependentReq
                                       object
                                     </span>
                                     <ul>
-                                      <li>
+                                      <li
+                                        data-level={3}
+                                        id="/allOf/0/if/properties/credit_card"
+                                      >
                                         <details
                                           open={false}
                                         >
@@ -1848,7 +1899,10 @@ exports[`JSONSchemaViewer - schema conditionally test dependencies (dependentReq
                                       object
                                     </span>
                                     <ul>
-                                      <li>
+                                      <li
+                                        data-level={3}
+                                        id="/allOf/0/then/properties/billing_address"
+                                      >
                                         <details
                                           open={false}
                                         >
@@ -1952,7 +2006,10 @@ exports[`JSONSchemaViewer - schema conditionally test dependencies (dependentSch
         object
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/name"
+        >
           <details
             open={false}
           >
@@ -2001,7 +2058,10 @@ exports[`JSONSchemaViewer - schema conditionally test dependencies (dependentSch
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/credit_card"
+        >
           <details
             open={false}
           >
@@ -2190,7 +2250,10 @@ exports[`JSONSchemaViewer - schema conditionally test dependencies (dependentSch
                                       object
                                     </span>
                                     <ul>
-                                      <li>
+                                      <li
+                                        data-level={3}
+                                        id="/allOf/0/if/properties/credit_card"
+                                      >
                                         <details
                                           open={false}
                                         >
@@ -2272,7 +2335,10 @@ exports[`JSONSchemaViewer - schema conditionally test dependencies (dependentSch
                                       object
                                     </span>
                                     <ul>
-                                      <li>
+                                      <li
+                                        data-level={3}
+                                        id="/allOf/0/then/properties/billing_address"
+                                      >
                                         <details
                                           open={false}
                                         >
@@ -2374,7 +2440,10 @@ exports[`JSONSchemaViewer - schema conditionally test dependentRequired (bidirec
         object
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/name"
+        >
           <details
             open={false}
           >
@@ -2423,7 +2492,10 @@ exports[`JSONSchemaViewer - schema conditionally test dependentRequired (bidirec
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/credit_card"
+        >
           <details
             open={false}
           >
@@ -2468,7 +2540,10 @@ exports[`JSONSchemaViewer - schema conditionally test dependentRequired (bidirec
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/billing_address"
+        >
           <details
             open={false}
           >
@@ -2672,7 +2747,10 @@ exports[`JSONSchemaViewer - schema conditionally test dependentRequired (bidirec
                                       object
                                     </span>
                                     <ul>
-                                      <li>
+                                      <li
+                                        data-level={3}
+                                        id="/allOf/0/if/properties/credit_card"
+                                      >
                                         <details
                                           open={false}
                                         >
@@ -2754,7 +2832,10 @@ exports[`JSONSchemaViewer - schema conditionally test dependentRequired (bidirec
                                       object
                                     </span>
                                     <ul>
-                                      <li>
+                                      <li
+                                        data-level={3}
+                                        id="/allOf/0/then/properties/billing_address"
+                                      >
                                         <details
                                           open={false}
                                         >
@@ -2917,7 +2998,10 @@ exports[`JSONSchemaViewer - schema conditionally test dependentRequired (bidirec
                                       object
                                     </span>
                                     <ul>
-                                      <li>
+                                      <li
+                                        data-level={3}
+                                        id="/allOf/1/if/properties/billing_address"
+                                      >
                                         <details
                                           open={false}
                                         >
@@ -2999,7 +3083,10 @@ exports[`JSONSchemaViewer - schema conditionally test dependentRequired (bidirec
                                       object
                                     </span>
                                     <ul>
-                                      <li>
+                                      <li
+                                        data-level={3}
+                                        id="/allOf/1/then/properties/credit_card"
+                                      >
                                         <details
                                           open={false}
                                         >
@@ -3103,7 +3190,10 @@ exports[`JSONSchemaViewer - schema conditionally test dependentRequired 1`] = `
         object
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/name"
+        >
           <details
             open={false}
           >
@@ -3152,7 +3242,10 @@ exports[`JSONSchemaViewer - schema conditionally test dependentRequired 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/credit_card"
+        >
           <details
             open={false}
           >
@@ -3197,7 +3290,10 @@ exports[`JSONSchemaViewer - schema conditionally test dependentRequired 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/billing_address"
+        >
           <details
             open={false}
           >
@@ -3386,7 +3482,10 @@ exports[`JSONSchemaViewer - schema conditionally test dependentRequired 1`] = `
                                       object
                                     </span>
                                     <ul>
-                                      <li>
+                                      <li
+                                        data-level={3}
+                                        id="/allOf/0/if/properties/credit_card"
+                                      >
                                         <details
                                           open={false}
                                         >
@@ -3468,7 +3567,10 @@ exports[`JSONSchemaViewer - schema conditionally test dependentRequired 1`] = `
                                       object
                                     </span>
                                     <ul>
-                                      <li>
+                                      <li
+                                        data-level={3}
+                                        id="/allOf/0/then/properties/billing_address"
+                                      >
                                         <details
                                           open={false}
                                         >
@@ -3714,7 +3816,10 @@ exports[`JSONSchemaViewer - schema conditionally test dependentSchemas 1`] = `
                                       object
                                     </span>
                                     <ul>
-                                      <li>
+                                      <li
+                                        data-level={3}
+                                        id="/allOf/0/if/properties/c"
+                                      >
                                         <details
                                           open={false}
                                         >
@@ -3796,7 +3901,10 @@ exports[`JSONSchemaViewer - schema conditionally test dependentSchemas 1`] = `
                                       object
                                     </span>
                                     <ul>
-                                      <li>
+                                      <li
+                                        data-level={3}
+                                        id="/allOf/0/then/properties/b"
+                                      >
                                         <details
                                           open={false}
                                         >
diff --git a/__tests__/JSONSchemaViewer/__snapshots__/string.test.tsx.snap b/__tests__/JSONSchemaViewer/__snapshots__/string.test.tsx.snap
index 6cd9eb52..25eca749 100644
--- a/__tests__/JSONSchemaViewer/__snapshots__/string.test.tsx.snap
+++ b/__tests__/JSONSchemaViewer/__snapshots__/string.test.tsx.snap
@@ -243,7 +243,10 @@ exports[`JSONSchemaViewer - string test contentSchema 1`] = `
                   object
                 </span>
                 <ul>
-                  <li>
+                  <li
+                    data-level={1}
+                    id="/properties/name"
+                  >
                     <details
                       open={false}
                     >
@@ -294,7 +297,10 @@ exports[`JSONSchemaViewer - string test contentSchema 1`] = `
                       </div>
                     </details>
                   </li>
-                  <li>
+                  <li
+                    data-level={1}
+                    id="/properties/age"
+                  >
                     <details
                       open={false}
                     >
@@ -388,7 +394,10 @@ exports[`JSONSchemaViewer - string test format 1`] = `
         object
       </span>
       <ul>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/prop1"
+        >
           <details
             open={false}
           >
@@ -435,7 +444,10 @@ exports[`JSONSchemaViewer - string test format 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/prop2"
+        >
           <details
             open={false}
           >
@@ -482,7 +494,10 @@ exports[`JSONSchemaViewer - string test format 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/prop3"
+        >
           <details
             open={false}
           >
@@ -529,7 +544,10 @@ exports[`JSONSchemaViewer - string test format 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/prop4"
+        >
           <details
             open={false}
           >
@@ -576,7 +594,10 @@ exports[`JSONSchemaViewer - string test format 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/prop5"
+        >
           <details
             open={false}
           >
@@ -623,7 +644,10 @@ exports[`JSONSchemaViewer - string test format 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/prop6"
+        >
           <details
             open={false}
           >
@@ -670,7 +694,10 @@ exports[`JSONSchemaViewer - string test format 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/prop7"
+        >
           <details
             open={false}
           >
@@ -717,7 +744,10 @@ exports[`JSONSchemaViewer - string test format 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/prop8"
+        >
           <details
             open={false}
           >
@@ -764,7 +794,10 @@ exports[`JSONSchemaViewer - string test format 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/prop9"
+        >
           <details
             open={false}
           >
@@ -811,7 +844,10 @@ exports[`JSONSchemaViewer - string test format 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/prop10"
+        >
           <details
             open={false}
           >
@@ -858,7 +894,10 @@ exports[`JSONSchemaViewer - string test format 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/prop11"
+        >
           <details
             open={false}
           >
@@ -905,7 +944,10 @@ exports[`JSONSchemaViewer - string test format 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/prop12"
+        >
           <details
             open={false}
           >
@@ -952,7 +994,10 @@ exports[`JSONSchemaViewer - string test format 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/prop12B"
+        >
           <details
             open={false}
           >
@@ -999,7 +1044,10 @@ exports[`JSONSchemaViewer - string test format 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/prop13"
+        >
           <details
             open={false}
           >
@@ -1046,7 +1094,10 @@ exports[`JSONSchemaViewer - string test format 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/prop13B"
+        >
           <details
             open={false}
           >
@@ -1093,7 +1144,10 @@ exports[`JSONSchemaViewer - string test format 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/prop14"
+        >
           <details
             open={false}
           >
@@ -1140,7 +1194,10 @@ exports[`JSONSchemaViewer - string test format 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/prop15"
+        >
           <details
             open={false}
           >
@@ -1187,7 +1244,10 @@ exports[`JSONSchemaViewer - string test format 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/prop16"
+        >
           <details
             open={false}
           >
@@ -1234,7 +1294,10 @@ exports[`JSONSchemaViewer - string test format 1`] = `
             </div>
           </details>
         </li>
-        <li>
+        <li
+          data-level={1}
+          id="/properties/prop17"
+        >
           <details
             open={false}
           >
diff --git a/src/theme/JSONSchemaViewer/components/SchemaItem/SchemaItem.tsx b/src/theme/JSONSchemaViewer/components/SchemaItem/SchemaItem.tsx
index 202dfb8a..d9d47764 100644
--- a/src/theme/JSONSchemaViewer/components/SchemaItem/SchemaItem.tsx
+++ b/src/theme/JSONSchemaViewer/components/SchemaItem/SchemaItem.tsx
@@ -1,6 +1,7 @@
 import React, { ReactNode } from "react"
 
 import { Collapsible, CreateNodes } from "@theme/JSONSchemaViewer/components"
+import { useSchemaHierarchyContext } from "@theme/JSONSchemaViewer/contexts"
 
 import {
   RequiredLabel,
@@ -32,6 +33,8 @@ export default function SchemaItem({
   name,
   required,
 }: SchemaItemProps): JSX.Element {
+  const { jsonPointer, level } = useSchemaHierarchyContext()
+
   // Notice : "deprecated" started at 2019-09
   let typedSchema = schema as JSONSchema_Draft_2019_09
   let isDeprecated =
@@ -59,7 +62,7 @@ export default function SchemaItem({
   )
 
   return (
-    <li className={styles.schemaItem}>
+    <li className={styles.schemaItem} id={jsonPointer} data-level={level}>
       <Collapsible
         summary={summary}
         detailsProps={{