feat(svgr): pull from s3 and display highlight zones

MediaComem · Oct 11, 2022 · 27f54fb · 27f54fb
1 parent 8c96eab
commit 27f54fb
Show file tree

Hide file tree

Showing 14 changed files with 13,027 additions and 38,769 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -34,8 +34,8 @@
     "multiline-ternary": "off",
     "no-unused-vars": "off",
     "@typescript-eslint/no-unused-vars": [
-        "error",
-        { "argsIgnorePattern": "^_" }
+      "warn",
+      { "argsIgnorePattern": "^_" }
     ],
     "dot-notation": "off",
     "func-call-spacing": "off"

diff --git a/config-overrides.js b/config-overrides.js
@@ -0,0 +1,3 @@
+module.exports = function override(config, env) {
+  return config;
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "react": "^18.2.0",
     "react-dnd": "^16.0.1",
     "react-dom": "^18.2.0",
+    "react-inlinesvg": "^3.0.1",
     "react-rectangle-selection": "^1.0.4",
     "react-redux": "^8.0.2",
     "react-reflex": "^4.0.9",
@@ -64,6 +65,7 @@
     "eslint-plugin-n": "^15.2.3",
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.30.1",
-    "gh-pages": "^4.0.0"
+    "gh-pages": "^4.0.0",
+    "react-app-rewired": "^2.2.1"
   }
-}
+}
diff --git a/src/Home.tsx b/src/Home.tsx
@@ -2,7 +2,6 @@ import { Accordion, Button, Flex, useDisclosure } from "@chakra-ui/react";
 import { css } from "@emotion/css";
 import * as React from "react";
 import { useDispatch } from "react-redux";
-import { colorTheme } from ".";
 import { useAppSelector } from "./app/hooks";
 import ConfirmModal from "./components/layout/ConfirmModal";
 import Panel, { ResizablePanel } from "./components/layout/Panel";
@@ -16,6 +15,7 @@ import { allZonesReset, zoneAdded } from "./features/zones/zonesSlice";
 import { ReactComponent as ResetIcon } from "./assets/ResetIcon_Active_MouseOver.svg";
 import ExportButton from "./components/recommandations/ExportButton";
 import { useNavigate } from "react-router-dom";
+import { colorTheme } from "./theme";
 
 export default function Home() {
   const dispatch = useDispatch();

diff --git a/src/components/layout/TestSVG.tsx b/src/components/layout/TestSVG.tsx
diff --git a/src/components/recommandations/ReloadRecoButton.tsx b/src/components/recommandations/ReloadRecoButton.tsx
@@ -2,43 +2,48 @@ import { Button } from "@chakra-ui/react";
 import { css } from "@emotion/css";
 import * as React from "react";
 import { useDispatch } from "react-redux";
-import { colorTheme } from "../..";
-import { useCalculateAllRecommandations, useCalculateGenericRecommandations } from "../../app/hooks";
+import {
+  useCalculateAllRecommandations,
+  useCalculateGenericRecommandations,
+} from "../../app/hooks";
 import { ReactComponent as ResetIcon } from "../../assets/ResetIcon_Active_MouseOver.svg";
 import { recommandationsPopulated } from "../../features/recommandations/recommandationsSlice";
+import { colorTheme } from "../../theme";
 //import { useNavigate } from "react-router-dom";
 
 export default function ReloadRecoButton() {
   const dispatch = useDispatch();
   const recosGeneric = useCalculateGenericRecommandations();
   const recos = useCalculateAllRecommandations();
   const reloadSimulation = React.useCallback(() => {
-      dispatch(recommandationsPopulated([...recos, ...recosGeneric]));
-    }, [dispatch, recos]);
+    dispatch(recommandationsPopulated([...recos, ...recosGeneric]));
+  }, [dispatch, recos]);
   //const currentDisplayedRecos = useAppSelector((state) => state.recommandations);
-/*   const newRecos = React.useEffect(() => {
+  /*   const newRecos = React.useEffect(() => {
     if (recos.length !== currentDisplayedRecos.length) { return true }
   }, [recos, currentDisplayedRecos]); */
 
   return (
     <>
-    {/* <div>{currentDisplayedRecos.length} {recos.length} {newRecos}</div> */}
+      {/* <div>{currentDisplayedRecos.length} {recos.length} {newRecos}</div> */}
       <Button
         variant={"outline"}
-        colorScheme='brand'
-        alignSelf={'center'}
-        justifySelf={'flex-end'}
+        colorScheme="brand"
+        alignSelf={"center"}
+        justifySelf={"flex-end"}
         //disabled = {!newRecos}
         onClick={reloadSimulation}
-        size='sm'
+        size="sm"
       >
         Reload
-        <ResetIcon className={css({ margin: "3px" })} stroke={colorTheme[400]} />
+        <ResetIcon
+          className={css({ margin: "3px" })}
+          stroke={colorTheme[400]}
+        />
       </Button>
     </>
   );
 }
 function recommandationsGeneric() {
   throw new Error("Function not implemented.");
 }
-
diff --git a/src/components/remotesvg/index.tsx b/src/components/remotesvg/index.tsx
@@ -0,0 +1,88 @@
+import React from "react";
+import SVG from "react-inlinesvg";
+import { colorTheme } from "../../theme";
+
+const KEYS = {
+  dataStroke: "data-stroke",
+  dataStrokeWidth: "data-stroke-width",
+};
+
+const HIGHLIGHT_STYLE = {
+  color: colorTheme[500],
+  strokeWidth: 5,
+};
+const RemoteSVG = ({ url }: { url?: string }) => {
+  const idsRefs = React.useRef<string[]>([]);
+  return (
+    <SVG
+      cacheRequests={true}
+      loader={<span>Loading...</span>}
+      onError={(error) => console.log(error.message)}
+      onLoad={(src, hasCache) => {
+        console.log("src is" + src, hasCache);
+        // find all svg element with id included in idsRefs.current array and add on hover event a red solid border
+        idsRefs.current.forEach((id) => {
+          const element = document.getElementById(id);
+          if (element) {
+            element.addEventListener("mouseover", (e) => {
+              e?.stopPropagation();
+
+              const strokeWidth = parseInt(
+                window.getComputedStyle(element)[
+                  //@ts-ignore
+                  "stroke-width"
+                ].replace("px", "") ?? "0"
+              );
+
+              // save the original border stroke and width
+              element.setAttribute(KEYS.dataStroke, element.style.stroke);
+              element.setAttribute(KEYS.dataStrokeWidth, `${strokeWidth}`);
+              element.style.stroke = HIGHLIGHT_STYLE.color;
+
+              if (strokeWidth < HIGHLIGHT_STYLE.strokeWidth) {
+                element.style.strokeWidth = `${HIGHLIGHT_STYLE.strokeWidth}`;
+              }
+            });
+            element.addEventListener("mouseout", () => {
+              //restore the dataset attributes
+              element.style.stroke = element.dataset[KEYS.dataStroke] ?? "";
+              element.style.strokeWidth =
+                element.dataset[KEYS.dataStrokeWidth] ?? "";
+            });
+          }
+        });
+      }}
+      preProcessor={(code) => {
+        // code is a svg string
+        // replace width parameter of svg tag by width="100%"
+        const newCode = code
+          .replace(/width="[^"]+"/, 'width="100%"')
+          //add svg tag attribute preserveAspectRatio="xMinYMin meet"
+          .replace(/<svg/, '<svg preserveAspectRatio="xMinYMin meet"')
+          // add to the first g tag of svg tag a light gray border
+          .replace(
+            /<g/,
+            `<g stroke="${colorTheme[900]}" stroke-width="2" stroke-linejoin="round"`
+          );
+
+        // collect all the id of the svg element
+        //remove id= and the double " at the beginning and the end of the string
+        idsRefs.current = (code.match(/id="[^"]+"/g) ?? []).map((id) =>
+          id.replace(/id="|"/g, "")
+        );
+
+        return newCode;
+      }}
+      src="https://bytesim-bucket.s3.eu-west-3.amazonaws.com/0%253A1_Page%25201.svg"
+      // **
+      // unusued props
+      // **
+      // baseURL="/home"
+      // description="The React logo"
+      // title="React"
+      // uniqueHash="a1f8d1"
+      // uniquifyIDs={true}
+    />
+  );
+};
+export default RemoteSVG;
diff --git a/src/components/zones/MainGroupList.tsx b/src/components/zones/MainGroupList.tsx
@@ -9,11 +9,11 @@ import AccordionCustomTitle from "../layout/AccordionCustomTitle";
 
 export default function MainGroupList() {
   return (
-    <AccordionItem isDisabled>
+    <AccordionItem isDisabled={false}>
       <AccordionButton _hover={{ backgroundColor: "brand.100" }} pl={2}>
         <AccordionChevron isExpanded={false} />
         <Box flex="1" textAlign="left">
-          <AccordionCustomTitle label={'Main group'} icon="importedGroup" />
+          <AccordionCustomTitle label={"Main group"} icon="importedGroup" />
         </Box>
       </AccordionButton>
       <AccordionPanel>Nothing here yet.</AccordionPanel>

diff --git a/src/components/zones/ZonesList.tsx b/src/components/zones/ZonesList.tsx
@@ -36,8 +36,8 @@ import AccordionCustomTitle from "../layout/AccordionCustomTitle";
 import AccordionChevron from "../layout/AccordionChevron";
 import ProgressPoints from "../layout/ProgressPoints";
 import { VideoFormEntries } from "../../app/types/videoTypes";
-import { colorTheme } from "../..";
 import { recommandationsReset } from "../../features/recommandations/recommandationsSlice";
+import { colorTheme } from "../../theme";
 
 export default function ZonesList() {
   const dispatch = useDispatch();
@@ -144,7 +144,11 @@ export default function ZonesList() {
                                 Specific settings on the page
                               </Text>
                             </Box>
-                            <ZoneParams zone={z} index={index} setIndex={setIndex} />
+                            <ZoneParams
+                              zone={z}
+                              index={index}
+                              setIndex={setIndex}
+                            />
                           </AccordionPanel>
                         </>
                       )}
@@ -178,7 +182,12 @@ interface ZoneListButtonProps {
   closseAllItems: () => void;
   //setOpen: () => void;
 }
-function ZoneListButton({ zone, isExpanded, onOpen, closseAllItems }: ZoneListButtonProps) {
+function ZoneListButton({
+  zone,
+  isExpanded,
+  onOpen,
+  closseAllItems,
+}: ZoneListButtonProps) {
   const dispatch = useDispatch();
   const projectStatus = useAppSelector((state) => state.project.status);
   const [value, setValue] = React.useState(zone.name);

diff --git a/src/components/zones/ZonesView.tsx b/src/components/zones/ZonesView.tsx
@@ -6,9 +6,10 @@ import { Route, Routes } from "react-router-dom";
 import { useAppSelector } from "../../app/hooks";
 import { zoneSelected, zoneUpdated } from "../../features/zones/zonesSlice";
 import TestSVG from "../layout/TestSVG";
-import REHome from "../../assets/RE-homepage.jpg";
-import REabout from "../../assets/RE-about.jpg";
-import REmap from "../../assets/RE-map.jpg";
+import RemoteSVG from "../remotesvg";
+// import REHome from "../../assets/RE-homepage.jpg";
+// import REabout from "../../assets/RE-about.jpg";
+// import REmap from "../../assets/RE-map.jpg";
 const brandColor = "#ea62ea";
 const resizeHandleSVG = (
   <svg
@@ -72,51 +73,59 @@ export default function ZonesView({
       grow={1}
       alignSelf="stretch"
     >
-      <Flex opacity={0.5} width='400' minWidth='400' maxWidth='400'>
-      <Routes>
-        <Route
-          path="bytesim-webapp/1/*"
-          element={
-            <Flex>
-              <TestSVG />
-            </Flex>
-          }
-        />
-        <Route
-          path="bytesim-webapp/2/*"
-          element={
-            <Flex>
-              <img src={REHome} alt="RE homepage"/>
-            </Flex>
-          }
-        />
-        <Route
-          path="bytesim-webapp/3/*"
-          element={
-            <Flex>
-              <img src={REabout} alt="RE about page"/>
-            </Flex>
-          }
-        />
-        <Route
-          path="bytesim-webapp/4/*"
-          element={
-            <Flex>
-              <img src={REmap} alt="RE network map"/>
-            </Flex>
-          }
-        />
-        <Route
-          path="bytesim-webapp/*"
-          element={
-            <Flex>
-              <TestSVG />
-            </Flex>
-          }
-        />
-      </Routes>
+      <Flex opacity={0.5} width="400" minWidth="400">
+        <Routes>
+          <Route
+            path="bytesim-webapp/figma/*"
+            element={
+              <Flex>
+                <RemoteSVG />
+              </Flex>
+            }
+          />
+          {/*<Route
+            path="bytesim-webapp/1/*"
+            element={
+              <Flex>
+                <TestSVG />
+              </Flex>
+            }
+          />
+          <Route
+            path="bytesim-webapp/2/*"
+            element={
+              <Flex>
+                <img src={REHome} alt="RE homepage" />
+              </Flex>
+            }
+          />
+          <Route
+            path="bytesim-webapp/3/*"
+            element={
+              <Flex>
+                <img src={REabout} alt="RE about page" />
+              </Flex>
+            }
+          />
+          <Route
+            path="bytesim-webapp/4/*"
+            element={
+              <Flex>
+                <img src={REmap} alt="RE network map" />
+              </Flex>
+            }
+          />
+          <Route
+            path="bytesim-webapp/*"
+            element={
+              <Flex>
+                <TestSVG />
+              </Flex>
+            }
+          /> */}
+        </Routes>
       </Flex>
-      {zones.map((z) => {
+      {/* {zones.map((z) => {
         return (
           <Rnd
             key={z.id}
@@ -155,7 +164,7 @@ export default function ZonesView({
             <p className={aboveZoneStyle}>{z.name}</p>
           </Rnd>
         );
-      })}
+      })} */}
     </Flex>
   );
 }