From 89843110d32d8920ab8afb80c9b8e0e77f8b8571 Mon Sep 17 00:00:00 2001
From: Elena Shorohova <jsorohova@microsoft.com>
Date: Wed, 31 Jan 2024 15:07:11 +0200
Subject: [PATCH 1/2] Fixed non-working anchors for definitions, made multiple
 complex schemas more readable

---
 .../operation-details/ko/runtime/operation-details.ts  | 10 ++++++++--
 .../ko/runtime/type-definition-object.html             |  2 +-
 src/routing/routeHelper.ts                             |  7 +++++++
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/operations/operation-details/ko/runtime/operation-details.ts b/src/components/operations/operation-details/ko/runtime/operation-details.ts
index 46deb5c76..2296ef5fe 100644
--- a/src/components/operations/operation-details/ko/runtime/operation-details.ts
+++ b/src/components/operations/operation-details/ko/runtime/operation-details.ts
@@ -454,8 +454,14 @@ export class OperationDetails {
     }
 
     private scrollToOperation() {
-        const headerElement = document.getElementById("operation-name");
-        headerElement && headerElement.scrollIntoView({ behavior: "smooth", block: "start", inline: "start" });
+        if (this.routeHelper.getDefinitionName()) {
+            const definitionId = this.router.getHash();
+            const definitionElement = document.getElementById(definitionId);
+            definitionElement && definitionElement.scrollIntoView({ behavior: "smooth", block: "start", inline: "start" });
+        } else {
+            const headerElement = document.getElementById("operation-name");
+            headerElement && headerElement.scrollIntoView({ behavior: "smooth", block: "start", inline: "start" });
+        }
     }
 
     @OnDestroyed()
diff --git a/src/components/operations/operation-details/ko/runtime/type-definition-object.html b/src/components/operations/operation-details/ko/runtime/type-definition-object.html
index b3c2e4844..90700049c 100644
--- a/src/components/operations/operation-details/ko/runtime/type-definition-object.html
+++ b/src/components/operations/operation-details/ko/runtime/type-definition-object.html
@@ -51,7 +51,7 @@
                     <span data-bind="text: property.type.combinationType"></span>:
                 </div>
                 <!-- ko foreach: { data: property.type.combination, as: 'item' } -->
-                <!-- ko if: $index() > 0 -->,
+                <!-- ko if: $index() > 0 -->,<br>
                 <!-- /ko -->
                 <!-- ko if: item.displayAs === 'reference' -->
                 <a class="text-monospace"
diff --git a/src/routing/routeHelper.ts b/src/routing/routeHelper.ts
index 33b7119e2..1b4e29162 100644
--- a/src/routing/routeHelper.ts
+++ b/src/routing/routeHelper.ts
@@ -67,6 +67,13 @@ export class RouteHelper {
         return this.getHashParameter("graph");
     }
 
+    /**
+     * Returns ARM resource name of the definition specified in hash parameter of the current route, e.g. "users".
+     */
+    public getDefinitionName(): string {
+        return this.getHashParameter("definition");
+    }
+
     /**
      * Returns URL of API details page depending on current route.
      * @param apiName ARM resource name of the API.

From 2743ce4e317e0c5b87698a53234b37dad03a8f9e Mon Sep 17 00:00:00 2001
From: Elena Shorohova <jsorohova@microsoft.com>
Date: Wed, 7 Feb 2024 19:15:50 +0200
Subject: [PATCH 2/2] Changed the logic of scrolling to the definition

---
 .../ko/runtime/operation-details.ts           | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/operations/operation-details/ko/runtime/operation-details.ts b/src/components/operations/operation-details/ko/runtime/operation-details.ts
index 2296ef5fe..e7f2cdace 100644
--- a/src/components/operations/operation-details/ko/runtime/operation-details.ts
+++ b/src/components/operations/operation-details/ko/runtime/operation-details.ts
@@ -176,8 +176,11 @@ export class OperationDetails {
         const apiName = this.routeHelper.getApiName();
         const operationName = this.routeHelper.getOperationName();
         const graphName = this.routeHelper.getGraphName();
+        const definitionName = this.routeHelper.getDefinitionName();
 
-        if (this.enableScrollTo && (operationName || graphName)) {
+        if (definitionName) {
+            this.scrollToDefinition();
+        } else if (this.enableScrollTo && (operationName || graphName)) {
             this.scrollToOperation();
         }
 
@@ -454,14 +457,14 @@ export class OperationDetails {
     }
 
     private scrollToOperation() {
-        if (this.routeHelper.getDefinitionName()) {
-            const definitionId = this.router.getHash();
-            const definitionElement = document.getElementById(definitionId);
-            definitionElement && definitionElement.scrollIntoView({ behavior: "smooth", block: "start", inline: "start" });
-        } else {
-            const headerElement = document.getElementById("operation-name");
-            headerElement && headerElement.scrollIntoView({ behavior: "smooth", block: "start", inline: "start" });
-        }
+        const headerElement = document.getElementById("operation-name");
+        headerElement && headerElement.scrollIntoView({ behavior: "smooth", block: "start", inline: "start" });
+    }
+
+    private scrollToDefinition() {
+        const definitionId = this.router.getHash();
+        const definitionElement = document.getElementById(definitionId);
+        definitionElement && definitionElement.scrollIntoView({ behavior: "smooth", block: "start", inline: "start" });
     }
 
     @OnDestroyed()