Spaces:

bacancydataprophets
/

PMTREE

Running

App Files Files Community

jarvisx17 commited on Jun 18, 2024

Commit

0f75f16

verified ·

1 Parent(s): 9d54df3

Upload 10 files

Browse files

Files changed (10) hide show

1707395398692.jpeg +0 -0
devs.jpeg +0 -0
download.png +0 -0
image.png +0 -0
index.html +367 -19
new.csv +45 -0
nura.png +0 -0
package.json +9 -0
style.css +3 -27
tsconfig.json +5 -0

1707395398692.jpeg ADDED Viewed

devs.jpeg ADDED Viewed

download.png ADDED Viewed

image.png ADDED Viewed

index.html CHANGED Viewed

@@ -1,19 +1,367 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<script src="https://d3js.org/d3.v7.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/d3-flextree.js"></script>
+<style type="text/css">
+  .hide {
+    display: none;
+  }
+  .drag-enabled:not(.dragging-active) .node.draggable {
+    stroke: grey;
+    stroke-width: 3px;
+    stroke-dasharray: 2px;
+  }
+  .drag-enabled.dragging-active .droppable {
+    stroke: green;
+    stroke-width: 3px;
+    stroke-dasharray: 5px;
+  }
+  .node.dragging {
+    stroke-dasharray: 0 !important;
+    stroke-width: 0 !important;
+  }
+  .node.dragging .content-container {
+    background-color: #ffffff;
+  }
+</style>
+<script>
+  var chart = null;
+  let dragNode;
+  let dropNode;
+  let dragEnabled = false;
+  let dragStartX;
+  let dragStartY;
+  let isDragStarting = false;
+  let undoActions = [];
+  let redoActions = [];
+  // This is the data used - https://github.com/bumbeishvili/sample-data/blob/main/data-oracle.csv
+  d3.csv(
+    'new.csv',
+  ).then((data) => {
+    console.log(data);
+    chart = new d3.OrgChart()
+      .nodeHeight((d) => 85 + 25)
+      .nodeWidth((d) => 220 + 2)
+      .childrenMargin((d) => 50)
+      .compactMarginBetween((d) => 35)
+      .compactMarginPair((d) => 30)
+      .neighbourMargin((a, b) => 20)
+      .nodeContent(function (d, i, arr, state) {
+        return generateContent(d);
+      })
+      .nodeEnter(function (node) {
+        d3.select(this).call(
+          d3
+            .drag()
+            .filter(function (x, node) {
+              return dragEnabled && this.classList.contains('draggable');
+            })
+            .on('start', function (d, node) {
+              onDragStart(this, d, node);
+            })
+            .on('drag', function (dragEvent, node) {
+              onDrag(this, dragEvent);
+            })
+            .on('end', function (d) {
+              onDragEnd(this, d);
+            })
+        );
+      })
+      .nodeUpdate(function (d) {
+        if (d.id === '102' || d.id === '120' || d.id === '124') {
+          d3.select(this).classed('droppable', false);
+        } else {
+          d3.select(this).classed('droppable', true);
+        }
+        if (d.id === '101') {
+          d3.select(this).classed('draggable', false);
+        } else {
+          d3.select(this).classed('draggable', true);
+        }
+      })
+      .container('.chart-container')
+      .data(data)
+      .render();
+  });
+  function onDragStart(element, dragEvent, node) {
+    dragNode = node;
+    const width = dragEvent.subject.width;
+    const half = width / 2;
+    const x = dragEvent.x - half;
+    dragStartX = x;
+    dragStartY = parseFloat(dragEvent.y);
+    isDragStarting = true;
+    d3.select(element).classed('dragging', true);
+  }
+  function onDrag(element, dragEvent) {
+    if (!dragNode) {
+      return;
+    }
+    const state = chart.getChartState();
+    const g = d3.select(element);
+    // This condition is designed to run at the start of a drag only
+    if (isDragStarting) {
+      isDragStarting = false;
+      document
+        .querySelector('.chart-container')
+        .classList.add('dragging-active');
+      // This sets the Z-Index above all other nodes, by moving the dragged node to be the last-child.
+      g.raise();
+      const descendants = dragEvent.subject.descendants();
+      const linksToRemove = [...(descendants || []), dragEvent.subject];
+      const nodesToRemove = descendants.filter(
+        (x) => x.data.id !== dragEvent.subject.id
+      );
+      // Remove all links associated with the dragging node
+      state['linksWrapper']
+        .selectAll('path.link')
+        .data(linksToRemove, (d) => state.nodeId(d))
+        .remove();
+      // Remove all descendant nodes associated with the dragging node
+      if (nodesToRemove) {
+        state['nodesWrapper']
+          .selectAll('g.node')
+          .data(nodesToRemove, (d) => state.nodeId(d))
+          .remove();
+      }
+    }
+    dropNode = null;
+    const cP = {
+      width: dragEvent.subject.width,
+      height: dragEvent.subject.height,
+      left: dragEvent.x,
+      right: dragEvent.x + dragEvent.subject.width,
+      top: dragEvent.y,
+      bottom: dragEvent.y + dragEvent.subject.height,
+      midX: dragEvent.x + dragEvent.subject.width / 2,
+      midY: dragEvent.y + dragEvent.subject.height / 2,
+    };
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const allNodes = d3.selectAll('g.node:not(.dragging)');
+    allNodes.select('rect').attr('fill', 'none');
+    allNodes
+      .filter(function (d2, i) {
+        const cPInner = {
+          left: d2.x,
+          right: d2.x + d2.width,
+          top: d2.y,
+          bottom: d2.y + d2.height,
+        };
+        if (
+          cP.midX > cPInner.left &&
+          cP.midX < cPInner.right &&
+          cP.midY > cPInner.top &&
+          cP.midY < cPInner.bottom &&
+          this.classList.contains('droppable')
+        ) {
+          dropNode = d2;
+          return d2;
+        }
+      })
+      .select('rect')
+      .attr('fill', '#e4e1e1');
+    dragStartX += parseFloat(dragEvent.dx);
+    dragStartY += parseFloat(dragEvent.dy);
+    g.attr('transform', 'translate(' + dragStartX + ',' + dragStartY + ')');
+  }
+  function onDragEnd(element, dragEvent) {
+    document
+      .querySelector('.chart-container')
+      .classList.remove('dragging-active');
+    if (!dragNode) {
+      return;
+    }
+    d3.select(element).classed('dragging', false);
+    if (!dropNode) {
+      chart.render();
+      return;
+    }
+    if (dragEvent.subject.parent.id === dropNode.id) {
+      chart.render();
+      return;
+    }
+    d3.select(element).remove();
+    const data = chart.getChartState().data;
+    const node = data?.find((x) => x.id === dragEvent.subject.id);
+    const oldParentId = node.parentId;
+    node.parentId = dropNode.id;
+    redoActions = [];
+    undoActions.push({
+      id: dragEvent.subject.id,
+      parentId: oldParentId,
+    });
+    dropNode = null;
+    dragNode = null;
+    chart.render();
+    updateDragActions();
+  }
+  function enableDrag() {
+    dragEnabled = true;
+    document.querySelector('.chart-container').classList.add('drag-enabled');
+    document.getElementById('enableDragButton').classList.add('hide');
+    document.getElementById('dragActions').classList.remove('hide');
+  }
+  function disableDrag() {
+    dragEnabled = false;
+    document.querySelector('.chart-container').classList.remove('drag-enabled');
+    document.getElementById('enableDragButton').classList.remove('hide');
+    document.getElementById('dragActions').classList.add('hide');
+    undoActions = [];
+    redoActions = [];
+    updateDragActions();
+  }
+  function cancelDrag() {
+    if (undoActions.length === 0) {
+      disableDrag();
+      return;
+    }
+    const data = chart.getChartState().data;
+    undoActions.reverse().forEach((action) => {
+      const node = data.find((x) => x.id === action.id);
+      node.parentId = action.parentId;
+    });
+    disableDrag();
+    chart.render();
+  }
+  function undo() {
+    const action = undoActions.pop();
+    if (action) {
+      const node = chart.getChartState().data.find((x) => x.id === action.id);
+      const currentParentId = node.parentId;
+      const previousParentId = action.parentId;
+      action.parentId = currentParentId;
+      node.parentId = previousParentId;
+      redoActions.push(action);
+      chart.render();
+      updateDragActions();
+    }
+  }
+  function redo() {
+    const action = redoActions.pop();
+    if (action) {
+      const node = chart.getChartState().data.find((x) => x.id === action.id);
+      const currentParentId = node.parentId;
+      const previousParentId = action.parentId;
+      action.parentId = currentParentId;
+      node.parentId = previousParentId;
+      undoActions.push(action);
+      chart.render();
+      updateDragActions();
+    }
+  }
+  function updateDragActions() {
+    if (undoActions.length > 0) {
+      const undoButton = document.getElementById('undoButton');
+      undoButton.disabled = false;
+    } else {
+      undoButton.disabled = true;
+    }
+    if (redoActions.length > 0) {
+      const redoButton = document.getElementById('redoButton');
+      redoButton.disabled = false;
+    } else {
+      redoButton.disabled = true;
+    }
+  }
+  function generateContent(d) {
+    const color = '#FFFFFF';
+    const imageDiffVert = 25 + 2;
+    return `
+      <div class="node-container" style='
+      width:${d.width}px;
+      height:${d.height}px;
+      padding-top:${imageDiffVert - 2}px;
+      padding-left:1px;
+      padding-right:1px'>
+              <div class="content-container" style="font-family: 'Inter', sans-serif;  margin-left:-1px;width:${
+                d.width - 2
+              }px;height:${
+      d.height - imageDiffVert
+    }px;border-radius:10px;border: ${
+      d.data._highlighted || d.data._upToTheRootHighlighted
+        ? '5px solid #E27396"'
+        : '1px solid #E4E2E9"'
+    } >
+                  <div style="display:flex;justify-content:flex-end;margin-top:5px;margin-right:8px">#${
+                    d.data.id
+                  }</div>
+                  <div  style="margin-top:${
+                    -imageDiffVert - 20
+                  }px;margin-left:${15}px;border-radius:100px;width:50px;height:50px;" ></div>
+                  <div style="margin-top:${
+                    -imageDiffVert - 20
+                  }px;">   <img src=" ${
+      d.data.image
+    }" style="margin-left:${20}px;border-radius:100px;width:40px;height:40px;" /></div>
+                  <div style="font-size:15px;color:#08011E;margin-left:20px;margin-top:10px">  ${
+                    d.data.name
+                  } </div>
+                  <div style="color:#716E7B;margin-left:20px;margin-top:3px;font-size:10px;"> ${
+                    d.data.position
+                  } </div>
+              </div>
+          </div>
+      `;
+  }
+</script>
+<!--
+  This is the code which is used to show of feature , other parts of the code are part of the boilerplate
+-->
+<button id="enableDragButton" onclick="enableDrag()">Organize</button>
+<div id="dragActions" class="hide">
+  <button id="finishDrag" onclick="disableDrag()">Done</button>
+  <button id="undoButton" disabled onclick="undo()">Undo</button>
+  <button id="redoButton" disabled onclick="redo()">Redo</button>
+  <button id="cancelDrag" onclick="cancelDrag()">Cancel</button>
+</div>
+<!--
+  End of adding node functionality
+-->
+<div class="chart-container"></div>

new.csv ADDED Viewed

	@@ -0,0 +1,45 @@

+id,parentId,name,position,image
+1000,,Project Tree,All Projects,https://aemi.ie/wp-content/uploads/2021/10/Project-Arts-Centre-Logo-Black-1-scaled.jpg
+101,1000,Benefits Boost,Allison Bergmann,https://static.vecteezy.com/system/resources/previews/004/698/023/non_2x/the-initial-letter-bb-logo-design-free-vector.jpg
+102,1000,Avocat,Andres Levando,1707395398692.jpeg
+103,1000,Ubix,Peter,https://avatars.githubusercontent.com/u/17702955?s=200&v=4
+104,1000,Bmoxi,Shawn Haydel,image.png
+105,1000,Nalu,Samual,download.png
+106,101,Jignesh Patel,Main Developer, https://lh3.googleusercontent.com/a/ACg8ocLxB0MrNvQWrnXrs95LqCPAIf0HkVasJT10O335Z6D1x6V9JQw=s128-p-k-rw-no
+107,106,Dhara Solanki,Shadow Developer, https://lh3.googleusercontent.com/a-/ALV-UjU9qfxBupvJHrajC-orgLWaPWHKCh7Z55ch2YKJyTgXCrfz-OI=s128-p-k-rw-no
+108,106,Gneya Pandya,Shadow Developer, https://img.freepik.com/free-vector/young-redhead-woman_24877-82290.jpg
+109,106,Rutvi Rajesh,Shadow Developer, https://lh3.googleusercontent.com/a-/ALV-UjWtXxouenXBLtDqiyYCStIHzTQ693c5vxPZHqhLF4f6RYq972U=s128-p-k-rw-no
+109,105,Rutvi Rajesh,Main Developer, https://lh3.googleusercontent.com/a-/ALV-UjWtXxouenXBLtDqiyYCStIHzTQ693c5vxPZHqhLF4f6RYq972U=s128-p-k-rw-no
+110,102,Jignesh Patel,Main Developer, https://lh3.googleusercontent.com/a/ACg8ocLxB0MrNvQWrnXrs95LqCPAIf0HkVasJT10O335Z6D1x6V9JQw=s128-p-k-rw-no
+111,104,Jignesh Patel,Main Developer, https://lh3.googleusercontent.com/a/ACg8ocLxB0MrNvQWrnXrs95LqCPAIf0HkVasJT10O335Z6D1x6V9JQw=s128-p-k-rw-no
+112,111,Neha Rani,Shadow Developer, https://img.freepik.com/free-vector/woman-green-with-blue-hair_24877-81805.jpg
+113,111,Harsh Shanghvi,Shadow Developer, https://lh3.googleusercontent.com/a-/ALV-UjXOexOP5mMTJ3Gdeta5WK06vHHKevbIRn468hpmgB6oEEMyM3WN=s128-p-k-rw-no
+114,111,Prit Manvar,Shadow Developer, https://lh3.googleusercontent.com/a-/ALV-UjVUkndwQt_YXXCjzWuQtr5AEnpyKyLiNDtIYRCfS7qINjeptRw=s128-p-k-rw-no
+115,103,Jignesh Patel,Main Developer, https://lh3.googleusercontent.com/a/ACg8ocLxB0MrNvQWrnXrs95LqCPAIf0HkVasJT10O335Z6D1x6V9JQw=s128-p-k-rw-no
+116,103,Nayan Gajjar,Main Developer, https://bumbeishvili.github.io/avatars/avatars/portrait109.png
+117,103,Hima Soni,Main Developer, https://lh3.googleusercontent.com/a-/ALV-UjV0wedvoTt_fYcTttZaZIFdH64vxzgv2cfZ2EyJr6NsZU0kAFc=s88-w88-h88-c-k-no
+118,103,Ravi Nandani,Main Developer, https://img.freepik.com/premium-photo/male-female-profile-avatar-user-avatars-gender-icons_1020867-74966.jpg
+119,103,Ketan Nandani,Main Developer, https://lh3.googleusercontent.com/a-/ALV-UjUvcgsN4vgkYoYybcMDTaYLw_e0KDwLeSQxxlUUpb6rq6J9U_0=s128-p-k-rw-no
+120,1000,Bank OCR,HDFC BANK,https://s3-symbol-logo.tradingview.com/hdfc-bank--600.png
+121,120,Jignesh Patel,Main Developer, https://lh3.googleusercontent.com/a/ACg8ocLxB0MrNvQWrnXrs95LqCPAIf0HkVasJT10O335Z6D1x6V9JQw=s128-p-k-rw-no
+122,121,Kuldeep,Shadow Developer, https://lh3.googleusercontent.com/a-/ALV-UjVu2CScpMWttor6QmiSIFSk1RVv7Bvpz9z5C3uCvxznjsukx3A=s128-p-k-rw-no
+123,1000,IVY Mobility ,Nisarg Patel,https://dynamic.placementindia.com/recruiter_comp_logo/866155_20190911141539.jpg
+124,123,Ravi Nandani,Main Developer, https://img.freepik.com/premium-photo/male-female-profile-avatar-user-avatars-gender-icons_1020867-74966.jpg
+125,124,Yash Kothari,Shadow Developer, https://lh3.googleusercontent.com/a-/ALV-UjWNgiF6Hi9gQJRran9UgR3Hzb2wyk6JFypsV7Uz9XYthWPDzlmG=s64-p
+126,124,Dharak Patel,Shadow Developer, https://lh3.googleusercontent.com/a-/ALV-UjX0xWov15jBbgxX5L0pC_BYnVGblnlWWlWlvXFBLjPOMF3jlNZ5=s72-p-k-rw-no
+127,1000,Stackshare.io ,Stackshare LLP,https://media.licdn.com/dms/image/C560BAQF6ChuKvla6GA/company-logo_200_200/0/1631347132099?e=2147483647&v=beta&t=2mcDHTt1hXykVN_5UVZM_ZM9KU2hgM--PlkOy83SMYs
+128,127,Jignesh Patel,Main Developer, https://lh3.googleusercontent.com/a/ACg8ocLxB0MrNvQWrnXrs95LqCPAIf0HkVasJT10O335Z6D1x6V9JQw=s128-p-k-rw-no
+129,1000,Bacancy GPT ,Bacancy Technology,https://develop4u.co/media/reviews/photos/thumbnail/200x200c/10/03/4a/bacancy-logo-B-21-1591877541.png
+130,129,Jignesh Patel,Main Developer, https://lh3.googleusercontent.com/a/ACg8ocLxB0MrNvQWrnXrs95LqCPAIf0HkVasJT10O335Z6D1x6V9JQw=s128-p-k-rw-no
+131,129,Hima Soni,Main Developer, https://lh3.googleusercontent.com/a-/ALV-UjV0wedvoTt_fYcTttZaZIFdH64vxzgv2cfZ2EyJr6NsZU0kAFc=s88-w88-h88-c-k-no
+132,1000,NueraTN,Resume Parser,nura.png
+133,132,Jignesh Patel,Main Developer, https://lh3.googleusercontent.com/a/ACg8ocLxB0MrNvQWrnXrs95LqCPAIf0HkVasJT10O335Z6D1x6V9JQw=s128-p-k-rw-no
+134,133,Dhara Solanki,Shadow Developer, https://lh3.googleusercontent.com/a-/ALV-UjU9qfxBupvJHrajC-orgLWaPWHKCh7Z55ch2YKJyTgXCrfz-OI=s128-p-k-rw-no
+135,133,Gneya Pandya,Shadow Developer, https://img.freepik.com/free-vector/young-redhead-woman_24877-82290.jpg
+136,1000,Free Project,Free Developers,devs.jpeg
+137,136,Simran Chandani,Shadow Developer, https://lh3.googleusercontent.com/a-/ALV-UjVRhgphz6U2BTgMwj3kYMw9wTadFy4m2Qc5ixFg-J4-HZzmr-c=s72-p-k-rw-no
+138,136,Aakash Bhavsar,Shadow Developer, https://lh3.googleusercontent.com/a-/ALV-UjULDWP4XPXYyhNvqjmAD-PTVKKFFnXosrzadxMDdpUlvZd3hjI=s32-c
+139,136,Amir Ali,Shadow Developer, https://lh3.googleusercontent.com/a-/ALV-UjXrWM2yR5ittP-qgdNjvPHgs5fF4DS4WMenPZdnB23vNI2ibns=s32-c
+140,136,Pratham Patel,Shadow Developer, https://lh3.googleusercontent.com/a-/ALV-UjW5PBbzwhSUuQtUPDzKR3A6t6e15UF8jAXQ6gbUZQH5JgN-t9M=s32-c
+141,136,Dhara Adesara,Shadow Developer, https://img.freepik.com/free-vector/young-redhead-woman_24877-82290.jpg
+142,136,Avnisha Patel,Shadow Developer,https://lh3.googleusercontent.com/a-/ALV-UjW3QipS6uLnN95fa-Zppg8IYgcm62WUqPnVzRUijrAOfpPfXVQ=s32-c

nura.png ADDED Viewed

package.json ADDED Viewed

	@@ -0,0 +1,9 @@

+{
+    "name": "js",
+    "version": "0.0.0",
+    "private": true,
+    "dependencies": {
+      "d3-org-chart": "github:joelcoxokc/org-chart#feat/drag"
+    }
+  }

style.css CHANGED Viewed

@@ -1,28 +1,4 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
 }

+h1,
+h2 {
+  font-family: Lato;
 }

tsconfig.json ADDED Viewed

	@@ -0,0 +1,5 @@

+{
+    "compilerOptions": {
+      "target": "esnext"
+    }
+  }