4 files changed, 95 insertions, 0 deletions
diff --git a/src/client/views/newlightbox/ExploreView/ExploreView.scss b/src/client/views/newlightbox/ExploreView/ExploreView.scss
new file mode 100644
index 000000000..5a8ab2f87
--- /dev/null
+++ b/src/client/views/newlightbox/ExploreView/ExploreView.scss
@@ -0,0 +1,44 @@
+@import '../NewLightboxStyles.scss';
+
+.exploreView-container {
+    width: 100%;
+    height: 100%;
+    border-radius: 20px;
+    position: relative;
+    // transform: scale(1);
+    background: $gray-l1;
+    border-top: $standard-border;
+    border-color: $gray-l2;
+    border-radius: 0px 0px 20px 20px;
+    transform-origin: 50% 50%;
+    overflow: hidden;
+
+    &.dark {
+      background: $black;
+    }
+  
+    &.light,
+    &.default {
+      background: $gray-l1;
+    }
+
+    .exploreView-doc {
+      width: 60px;
+      height: 80px;
+      position: absolute;
+      background: $blue-l2;
+      // opacity: 0.8;
+      transform-origin: 50% 50%;
+      transform: translate(-50%, -50%) scale(1);
+      cursor: pointer;
+      transition: 0.2s ease;
+      overflow: hidden;
+      font-size: 9px;
+      padding: 10px;
+      border-radius: 5px;
+
+      &:hover {
+        transform: translate(calc(-50% * 1.125), calc(-50% * 1.125)) scale(1.5);
+      }
+    }
+}
+\ No newline at end of file
diff --git a/src/client/views/newlightbox/ExploreView/ExploreView.tsx b/src/client/views/newlightbox/ExploreView/ExploreView.tsx
new file mode 100644
index 000000000..855bfd9e2
--- /dev/null
+++ b/src/client/views/newlightbox/ExploreView/ExploreView.tsx
@@ -0,0 +1,30 @@
+import './ExploreView.scss';
+import { IBounds, IExploreView, emptyBounds } from "./utils";
+import { IRecommendation } from "../components";
+import * as React from 'react';
+import { NewLightboxView } from '../NewLightboxView';
+import { StrCast } from '../../../../fields/Types';
+
+
+
+export const ExploreView = (props: IExploreView) => {
+    const { recs, bounds=emptyBounds } = props
+    
+    return <div className={`exploreView-container`}>
+        {recs && recs.map((rec) => {
+            console.log(rec.embedding, bounds)
+            const x_bound: number = Math.max(Math.abs(bounds.max_x), Math.abs(bounds.min_x))
+            const y_bound: number = Math.max(Math.abs(bounds.max_y), Math.abs(bounds.min_y))
+            console.log(x_bound, y_bound)
+            if (rec.embedding) {
+                const x = (rec.embedding.x / x_bound) * 50;
+                const y = (rec.embedding.y / y_bound) * 50;
+                console.log(x, y)
+                return <div className={`exploreView-doc`} onClick={() => {}} style={{top: `calc(50% + ${y}%)`, left: `calc(50% + ${x}%)`}}>
+                    {rec.title}
+                </div>
+            } else return (null)
+        })}
+        <div className={`exploreView-doc`} style={{top: `calc(50% + ${0}%)`, left: `calc(50% + ${0}%)`, background: '#073763', color: 'white'}}>{StrCast(NewLightboxView.NewLightboxDoc?.title)}</div>
+    </div>
+}
+\ No newline at end of file
diff --git a/src/client/views/newlightbox/ExploreView/index.ts b/src/client/views/newlightbox/ExploreView/index.ts
new file mode 100644
index 000000000..bf94eedcd
--- /dev/null
+++ b/src/client/views/newlightbox/ExploreView/index.ts
@@ -0,0 +1 @@
+export * from './ExploreView'
+\ No newline at end of file
diff --git a/src/client/views/newlightbox/ExploreView/utils.ts b/src/client/views/newlightbox/ExploreView/utils.ts
new file mode 100644
index 000000000..7d9cf226d
--- /dev/null
+++ b/src/client/views/newlightbox/ExploreView/utils.ts
@@ -0,0 +1,20 @@
+import { IRecommendation } from "../components";
+
+export interface IExploreView {
+    recs?: IRecommendation[],
+    bounds?: IBounds
+}
+
+export const emptyBounds = {
+    max_x: 0,
+    max_y: 0,
+    min_x: 0,
+    min_y: 0
+}
+
+export interface IBounds {
+    max_x: number,
+    max_y: number,
+    min_x: number,
+    min_y: number
+}
+\ No newline at end of file