reuse

dashboard/components/FragmentGraph.tsx

@@ -10,7 +10,6 @@ import {
   theme,
   useDisclosure,
 } from "@chakra-ui/react"
-import { tinycolor } from "@ctrl/tinycolor"
 import loadable from "@loadable/component"
 import * as d3 from "d3"
 import { cloneDeep } from "lodash"
@@ -26,6 +25,7 @@ import {
 } from "../lib/layout"
 import { PlanNodeDatum } from "../pages/fragment_graph"
 import { StreamNode } from "../proto/gen/stream_plan"
+import { backPressureColor, backPressureWidth } from "./utils/backPressure"
 
 const ReactJson = loadable(() => import("react-json-view"))
 
@@ -396,7 +396,7 @@ export default function FragmentGraph({
           if (backPressures) {
             let value = backPressures.get(`${d.target}_${d.source}`)
             if (value) {
-              return backPressureWidth(value)
+              return backPressureWidth(value, 30)
             }
           }
 
@@ -482,44 +482,3 @@ export default function FragmentGraph({
     </Fragment>
   )
 }
-
-/**
- * The color for the edge with given back pressure value.
- *
- * @param value The back pressure rate, between 0 and 100.
- */
-function backPressureColor(value: number) {
-  const colorRange = [
-    theme.colors.green["100"],
-    theme.colors.green["300"],
-    theme.colors.yellow["400"],
-    theme.colors.orange["500"],
-    theme.colors.red["700"],
-  ].map((c) => tinycolor(c))
-
-  value = Math.max(value, 0)
-  value = Math.min(value, 100)
-
-  const step = colorRange.length - 1
-  const pos = (value / 100) * step
-  const floor = Math.floor(pos)
-  const ceil = Math.ceil(pos)
-
-  const color = tinycolor(colorRange[floor])
-    .mix(tinycolor(colorRange[ceil]), (pos - floor) * 100)
-    .toHexString()
-
-  return color
-}
-
-/**
- * The width for the edge with given back pressure value.
- *
- * @param value The back pressure rate, between 0 and 100.
- */
-function backPressureWidth(value: number) {
-  value = Math.max(value, 0)
-  value = Math.min(value, 100)
-
-  return 30 * (value / 100) + 2
-}

dashboard/components/RelationDependencyGraph.tsx

@@ -16,7 +16,6 @@
  */
 
 import { theme } from "@chakra-ui/react"
-import { tinycolor } from "@ctrl/tinycolor"
 import * as d3 from "d3"
 import { useCallback, useEffect, useRef } from "react"
 import {
@@ -35,6 +34,7 @@ import {
   generateRelationEdges,
 } from "../lib/layout"
 import { CatalogModal, useCatalogModal } from "./CatalogModal"
+import { backPressureColor, backPressureWidth } from "./utils/backPressure"
 
 function boundBox(
   relationPosition: RelationPointPosition[],
@@ -134,7 +134,7 @@ export default function RelationDependencyGraph({
         if (backPressures) {
           let value = backPressures.get(`${d.target}_${d.source}`)
           if (value) {
-            return backPressureWidth(value)
+            return backPressureWidth(value, 15)
           }
         }
 
@@ -277,44 +277,3 @@ export default function RelationDependencyGraph({
     </>
   )
 }
-
-/**
- * The color for the edge with given back pressure value.
- *
- * @param value The back pressure rate, between 0 and 100.
- */
-function backPressureColor(value: number) {
-  const colorRange = [
-    theme.colors.green["100"],
-    theme.colors.green["300"],
-    theme.colors.yellow["400"],
-    theme.colors.orange["500"],
-    theme.colors.red["700"],
-  ].map((c) => tinycolor(c))
-
-  value = Math.max(value, 0)
-  value = Math.min(value, 100)
-
-  const step = colorRange.length - 1
-  const pos = (value / 100) * step
-  const floor = Math.floor(pos)
-  const ceil = Math.ceil(pos)
-
-  const color = tinycolor(colorRange[floor])
-    .mix(tinycolor(colorRange[ceil]), (pos - floor) * 100)
-    .toHexString()
-
-  return color
-}
-
-/**
- * The width for the edge with given back pressure value.
- *
- * @param value The back pressure rate, between 0 and 100.
- */
-function backPressureWidth(value: number) {
-  value = Math.max(value, 0)
-  value = Math.min(value, 100)
-
-  return 15 * (value / 100) + 2
-}

dashboard/components/utils/backPressure.tsx

@@ -0,0 +1,43 @@
+import { theme } from "@chakra-ui/react"
+import { tinycolor } from "@ctrl/tinycolor"
+
+/**
+ * The color for the edge with given back pressure value.
+ *
+ * @param value The back pressure rate, between 0 and 100.
+ */
+export function backPressureColor(value: number) {
+  const colorRange = [
+    theme.colors.green["100"],
+    theme.colors.green["300"],
+    theme.colors.yellow["400"],
+    theme.colors.orange["500"],
+    theme.colors.red["700"],
+  ].map((c) => tinycolor(c))
+
+  value = Math.max(value, 0)
+  value = Math.min(value, 100)
+
+  const step = colorRange.length - 1
+  const pos = (value / 100) * step
+  const floor = Math.floor(pos)
+  const ceil = Math.ceil(pos)
+
+  const color = tinycolor(colorRange[floor])
+    .mix(tinycolor(colorRange[ceil]), (pos - floor) * 100)
+    .toHexString()
+
+  return color
+}
+
+/**
+ * The width for the edge with given back pressure value.
+ *
+ * @param value The back pressure rate, between 0 and 100.
+ */
+export function backPressureWidth(value: number, scale: number) {
+  value = Math.max(value, 0)
+  value = Math.min(value, 100)
+
+  return scale * (value / 100) + 2
+}