conditions-gp | added import files for Road Continditions, comments t…

…o be added and dependencies fixed #3

frontend/src/Components/Map/Hooks/useZoom.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react"
 import { useMapEvents } from "react-leaflet"
 
-
+//zoom implementation on map events
 const useZoom = () => {
     const [zoom, setZoom] = useState<number>()
 

frontend/src/Components/Map/MapWrapper.tsx

@@ -6,6 +6,7 @@ import Zoom from './Zoom';
 import '../../css/map.css'
 import { MAP_OPTIONS } from './constants';
 
+//container for map and its attributes
 const MapWrapper = ( props : any ) => { 
 
 	const { children } = props;

frontend/src/Components/Map/Renderers/DistHotline.tsx

@@ -1,5 +1,6 @@
+
 import { FC, useEffect, useMemo, useState } from 'react';
-import { LeafletEvent, Polyline } from 'leaflet';
+import { LeafletEvent, Polyline } from 'leaflet'
 import { HotlineOptions, useCustomHotline } from 'react-leaflet-hotline';
 
 import { useGraph } from '../../../context/GraphContext';
@@ -9,87 +10,60 @@ import { Condition, Node, WayId } from '../../../models/path';
 import DistRenderer from '../../../assets/hotline/DistRenderer';
 import { DistData } from '../../../assets/hotline/hotline';
 import HoverHotPolyline from '../../../assets/hotline/HoverHotPolyline';
-import {
-  HotlineEventFn,
-  HotlineEventHandlers,
-} from 'react-leaflet-hotline/dist/types/types';
+import { HotlineEventFn, HotlineEventHandlers } from 'react-leaflet-hotline/lib/types';
 import useZoom from '../Hooks/useZoom';
-import { useHoverContext } from '../../../context/GraphHoverContext';
+import { useHoverContext } from "../../../context/GraphHoverContext";
+
 
 const getLat = (n: Node) => n.lat;
 const getLng = (n: Node) => n.lng;
 const getVal = (n: Node) => n.way_dist;
-const getWeight = (z: number | undefined) =>
-  z === undefined ? 0 : Math.max(z > 8 ? z - 6 : z - 5, 2);
+const getWeight = (z: number | undefined) => z === undefined ? 0 : Math.max(z > 8 ? z - 6 : z - 5, 2)
 
 interface IDistHotline {
-  way_ids: WayId[];
-  geometry: Node[][];
-  conditions: Condition[][];
-  options?: HotlineOptions;
-  eventHandlers?: HotlineEventHandlers;
+    way_ids: WayId[];
+    geometry: Node[][];
+    conditions: Condition[][];
+    options?: HotlineOptions,
+    eventHandlers?: HotlineEventHandlers;
+}
+
+const handler = (eventHandlers: HotlineEventHandlers | undefined, event: keyof HotlineEventHandlers, opacity: number) => {
+    return (e: LeafletEvent, i: number, p: Polyline<any, any>) => {
+        p.setStyle( { opacity } )
+        if ( eventHandlers && eventHandlers[event] !== undefined )
+            (eventHandlers[event] as HotlineEventFn)(e, i, p);
+    }
+}
+
+const DistHotline: FC<IDistHotline> = ( { way_ids, geometry, conditions, options, eventHandlers } ) => {
+
+    const { dotHover } = useHoverContext()
+    const zoom = useZoom()
+
+    const opts = useMemo( () => ({ 
+        ...options, weight: getWeight(zoom)
+    }), [options, zoom] )
+
+    const handlers: HotlineEventHandlers = useMemo( () => ({
+        ...eventHandlers,
+        mouseover: handler(eventHandlers, 'mouseover', 0.5),
+        mouseout: handler(eventHandlers, 'mouseout', 0),
+    }), [eventHandlers] )
+
+    const { hotline } = useCustomHotline<Node, DistData>( 
+        DistRenderer, HoverHotPolyline, 
+        { data: geometry, getLat, getLng, getVal, options: opts, eventHandlers: handlers }, 
+        way_ids, conditions 
+    );
+
+    useEffect( () => {
+        if ( hotline === undefined ) return;
+        (hotline as HoverHotPolyline<Node, DistData>).setHover(dotHover)
+    }, [dotHover])
+
+    return null;
 }
 
-const handler = (
-  eventHandlers: HotlineEventHandlers | undefined,
-  event: keyof HotlineEventHandlers,
-  opacity: number,
-) => {
-  return (e: LeafletEvent, i: number, p: Polyline<any, any>) => {
-    p.setStyle({ opacity });
-    if (eventHandlers && eventHandlers[event] !== undefined)
-      (eventHandlers[event] as HotlineEventFn)(e, i, p);
-  };
-};
-
-const DistHotline: FC<IDistHotline> = ({
-  way_ids,
-  geometry,
-  conditions,
-  options,
-  eventHandlers,
-}) => {
-  const { dotHover } = useHoverContext();
-  const zoom = useZoom();
-
-  const opts = useMemo(
-    () => ({
-      ...options,
-      weight: getWeight(zoom),
-    }),
-    [options, zoom],
-  );
-
-  const handlers: HotlineEventHandlers = useMemo(
-    () => ({
-      ...eventHandlers,
-      mouseover: handler(eventHandlers, 'mouseover', 0.5),
-      mouseout: handler(eventHandlers, 'mouseout', 0),
-    }),
-    [eventHandlers],
-  );
-
-  const { hotline } = useCustomHotline<Node, DistData>(
-    DistRenderer,
-    HoverHotPolyline,
-    {
-      data: geometry,
-      getLat,
-      getLng,
-      getVal,
-      options: opts,
-      eventHandlers: handlers,
-    },
-    way_ids,
-    conditions,
-  );
-
-  useEffect(() => {
-    if (hotline === undefined) return;
-    (hotline as HoverHotPolyline<Node, DistData>).setHover(dotHover);
-  }, [dotHover]);
-
-  return null;
-};
-
-export default DistHotline;
+
+export default DistHotline;

frontend/src/Components/Map/Zoom.tsx

@@ -2,6 +2,7 @@
 import { ZoomControl } from "react-leaflet"
 import useZoom from "./Hooks/useZoom"
 
+// implement zoom component on map
 const Zoom = () => {
 
     const zoom = useZoom()

frontend/src/Components/Palette/PaletteEditor.tsx

@@ -1,47 +1,34 @@
-import { FC, MouseEvent, useState } from 'react';
-import { Gradient } from 'react-gradient-hook';
-import { CursorOptions } from 'react-gradient-hook/lib/types';
-import { useMap } from 'react-leaflet';
-import { Palette } from 'react-leaflet-hotline';
+import { FC, MouseEvent, useState } from "react";
+import { Gradient } from "react-gradient-hook";
+import { CursorOptions } from "react-gradient-hook/lib/types";
+import { useMap } from "react-leaflet";
+import { Palette } from "react-leaflet-hotline";
 
-import '../../css/palette.css';
+import '../../css/palette.css'
 
 interface IPaletteEditor {
-  width: number | undefined;
-  defaultPalette?: Palette;
-  cursorOptions?: CursorOptions;
-  onChange?: (palette: Palette) => void;
+    width: number | undefined;
+    defaultPalette?: Palette;
+    cursorOptions?: CursorOptions;
+    onChange?: (palette: Palette) => void; 
 }
 
-const PaletteEditor: FC<IPaletteEditor> = ({
-  width,
-  defaultPalette,
-  cursorOptions,
-  onChange,
-}) => {
-  const [show, setShow] = useState<boolean>(false);
-
-  const toggleAppear = () => setShow((prev) => !prev);
-
-  if (width === undefined || width === 0) return null;
-
-  return (
-    <div
-      className={`palette-wrapper ${show ? 'palette-show' : ''}`}
-      style={{ width: `${width}px` }}
-    >
-      <div className="palette-container">
-        <Gradient
-          defaultColors={defaultPalette}
-          cursorOptions={cursorOptions}
-          onChange={onChange}
-        />
-      </div>
-      <div className="palette-hover" onClick={toggleAppear}>
-        🎨
-      </div>
-    </div>
-  );
-};
+const PaletteEditor: FC<IPaletteEditor> = ( { width, defaultPalette, cursorOptions, onChange } ) => {
+
+    const [show, setShow] = useState<boolean>(false)
+
+    const toggleAppear = () => setShow(prev => !prev)
+
+    if ( width === undefined || width === 0 ) return null;
+
+    return (
+        <div className={`palette-wrapper ${show ? 'palette-show' : ''}`} style={{width: `${width}px`}} >
+            <div className="palette-container">
+                <Gradient defaultColors={defaultPalette} cursorOptions={cursorOptions} onChange={onChange}/>
+            </div>
+            <div className='palette-hover' onClick={toggleAppear}>🎨</div>
+        </div>
+    )
+}
 
 export default PaletteEditor;