component page graphs now render

src/interactions/InteractionChip.tsx

@@ -0,0 +1,87 @@
+import { Chip, Tooltip } from "@mui/material";
+import { Link as LinkIcon } from "@mui/icons-material";
+import React from "react";
+import { pond } from "protobuf-ts/pond";
+import { quack } from "protobuf-ts/quack";
+import { Component, Interaction } from "models";
+
+// const styles = (theme: Theme) => ({
+//   accepted: {
+//     color: amber["300"]
+//   },
+//   pending: {
+//     color: theme.palette.text.secondary
+//   }
+// });
+
+interface Props {
+  interaction: Interaction;
+  component: Component;
+  components: Component[];
+  onClick: Function;
+}
+
+interface State {}
+
+class InteractionChip extends React.Component<Props, State> {
+  label = () => {
+    const { interaction, component, components } = this.props;
+    let ourID = JSON.stringify(
+      quack.ComponentID.create({
+        type: component.settings.type,
+        addressType: component.settings.addressType,
+        address: component.settings.address
+      })
+    );
+    if (component.settings.address === 0) {
+      ourID = JSON.stringify(
+        quack.ComponentID.create({
+          type: component.settings.type,
+          addressType: component.settings.addressType
+        })
+      );
+    }
+    let sourceID = JSON.stringify((interaction.settings as pond.InteractionSettings).source);
+    let sinkID = JSON.stringify((interaction.settings as pond.InteractionSettings).sink);
+    for (let i = 0; i < components.length; i++) {
+      let c = components[i];
+      let otherID = JSON.stringify(
+        quack.ComponentID.create({
+          type: c.settings.type,
+          addressType: c.settings.addressType,
+          address: c.settings.address
+        })
+      );
+      if (c.settings.address === 0) {
+        otherID = JSON.stringify(
+          quack.ComponentID.create({
+            type: c.settings.type,
+            addressType: c.settings.addressType
+          })
+        );
+      }
+      if (ourID === otherID) {
+        continue;
+      }
+      if (sourceID === otherID || sinkID === otherID) {
+        return c.name();
+      }
+    }
+    return "Cloud";
+  };
+
+  render() {
+    const { /*classes,*/ interaction, onClick } = this.props;
+    const label = this.label();
+    const pending = !interaction.status.synced;
+    // const iconClass = pending ? classes.pending : classes.accepted;
+    const title = pending ? "Pending interaction with " + label : "Interacting with " + label;
+    return (
+      <Tooltip title={title}>
+        <Chip onClick={() => onClick()} label={label} icon={<LinkIcon /*className={iconClass}*/ />} />
+      </Tooltip>
+    );
+  }
+}
+
+export default InteractionChip;