wip: lint fixes

Author: sareyu

src/components/Graph/GravityGraph.scss

@@ -1,20 +1,23 @@
 .ydb-gravity-graph {
     &__block {
-        background: none;
-        border: none;
         cursor: auto;
+
+        border: none;
+        background: none;
     }
 
     &__block-content {
         width: 100%;
         padding: 8px 12px;
-        background: var(--g-color-base-float);
-        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
-        border: 1px solid var(--g-color-line-generic);
-        font-size: var(--g-text-body-short-font-size);
+
         font-family: var(--g-font-family);
+        font-size: var(--g-text-body-short-font-size);
         line-height: var(--g-text-body-short-line-height);
 
+        border: 1px solid var(--g-color-line-generic);
+        background: var(--g-color-base-float);
+        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
+
         &[aria-haspopup='dialog'] {
             cursor: pointer;
         }
@@ -24,20 +27,23 @@
         position: absolute;
         top: 4px;
         right: 4px;
-        color: var(--g-color-text-secondary);
+
         font-size: 10px;
         line-height: 1;
+
+        color: var(--g-color-text-secondary);
     }
 
     &__block-content.query {
-        border-radius: 50%;
         height: 100%;
+
+        border-radius: 50%;
     }
 
     &__block-content.result {
         display: flex;
-        align-items: center;
         justify-content: center;
+        align-items: center;
     }
 
     &__block-content.stage {
@@ -48,18 +54,20 @@
         display: flex;
         align-items: center;
         gap: 4px;
+
+        color: var(--g-color-text-info-heavy);
+        border: 1px solid var(--g-color-line-info);
         border-radius: 6px;
-        box-shadow: none;
         background: var(--g-color-base-info-light);
-        border: 1px solid var(--g-color-line-info);
-        color: var(--g-color-text-info-heavy);
+        box-shadow: none;
     }
 
     &__tooltip-content {
-        padding: 0 8px 8px;
         width: 300px;
-        font-size: var(--g-text-body-short-font-size);
+        padding: 0 8px 8px;
+
         font-family: var(--g-font-family);
+        font-size: var(--g-text-body-short-font-size);
         line-height: var(--g-text-body-short-line-height);
     }
 
@@ -71,10 +79,12 @@
         display: grid;
         grid-template-columns: 100px auto;
         gap: 8px;
+
         margin: 4px 0 0;
 
         span {
             overflow: hidden;
+
             text-overflow: ellipsis;
         }
         span:nth-child(1) {
@@ -91,6 +101,7 @@
 
     &__tooltip-stat-group + &__tooltip-stat-group {
         padding-top: 8px;
+
         border-top: 1px dotted var(--g-color-line-generic);
     }
 
@@ -100,9 +111,10 @@
 
     &__zoom-controls {
         position: absolute;
+        z-index: 999;
         top: 8px;
         right: 50px;
-        z-index: 999;
+
         display: flex;
         gap: 2px;
     }

src/components/Graph/types.ts

@@ -21,7 +21,7 @@ export interface Link {
     to: string;
 }
 export interface Data<TData = any> {
-    links: Link[];
+    links?: Link[];
     nodes: GraphNode<TData>[];
 }
 export interface Metric {

src/containers/Tenant/Query/QueryResult/QueryResultViewer.tsx

@@ -272,7 +272,6 @@ export function QueryResultViewer({
             if (!preparedPlan?.nodes?.length) {
                 return renderStubMessage();
             }
-            console.log(preparedPlan);
 
             return <Graph theme={theme} explain={preparedPlan} />;
         }

src/containers/Tenant/Query/QueryResult/components/Graph/Graph.scss

@@ -1,9 +1,10 @@
 .ydb-query-explain-graph {
     &__canvas-container {
+        position: relative;
+
         overflow-y: auto;
 
         width: 100%;
         height: 100%;
-        position: relative;
     }
 }

src/containers/Tenant/Query/QueryResult/components/Graph/Graph.tsx

@@ -23,8 +23,6 @@ function isValidGraphData(data: Partial<Data>): data is Data {
 }
 
 export function Graph({explain = {}, theme}: GraphProps) {
-    console.log('explain', explain);
-
     const {links, nodes} = explain;
 
     const data = React.useMemo(() => ({links, nodes}), [links, nodes]);

src/store/reducers/query/prepareQueryData.ts

@@ -10,9 +10,7 @@ export function prepareQueryData(
     const result = parseQueryAPIResponse(response);
     const {plan: rawPlan, stats} = result;
 
-
     const {simplifiedPlan, ...planData} = preparePlanData(rawPlan, stats);
-    console.log('prepareQueryData', rawPlan, planData);
     return {
         ...result,
         preparedPlan: Object.keys(planData).length > 0 ? planData : undefined,