feat: newer tempr map

package.json

@@ -13,6 +13,7 @@
     "baseui": "^9.14.1",
     "brace": "^0.11.1",
     "chart.js": "^2.9.3",
+    "dagre": "^0.8.5",
     "graphviz-react": "1.1.1",
     "leaflet": "^1.5.1",
     "moment": "^2.24.0",
@@ -24,6 +25,7 @@
     "react-chartjs-2": "^2.8.0",
     "react-cookies": "^0.1.1",
     "react-dom": "^16.11.0",
+    "react-flow-renderer": "^8.3.6",
     "react-json-pretty": "^2.1.0",
     "react-leaflet": "^2.5.0",
     "react-router-dom": "^5.0.1",
@@ -75,7 +77,8 @@
     "eslint-plugin-react-hooks": "^1.6.1",
     "eslint-plugin-standard": "^4.0.0",
     "husky": "^3.0.2",
-    "prettier": "^1.18.2"
+    "prettier": "^1.18.2",
+    "typescript": "^2.8.0"
   },
   "husky": {
     "hooks": {

src/App.js

@@ -134,18 +134,9 @@ class App extends Component {
                 <Component {...props} />
             </div>
         ) : (
-            <>
-                <Block display={['none', 'none', 'block']}>
-                    <div className="content">
-                        <Component {...props} />
-                    </div>
-                </Block>
-                <Block display={['block', 'block', 'none']}>
-                    <div className="content-mobile">
-                        <Component {...props} />
-                    </div>
-                </Block>
-            </>
+            <div className="content">
+                <Component {...props} />
+            </div>
         );
     };
 

src/Utilities.js

@@ -107,3 +107,4 @@ export function useWindowDimensions() {
 
   return windowDimensions;
 }
+

src/components/Global/OriginNode.js

@@ -0,0 +1,21 @@
+import React, { memo } from "react";
+import { Handle } from "react-flow-renderer";
+
+const OriginNode = memo(({ data }) => {
+    return (
+        <>
+            <Handle
+                type="target"
+                position={data.deviceGroupId ? "left" : "right"}
+              style={{ width: '8px', height: '8px', top: '20px' }}
+                id={`${data.deviceGroupId ? 'D' : 'S'}-${data.id}`}
+              onConnect={(params) => console.log('handle onConnect', params)}
+            />
+            <p style={{ margin: '0' }}>
+              <strong>{data.name}</strong>
+            </p>
+        </>
+    );
+});
+
+export { OriginNode };

src/components/Global/TemprNode.js

@@ -0,0 +1,76 @@
+import React, { memo } from "react";
+import { Handle } from "react-flow-renderer";
+
+const TemprNode = memo(({ data }) => {
+    const qRes = data.tempr.queueResponse ? 'green' : 'red';
+    const qReq = data.tempr.queueRequest ? 'green' : 'red';
+    const fs = data.primary ? 'large' : 'small';
+    return (
+        <>
+            {data.tempr.temprId ? (
+                <Handle
+                    type="target"
+                    position="top"
+                  style={{ width: '8px', height: '8px', top: '-5px' }}
+                    id={`Xtop-${data.tempr.id}`}
+                  onConnect={(params) => console.log('handle onConnect', params)}
+                />
+            ) : (
+              <Handle
+                    type="target"
+                    position="top"
+                  style={{ background: 'green', width: '8px', height: '8px', top: '-5px' }}
+                    id={`Ytop-${data.tempr.id}`}
+                  onConnect={(params) => console.log('handle onConnect', params)}
+                />
+          )}
+            <div
+                style={{
+                    fontSize: fs,
+                    display: "flex",
+                    justifyContent: "space-between",
+                    flexDirection: "column",
+                    textAlign: "center",
+                }}
+            >
+          <p style={{ margin: '0' }}>
+            <strong>{data.tempr.name} - </strong>
+            <a href={`/temprs/${data.tempr.id}`} style={{
+              padding: '3px',
+              border: '1px solid #e6e8ec',
+              backgroundColor: '#fafafa',
+            }}>
+              {data.tempr.id}
+            </a>
+          </p>
+          <div style={{ fontSize: 'small', flexDirection: 'row', display: 'flex', justifyContent: 'space-between' }}>
+              <p style={{ margin: '4px', fontSize: 'x-small', color: qReq }}><b>Queue Response</b></p>
+              <p style={{ margin: '4px', fontSize: 'x-small', color: qRes }}><b>Queue Request</b></p>
+              <p style={{ margin: '2px' }}>{`${data.tempr.endpointType}`}</p>
+                </div>
+            </div>
+            <Handle
+                type="source"
+                position="bottom"
+                style={{ background: 'green', width: '8px', height: '8px', bottom: '-5px' }}
+                id={`bottom-${data.tempr.id}`}
+            />
+            <Handle
+                type="source"
+                position="right"
+                style={{ background: 'green', width: '8px', height: '8px', top: '30px', right: '-5px' }}
+                id={`DT-${data.tempr.id}`}
+                onConnect={(params) => console.log('handle onConnect', params)}
+            />
+            <Handle
+                type="source"
+                position="left"
+                style={{ background: 'green', width: '8px', height: '8px', top: '30px', left: '-5px' }}
+                id={`ST-${data.tempr.id}`}
+                onConnect={(params) => console.log('handle onConnect', params)}
+            />
+        </>
+    );
+});
+
+export { TemprNode };

src/components/Global/TemprSidebar.js

@@ -0,0 +1,31 @@
+import React from "react";
+
+const TemprSidebar = props => {
+    const onDragStart = (event, id) => {
+        event.dataTransfer.setData("application/reactflow", id);
+        event.dataTransfer.effectAllowed = "move";
+    };
+
+    const temprNodes = props.temprs.map(tempr => {
+        return (
+            <div
+                className="dndnode"
+                key={tempr.id}
+                onDragStart={event => onDragStart(event, tempr.id)}
+                draggable
+            >
+                {tempr.name}
+            </div>
+        );
+    });
+
+    return (
+        <>
+            <aside style={{ overflowY: "scroll" }}>
+                <div>{temprNodes}</div>
+            </aside>
+        </>
+    );
+};
+
+export { TemprSidebar };

src/components/Global/index.js

@@ -2,13 +2,16 @@ export * from "./DatetimeFilter";
 export * from "./HttpTemprTemplate";
 export * from "./NavigationItem";
 export * from "./NavigationGroup";
+export * from "./OriginNode";
 export * from "./PairInput";
 export * from "./SiteSelector";
 export * from "./TableFilter";
 export * from "./Toast";
 export * from "./TrueFalseCheckboxes";
 export * from "./TemprSelector";
+export * from "./TemprSidebar";
 export * from "./TemprForm";
 export * from "./TemprPreview";
 export * from "./TemprOutputTest";
 export * from "./TemprModal";
+export * from "./TemprNode";

src/components/Universal/Page.js

@@ -4,11 +4,12 @@ import { Link, Prompt } from "react-router-dom";
 import { useStyletron } from "baseui";
 import { Button, KIND } from "baseui/button";
 import { Heading, HeadingLevel } from "baseui/heading";
-import { Block } from 'baseui/block';
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
 
+import { useWindowDimensions } from "../../Utilities";
+
 const Actions = props => {
     const [css] = useStyletron();
 
@@ -57,24 +58,29 @@ const Page = props => {
         padding: theme.sizing.scale800,
     });
 
+    // eslint-disable-next-line no-unused-vars
+    const { height, width } = useWindowDimensions();
+    const mobileView = width < 651;
+
     return (
         <div className={contentWrapper}>
             {props.alert && <Prompt message={props.alert} />}
             <HeadingLevel>
-                <Block display={['block', 'block', 'none']}>
-                    <Heading $style={{ display: "flex", fontSize: "8vmin", flexDirection: "row", alignItems: "center" }}>
-                        <BackLink backlink={props.backlink} />
-                        {props.heading}
-                        <Actions actions={props.actions} />
-                    </Heading>
-                </Block>
-                <Block display={['none', 'none', 'block']}>
-                    <Heading $style={{ display: "flex", flexDirection: "row", alignItems: "center" }}>
-                        <BackLink backlink={props.backlink} />
-                        {props.heading}
-                        <Actions actions={props.actions} />
-                    </Heading>
-                </Block>
+                {
+                    mobileView ? (
+                        <Heading $style={{ display: "flex", fontSize: "8vmin", flexDirection: "row", alignItems: "center" }}>
+                            <BackLink backlink={props.backlink} />
+                            {props.heading}
+                            <Actions actions={props.actions} />
+                        </Heading>
+                    ) : (
+                        <Heading $style={{ display: "flex", flexDirection: "row", alignItems: "center" }}>
+                            <BackLink backlink={props.backlink} />
+                            {props.heading}
+                            <Actions actions={props.actions} />
+                        </Heading>
+                    )
+                }
                 {props.children}
             </HeadingLevel>
         </div>