🎨 Moved integrations in widgets directory

src/widgets/dashDot/DashDotGraph.tsx

@@ -0,0 +1,73 @@
+import { createStyles, Stack, Title, useMantineTheme } from '@mantine/core';
+import { DashDotGraph as GraphType } from './types';
+
+interface DashDotGraphProps {
+  graph: GraphType;
+  isCompact: boolean;
+  dashDotUrl: string;
+}
+
+export const DashDotGraph = ({ graph, isCompact, dashDotUrl }: DashDotGraphProps) => {
+  const { classes } = useStyles();
+  return (
+    <Stack
+      className={classes.graphStack}
+      w="100%"
+      maw="251px"
+      style={{
+        width: isCompact ? (graph.twoSpan ? '100%' : 'calc(50% - 10px)') : undefined,
+      }}
+    >
+      <Title className={classes.graphTitle} order={4}>
+        {graph.name}
+      </Title>
+      <iframe
+        className={classes.iframe}
+        key={graph.name}
+        title={graph.name}
+        src={useIframeSrc(dashDotUrl, graph, isCompact)}
+        frameBorder="0"
+      />
+    </Stack>
+  );
+};
+
+const useIframeSrc = (dashDotUrl: string, graph: GraphType, isCompact: boolean) => {
+  const { colorScheme, colors, radius } = useMantineTheme();
+  const surface = (colorScheme === 'dark' ? colors.dark[7] : colors.gray[0]).substring(1); // removes # from hex value
+  return (
+    `${dashDotUrl}` +
+    `?singleGraphMode=true` +
+    `&graph=${graph.id}` +
+    `&theme=${colorScheme}` +
+    `&surface=${surface}` +
+    `&gap=${isCompact ? 10 : 5}` +
+    `&innerRadius=${radius.lg}` +
+    `&multiView=${graph.isMultiView}`
+  );
+};
+
+export const useStyles = createStyles((theme, _params, getRef) => ({
+  iframe: {
+    flex: '1 0 auto',
+    maxWidth: '100%',
+    height: '140px',
+    borderRadius: theme.radius.lg,
+  },
+  graphTitle: {
+    ref: getRef('graphTitle'),
+    position: 'absolute',
+    right: 0,
+    opacity: 0,
+    transition: 'opacity .1s ease-in-out',
+    pointerEvents: 'none',
+    marginTop: 10,
+    marginRight: 25,
+  },
+  graphStack: {
+    position: 'relative',
+    [`&:hover .${getRef('graphTitle')}`]: {
+      opacity: 0.5,
+    },
+  },
+}));