continuing to layer in zoom visx feature

co-cauthored-by: alex landeros <alexander.landeros1@gmail.com>

Author: guizzettic

src/app/components/History.tsx

@@ -2,8 +2,28 @@ import React, { Component, useEffect, useState } from 'react';
 import * as d3 from 'd3';
 import LegendKey from './Legend';
 import { changeView, changeSlider } from '../actions/actions';
-import { useStoreContext } from '../store';
-import { string } from 'prop-types';
+// import { useStoreContext } from '../store';
+// import { string } from 'prop-types';
+import { Zoom } from '@visx/zoom';
+import { localPoint } from '@visx/event';
+import { RectClipPath } from '@visx/clip-path';
+
+// Visx Zoom feature stuff
+const bg = '';
+const points = [...new Array(1000)];
+
+// const colorScale = scaleLinear<number>({ range: [0, 1], domain: [0, 1000] });
+// const sizeScale = scaleLinear<number>({ domain: [0, 600], range: [0.5, 8] });
+
+const initialTransform = {
+  scaleX: 1.27,
+  scaleY: 1.27,
+  translateX: -211.62,
+  translateY: 162.59,
+  skewX: 0,
+  skewY: 0,
+};
+
 /**
  * @var colors: Colors array for the diffrerent node branches, each color is for a different branch
  */
@@ -38,7 +58,10 @@ const filterHooks = (data: any[]) => {
  */
 
 function History(props) {
-  const { hierarchy, dispatch, sliderIndex, viewIndex } = props;
+  //visx zoom first
+  const [showMiniMap, setShowMiniMap] = useState<boolean>(true);
+
+  const { width, height, hierarchy, dispatch, sliderIndex, viewIndex } = props;
   let root = JSON.parse(JSON.stringify(hierarchy));
   let isRecoil = false;
   console.log('before makedTree, hierarchy is, ', hierarchy);