performanceresultscreens 0.0.26 → 0.0.31

package/dist/components/Organisms/RecapGraph/Example.stories.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultTimerClock = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const RecapData_1 = require("../../../utils/RecapData");
+const Reactgraphflow_1 = __importDefault(require("./Reactgraphflow"));
+const defination_svg_1 = __importDefault(require("../../../assests/revision/defination.svg"));
+const formula_svg_1 = __importDefault(require("../../../assests/revision/formula.svg"));
+const videoplay_svg_1 = __importDefault(require("../../../assests/revision/videoplay.svg"));
+const equations_svg_1 = __importDefault(require("../../../assests/revision/equations.svg"));
+exports.default = {
+    title: "Components/Organisms/Graph/ReactFlowELKView",
+    component: Reactgraphflow_1.default,
+};
+const Template = (args) => (0, jsx_runtime_1.jsx)(Reactgraphflow_1.default, { ...args });
+const customIcons = [
+    { src: equations_svg_1.default, type: "equations" },
+    { src: videoplay_svg_1.default, type: "videos" },
+    { src: formula_svg_1.default, type: "formula" },
+    { src: defination_svg_1.default, type: "definitions" },
+];
+console.log("content:", RecapData_1.contentMap);
+exports.DefaultTimerClock = Template.bind({});
+exports.DefaultTimerClock.args = {
+    jsonData: RecapData_1.jsonData,
+    contentMap: RecapData_1.contentMap,
+    iconConfig: customIcons,
+    onContentUpdate: (payload) => {
+        console.log("onContentUpdate payload:", payload);
+    },
+    onIconDataUpdate: () => { },
+    isAdmin: true,
+    isMobile: true,
+};
+//# sourceMappingURL=Example.stories.js.map

package/dist/components/Organisms/RecapGraph/Example.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Example.stories.js","sourceRoot":"","sources":["../../../../src/components/Organisms/RecapGraph/Example.stories.tsx"],"names":[],"mappings":";;;;;;;AAEA,wDAA+E;AAC/E,sEAA0C;AAC1C,8FAAsE;AACtE,wFAAgE;AAChE,4FAAoE;AACpE,4FAAmE;AAEnE,kBAAe;IACb,KAAK,EAAE,6CAA6C;IACpD,SAAS,EAAE,wBAAU;CACd,CAAC;AAEV,MAAM,QAAQ,GAAe,CAAC,IAAI,EAAE,EAAE,CAAC,uBAAC,wBAAU,OAAK,IAAI,GAAI,CAAC;AAEhE,MAAM,WAAW,GAAG;IAClB,EAAE,GAAG,EAAE,uBAAY,EAAE,IAAI,EAAE,WAAW,EAAE;IACxC,EAAE,GAAG,EAAE,uBAAa,EAAE,IAAI,EAAE,QAAQ,EAAE;IACtC,EAAE,GAAG,EAAE,qBAAW,EAAE,IAAI,EAAE,SAAS,EAAE;IACrC,EAAE,GAAG,EAAE,wBAAc,EAAE,IAAI,EAAE,aAAa,EAAE;CAC7C,CAAC;AACF,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,sBAAU,CAAC,CAAC;AAEvB,QAAA,iBAAiB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACnD,yBAAiB,CAAC,IAAI,GAAG;IACvB,QAAQ,EAAE,oBAAQ;IAClB,UAAU,EAAE,sBAAU;IACtB,UAAU,EAAE,WAAW;IACvB,eAAe,EAAE,CAAC,OAAY,EAAE,EAAE;QAChC,OAAO,CAAC,GAAG,CAAC,0BAA0B,EAAE,OAAO,CAAC,CAAC;IACnD,CAAC;IACD,gBAAgB,EAAE,GAAG,EAAE,GAAE,CAAC;IAC1B,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,IAAI;CACf,CAAC"}

package/dist/components/Organisms/RecapGraph/FlashCardNode.d.ts

@@ -0,0 +1,3 @@
+export default FlashcardNode;
+declare const FlashcardNode: React.NamedExoticComponent<object>;
+import React from "react";

package/dist/components/Organisms/RecapGraph/FlashCardNode.js

@@ -0,0 +1,48 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_2 = require("@chakra-ui/react");
+const ContentView_1 = require("../../Molecules/RecapNode/ContentView");
+const NodeHandles_1 = require("./NodeHandles");
+const IconBar_1 = require("./IconBar");
+const contentUtils_1 = require("../../../utils/contentUtils");
+const FlashcardNode = (0, react_1.memo)(({ data }) => {
+    const [currentVideoIdx, setCurrentVideoIdx] = (0, react_1.useState)(0);
+    const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
+    const { hasContent, level, hasMultipleChildren, color, label, icons = [], content } = data;
+    const availableTypes = (0, contentUtils_1.getAvailableContentTypes)(content);
+    const [displayType, setDisplayType] = (0, react_1.useState)(availableTypes[0] || null);
+    const availableIcons = icons.filter(icon => availableTypes.includes(icon.type));
+    const handleIconClick = (iconType) => {
+        setIsExpanded(true);
+        setDisplayType(iconType);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { minWidth: "280px", maxWidth: "350px", zIndex: "10" }, children: [(0, jsx_runtime_1.jsx)(NodeHandles_1.NodeHandles, { level: level, hasMultipleChildren: hasMultipleChildren }), (0, jsx_runtime_1.jsxs)(react_2.Box, { p: "4px", bg: "#FFE0DD", borderRadius: "4px", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { bg: color, p: "8px 12px", align: "center", borderRadius: "4px", justify: "space-between", gap: "12px", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { w: "100%", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontFamily: "Inter", fontWeight: "600", fontSize: "12px", children: label }) }), hasContent && ((0, jsx_runtime_1.jsx)(IconBar_1.IconBar, { icons: availableIcons, displayType: displayType, onIconClick: handleIconClick }))] }), hasContent && isExpanded && ((0, jsx_runtime_1.jsx)(react_2.Box, { p: "12px", fontSize: "13px", lineHeight: "1.6", borderRadius: "4px", bg: "#fff", mt: "8px", children: (0, jsx_runtime_1.jsx)(ContentView_1.ContentView, { displayType: displayType, content: content, currentVideoIdx: currentVideoIdx, setCurrentVideoIdx: setCurrentVideoIdx }) }))] })] }));
+});
+FlashcardNode.displayName = 'FlashcardNode';
+exports.default = FlashcardNode;
+//# sourceMappingURL=FlashCardNode.js.map

package/dist/components/Organisms/RecapGraph/FlashCardNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlashCardNode.js","sourceRoot":"","sources":["../../../../src/components/Organisms/RecapGraph/FlashCardNode.jsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA8C;AAC9C,4CAAmD;AACnD,uEAAoE;AACpE,+CAA4C;AAC5C,uCAAoC;AACpC,8DAAuE;AAEvE,MAAM,aAAa,GAAG,IAAA,YAAI,EAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IACtC,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC;IAC1D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,EACJ,UAAU,EACV,KAAK,EACL,mBAAmB,EACnB,KAAK,EACL,KAAK,EACL,KAAK,GAAG,EAAE,EACV,OAAO,EACR,GAAG,IAAI,CAAC;IAET,MAAM,cAAc,GAAG,IAAA,uCAAwB,EAAC,OAAO,CAAC,CAAC;IACzD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAC,cAAc,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC;IAE1E,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAEhF,MAAM,eAAe,GAAG,CAAC,QAAQ,EAAE,EAAE;QACnC,aAAa,CAAC,IAAI,CAAC,CAAC;QACpB,cAAc,CAAC,QAAQ,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,iCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,aAChE,uBAAC,yBAAW,IAAC,KAAK,EAAE,KAAK,EAAE,mBAAmB,EAAE,mBAAmB,GAAI,EAEvE,wBAAC,WAAG,IAAC,CAAC,EAAC,KAAK,EAAC,EAAE,EAAC,SAAS,EAAC,YAAY,EAAC,KAAK,aAC1C,wBAAC,YAAI,IACH,EAAE,EAAE,KAAK,EACT,CAAC,EAAC,UAAU,EACZ,KAAK,EAAC,QAAQ,EACd,YAAY,EAAC,KAAK,EAClB,OAAO,EAAC,eAAe,EACvB,GAAG,EAAC,MAAM,aAEV,uBAAC,WAAG,IAAC,CAAC,EAAC,MAAM,YACX,uBAAC,YAAI,IAAC,UAAU,EAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAC,QAAQ,EAAC,MAAM,YACtD,KAAK,GACD,GACH,EAEL,UAAU,IAAI,CACb,uBAAC,iBAAO,IACN,KAAK,EAAE,cAAc,EACrB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,eAAe,GAC5B,CACH,IACI,EAEN,UAAU,IAAI,UAAU,IAAI,CAC3B,uBAAC,WAAG,IACF,CAAC,EAAC,MAAM,EACR,QAAQ,EAAC,MAAM,EACf,UAAU,EAAC,KAAK,EAChB,YAAY,EAAC,KAAK,EAClB,EAAE,EAAC,MAAM,EACT,EAAE,EAAC,KAAK,YAER,uBAAC,yBAAW,IACV,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,kBAAkB,GACtC,GACE,CACP,IACG,IACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC;AAE5C,kBAAe,aAAa,CAAC"}

package/dist/components/Organisms/RecapGraph/IconBar.d.ts

@@ -0,0 +1,5 @@
+export function IconBar({ icons, displayType, onIconClick }: {
+    icons: any;
+    displayType: any;
+    onIconClick: any;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Organisms/RecapGraph/IconBar.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconBar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@chakra-ui/react");
+const IconBar = ({ icons, displayType, onIconClick }) => {
+    if (!icons || icons.length === 0)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", gap: "6px", flexShrink: 0, children: icons.map((iconObj, i) => ((0, jsx_runtime_1.jsx)(react_2.Flex, { w: "26px", h: "26px", borderRadius: "4px", align: "center", justify: "center", cursor: "pointer", onClick: (e) => {
+                e.stopPropagation();
+                onIconClick(iconObj.type);
+            }, opacity: displayType === iconObj.type ? 1 : 0.4, transition: "opacity 0.2s", _hover: { transform: "scale(1.1)" }, children: (0, jsx_runtime_1.jsx)(react_2.Image, { src: iconObj.src, w: "14px", h: "14px", alt: iconObj.type }) }, i))) }));
+};
+exports.IconBar = IconBar;
+//# sourceMappingURL=IconBar.js.map

package/dist/components/Organisms/RecapGraph/IconBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconBar.js","sourceRoot":"","sources":["../../../../src/components/Organisms/RecapGraph/IconBar.jsx"],"names":[],"mappings":";;;;;;;AAAA,kDAA0B;AAC1B,4CAA+C;AAExC,MAAM,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,EAAE,EAAE;IAC7D,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAE9C,OAAO,CACL,uBAAC,YAAI,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,KAAK,EAAC,UAAU,EAAE,CAAC,YACzC,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CACzB,uBAAC,YAAI,IAEH,CAAC,EAAC,MAAM,EACR,CAAC,EAAC,MAAM,EACR,YAAY,EAAC,KAAK,EAClB,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,QAAQ,EAChB,MAAM,EAAC,SAAS,EAChB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACb,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YAC5B,CAAC,EACD,OAAO,EAAE,WAAW,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAC/C,UAAU,EAAC,cAAc,EACzB,MAAM,EAAE,EAAE,SAAS,EAAE,YAAY,EAAE,YAEnC,uBAAC,aAAK,IAAC,GAAG,EAAE,OAAO,CAAC,GAAG,EAAE,CAAC,EAAC,MAAM,EAAC,CAAC,EAAC,MAAM,EAAC,GAAG,EAAE,OAAO,CAAC,IAAI,GAAI,IAf3D,CAAC,CAgBD,CACR,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC;AA3BW,QAAA,OAAO,WA2BlB"}

package/dist/components/Organisms/RecapGraph/NodeHandles.d.ts

@@ -0,0 +1,4 @@
+export function NodeHandles({ level, hasMultipleChildren }: {
+    level: any;
+    hasMultipleChildren: any;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/Organisms/RecapGraph/NodeHandles.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodeHandles = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const reactflow_1 = require("reactflow");
+const NodeHandles = ({ level, hasMultipleChildren }) => {
+    const isRoot = level === 0;
+    const isLevel1 = level === 1;
+    const isLevel2Plus = level >= 2;
+    const shouldShowTopHandle = isLevel1 || (isLevel2Plus && !hasMultipleChildren);
+    const shouldShowLeftHandle = isLevel2Plus && hasMultipleChildren;
+    const shouldShowBottomHandle = isRoot || isLevel1 || (isLevel2Plus && !hasMultipleChildren);
+    const shouldShowRightHandle = isLevel2Plus && hasMultipleChildren;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [shouldShowTopHandle && ((0, jsx_runtime_1.jsx)(reactflow_1.Handle, { type: "target", position: reactflow_1.Position.Top, style: { background: "#555" }, id: "top" })), shouldShowLeftHandle && ((0, jsx_runtime_1.jsx)(reactflow_1.Handle, { type: "target", position: reactflow_1.Position.Left, style: { background: "#555" }, id: "left" })), shouldShowBottomHandle && ((0, jsx_runtime_1.jsx)(reactflow_1.Handle, { type: "source", position: reactflow_1.Position.Bottom, style: { background: "#555" }, id: "bottom" })), shouldShowRightHandle && ((0, jsx_runtime_1.jsx)(reactflow_1.Handle, { type: "source", position: reactflow_1.Position.Right, style: { background: "#555" }, id: "right" }))] }));
+};
+exports.NodeHandles = NodeHandles;
+//# sourceMappingURL=NodeHandles.js.map

package/dist/components/Organisms/RecapGraph/NodeHandles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeHandles.js","sourceRoot":"","sources":["../../../../src/components/Organisms/RecapGraph/NodeHandles.jsx"],"names":[],"mappings":";;;;;;;AAAA,kDAA0B;AAC1B,yCAA6C;AAEtC,MAAM,WAAW,GAAG,CAAC,EAAE,KAAK,EAAE,mBAAmB,EAAE,EAAE,EAAE;IAC5D,MAAM,MAAM,GAAG,KAAK,KAAK,CAAC,CAAC;IAC3B,MAAM,QAAQ,GAAG,KAAK,KAAK,CAAC,CAAC;IAC7B,MAAM,YAAY,GAAG,KAAK,IAAI,CAAC,CAAC;IAEhC,MAAM,mBAAmB,GAAG,QAAQ,IAAI,CAAC,YAAY,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAC/E,MAAM,oBAAoB,GAAG,YAAY,IAAI,mBAAmB,CAAC;IACjE,MAAM,sBAAsB,GAAG,MAAM,IAAI,QAAQ,IAAI,CAAC,YAAY,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAC5F,MAAM,qBAAqB,GAAG,YAAY,IAAI,mBAAmB,CAAC;IAElE,OAAO,CACL,6DACG,mBAAmB,IAAI,CACtB,uBAAC,kBAAM,IACL,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,oBAAQ,CAAC,GAAG,EACtB,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,EAC7B,EAAE,EAAC,KAAK,GACR,CACH,EAEA,oBAAoB,IAAI,CACvB,uBAAC,kBAAM,IACL,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,oBAAQ,CAAC,IAAI,EACvB,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,EAC7B,EAAE,EAAC,MAAM,GACT,CACH,EAEA,sBAAsB,IAAI,CACzB,uBAAC,kBAAM,IACL,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,oBAAQ,CAAC,MAAM,EACzB,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,EAC7B,EAAE,EAAC,QAAQ,GACX,CACH,EAEA,qBAAqB,IAAI,CACxB,uBAAC,kBAAM,IACL,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,oBAAQ,CAAC,KAAK,EACxB,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,EAC7B,EAAE,EAAC,OAAO,GACV,CACH,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAjDW,QAAA,WAAW,eAiDtB"}

package/dist/components/Organisms/RecapGraph/Reactgraphflow.d.ts

@@ -0,0 +1,10 @@
+export default RecapGraph;
+declare function RecapGraph({ jsonData, contentMap, iconConfig, onContentUpdate, onIconDataUpdate, isAdmin, isMobile, }: {
+    jsonData?: null | undefined;
+    contentMap?: {} | undefined;
+    iconConfig?: any[] | undefined;
+    onContentUpdate: any;
+    onIconDataUpdate: any;
+    isAdmin?: boolean | undefined;
+    isMobile: any;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/Organisms/RecapGraph/Reactgraphflow.js

@@ -0,0 +1,60 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const reactflow_1 = __importStar(require("reactflow"));
+// import "reactflow/dist/style.css";
+const FlashCardNode_1 = __importDefault(require("../FlashCardNode/FlashCardNode"));
+const MobileAccordionView_1 = require("../FlashCardNode/MobileAccordionView");
+const useRecapGraphLogic_1 = require("./useRecapGraphLogic");
+const RecapGraph = ({ jsonData = null, contentMap = {}, iconConfig = [], onContentUpdate, onIconDataUpdate, isAdmin = false, isMobile, }) => {
+    const [layout, setLayout] = (0, react_1.useState)({ nodes: [], edges: [] });
+    const logic = (0, useRecapGraphLogic_1.useRecapGraphLogic)(jsonData, contentMap, iconConfig);
+    const nodeTypes = (0, react_1.useMemo)(() => ({
+        flashcard: (props) => ((0, jsx_runtime_1.jsx)(FlashCardNode_1.default, { ...props, rootNodeId: jsonData?._id, onContentUpdate: onContentUpdate, onIconDataUpdate: onIconDataUpdate, isAdmin: isAdmin, isMobile: isMobile })),
+    }), [onContentUpdate, onIconDataUpdate, isAdmin, isMobile, jsonData?._id]);
+    const graphData = (0, react_1.useMemo)(() => {
+        if (!jsonData)
+            return { nodes: [], edges: [] };
+        const nodes = logic.buildNodes(jsonData);
+        const edges = logic.buildEdges(jsonData, nodes);
+        return { nodes, edges };
+    }, [jsonData, contentMap, iconConfig, logic.activeExpandedNodeId]);
+    (0, react_1.useEffect)(() => {
+        const res = logic.computeCustomLayout(graphData.nodes, graphData.edges);
+        setLayout(res);
+    }, [graphData, jsonData, logic.expandedNodeId, logic.expandedNodeHeight]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            width: isAdmin ? "100vw" : "",
+            height: isAdmin ? "100vh" : "90%",
+            backgroundColor: "#f8fafc",
+        }, children: isMobile ? ((0, jsx_runtime_1.jsx)(MobileAccordionView_1.MobileAccordionView, { jsonData: jsonData, contentMap: contentMap, iconConfig: iconConfig, onContentUpdate: onContentUpdate, onIconDataUpdate: onIconDataUpdate, isAdmin: isAdmin })) : ((0, jsx_runtime_1.jsxs)(reactflow_1.default, { nodes: layout.nodes, edges: layout.edges, nodeTypes: nodeTypes, fitView: true, proOptions: { hideAttribution: true }, zoomOnScroll: true, panOnDrag: true, selectionOnDrag: false, elementsSelectable: true, nodesConnectable: false, children: [(0, jsx_runtime_1.jsx)(reactflow_1.Controls, { showFitView: false, showInteractive: false }), (0, jsx_runtime_1.jsx)(reactflow_1.Background, { variant: "none" })] })) }));
+};
+exports.default = RecapGraph;
+//# sourceMappingURL=Reactgraphflow.js.map

package/dist/components/Organisms/RecapGraph/Reactgraphflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Reactgraphflow.js","sourceRoot":"","sources":["../../../../src/components/Organisms/RecapGraph/Reactgraphflow.jsx"],"names":[],"mappings":"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"}

package/dist/components/Organisms/RecapGraph/useRecapGraphLogic.d.ts

@@ -0,0 +1,29 @@
+export function useRecapGraphLogic(jsonData: any, contentMap: any, iconConfig: any): {
+    expandedNodeId: null;
+    expandedNodeHeight: number;
+    activeExpandedNodeId: null;
+    isTransitioning: boolean;
+    expandedNodes: {};
+    contentExpanded: {};
+    displayTypes: {};
+    videoIndices: {};
+    colorMap: {};
+    getNodeColors: (nodeId: any) => {
+        headerColor: any;
+        bgColor: any;
+        colorInfo: any;
+    };
+    getNodeContent: (nodeId: any) => {
+        nodeContent: any;
+        hasContent: any;
+    };
+    buildNodes: (data: any) => any[];
+    buildEdges: (data: any, nodes: any) => any[];
+    computeCustomLayout: (inputNodes: any, inputEdges: any) => {
+        nodes: any;
+        edges: any;
+    };
+    handleChevronClick: (nodeId: any) => void;
+    handleIconClick: (nodeId: any, type: any, availableContentTypes: any) => void;
+    setCurrentVideoIdx: (nodeId: any, idx: any) => void;
+};

package/dist/components/Organisms/RecapGraph/useRecapGraphLogic.js

@@ -0,0 +1,354 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRecapGraphLogic = void 0;
+const react_1 = require("react");
+const contentUtils_1 = require("../../../utils/contentUtils");
+const useRecapGraphLogic = (jsonData, contentMap, iconConfig) => {
+    const [expandedNodeId, setExpandedNodeId] = (0, react_1.useState)(null);
+    const [expandedNodeHeight, setExpandedNodeHeight] = (0, react_1.useState)(0);
+    const [activeExpandedNodeId, setActiveExpandedNodeId] = (0, react_1.useState)(null);
+    const [isTransitioning, setIsTransitioning] = (0, react_1.useState)(false);
+    const [expandedNodes, setExpandedNodes] = (0, react_1.useState)({});
+    const [contentExpanded, setContentExpanded] = (0, react_1.useState)({});
+    const [displayTypes, setDisplayTypes] = (0, react_1.useState)({});
+    const [videoIndices, setVideoIndices] = (0, react_1.useState)({});
+    // Build color map with consistent logic
+    const colorMap = (0, react_1.useMemo)(() => {
+        const map = {};
+        let level1ColorIndex = 0;
+        const buildColorMap = (nodeData, level = 0, parentColorKey = null) => {
+            if (!nodeData)
+                return;
+            let colorKey;
+            if (level === 0) {
+                colorKey = "root";
+            }
+            else if (level === 1) {
+                colorKey = String(level1ColorIndex % 8);
+                level1ColorIndex++;
+            }
+            else {
+                colorKey = parentColorKey;
+            }
+            map[nodeData._id] = { level, colorKey };
+            if (nodeData.children?.length) {
+                nodeData.children.forEach((child) => {
+                    buildColorMap(child, level + 1, colorKey);
+                });
+            }
+        };
+        if (jsonData)
+            buildColorMap(jsonData);
+        return map;
+    }, [jsonData]);
+    // Get colors for a node
+    const getNodeColors = (nodeId) => {
+        const colorInfo = colorMap[nodeId] || { level: 0, colorKey: "root" };
+        const headerColor = colorInfo.level === 0
+            ? contentUtils_1.COLOR_MAP.root
+            : contentUtils_1.COLOR_MAP[colorInfo.colorKey];
+        const bgColor = colorInfo.level === 0
+            ? contentUtils_1.LIGHT_COLOR_MAP.root
+            : contentUtils_1.LIGHT_COLOR_MAP[colorInfo.colorKey];
+        return { headerColor, bgColor, colorInfo };
+    };
+    // Check if node has content
+    const getNodeContent = (nodeId) => {
+        const nodeContent = contentMap[nodeId] || null;
+        const hasContent = nodeContent &&
+            ((nodeContent.videos && nodeContent.videos.length > 0) ||
+                (nodeContent.recap && Object.keys(nodeContent.recap).length > 0));
+        return { nodeContent, hasContent };
+    };
+    // Build nodes for RecapGraph
+    const buildNodes = (data) => {
+        const nodes = [];
+        let level1ColorIndex = 0;
+        const processNode = (nodeData, lvl, parentColorKey = null) => {
+            let colorKey, nodeColor;
+            if (lvl === 0) {
+                colorKey = "root";
+                nodeColor = contentUtils_1.COLOR_MAP.root;
+            }
+            else if (lvl === 1) {
+                colorKey = String(level1ColorIndex % 8);
+                nodeColor = contentUtils_1.COLOR_MAP[colorKey];
+                level1ColorIndex++;
+            }
+            else {
+                colorKey = parentColorKey;
+                nodeColor = contentUtils_1.LIGHT_COLOR_MAP[colorKey];
+            }
+            const { hasContent } = getNodeContent(nodeData._id);
+            nodes.push({
+                id: nodeData._id,
+                type: "flashcard",
+                data: {
+                    id: nodeData._id,
+                    label: nodeData?.description,
+                    color: nodeColor,
+                    content: contentMap[nodeData._id] || null,
+                    hasContent,
+                    bgColor: contentUtils_1.LIGHT_COLOR_MAP[colorKey],
+                    colorKey,
+                    level: lvl,
+                    hasMultipleChildren: nodeData.children?.length > 1,
+                    icons: iconConfig,
+                    onExpandChange: (nodeId, isExpanded, height) => {
+                        setIsTransitioning(true);
+                        if (isExpanded) {
+                            setExpandedNodeId(nodeId);
+                            setExpandedNodeHeight(height);
+                        }
+                        else {
+                            setExpandedNodeId(null);
+                            setExpandedNodeHeight(0);
+                        }
+                        const timer = setTimeout(() => {
+                            setIsTransitioning(false);
+                        }, 350);
+                        return () => clearTimeout(timer);
+                    },
+                    onNodeExpand: (nodeId) => {
+                        setIsTransitioning(true);
+                        setActiveExpandedNodeId(nodeId);
+                    },
+                    shouldClose: activeExpandedNodeId !== null &&
+                        activeExpandedNodeId !== nodeData._id,
+                },
+                position: { x: 0, y: 0 },
+                draggable: false,
+                style: {
+                    zIndex: 1,
+                    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+                },
+            });
+            nodeData.children?.forEach((child) => processNode(child, lvl + 1, colorKey));
+        };
+        if (data)
+            processNode(data, 0);
+        return nodes;
+    };
+    // Build edges for RecapGraph
+    const buildEdges = (data, nodes) => {
+        const edges = [];
+        const nodeColorMap = {};
+        nodes.forEach((n) => {
+            nodeColorMap[n.id] = n.data.color;
+        });
+        const processNode = (nodeData, parentLevel = 0) => {
+            const hasMultipleChildren = (nodeData.children?.length || 0) > 1;
+            nodeData.children?.forEach((child) => {
+                const sourceColor = nodeColorMap[nodeData._id] || "#94a3b8";
+                let sourceHandle = "bottom";
+                let targetHandle = "top";
+                if (parentLevel >= 1 && hasMultipleChildren) {
+                    targetHandle = "left";
+                }
+                else if (parentLevel >= 1) {
+                    targetHandle = "top";
+                }
+                edges.push({
+                    id: `${nodeData._id}-${child._id}`,
+                    source: nodeData._id,
+                    target: child._id,
+                    sourceHandle,
+                    targetHandle,
+                    type: "bezier",
+                    style: { stroke: sourceColor, strokeWidth: 2 },
+                    markerEnd: {
+                        type: "arrowclosed",
+                        color: sourceColor,
+                        width: 10,
+                        height: 10,
+                    },
+                });
+                processNode(child, parentLevel + 1);
+            });
+        };
+        if (data)
+            processNode(data, 0);
+        return edges;
+    };
+    // Compute layout for RecapGraph
+    const computeCustomLayout = (inputNodes, inputEdges) => {
+        if (!inputNodes.length || !jsonData)
+            return { nodes: [], edges: [] };
+        const NODE_WIDTH = 390;
+        const NODE_HEIGHT = 80;
+        const HORIZONTAL_SPACING = 240;
+        const VERTICAL_SPACING = 120;
+        const VERTICAL_STACK_SPACING = 30;
+        const HORIZONTAL_OFFSET = 225;
+        const positions = {};
+        const childrenMap = {};
+        const levelMap = {};
+        const nodeHeights = {};
+        inputNodes.forEach((n) => {
+            if (n.id === expandedNodeId) {
+                nodeHeights[n.id] = NODE_HEIGHT + expandedNodeHeight + 100;
+            }
+            else {
+                nodeHeights[n.id] = NODE_HEIGHT;
+            }
+        });
+        const buildMaps = (node, level = 0, parentId = null) => {
+            levelMap[node._id] = level;
+            if (parentId) {
+                if (!childrenMap[parentId])
+                    childrenMap[parentId] = [];
+                childrenMap[parentId].push(node._id);
+            }
+            if (node.children) {
+                node.children.forEach((child) => buildMaps(child, level + 1, node._id));
+            }
+        };
+        buildMaps(jsonData);
+        const subtreeWidths = {};
+        const subtreeHeights = {};
+        const calcSubtreeDimensions = (nodeId) => {
+            const children = childrenMap[nodeId] || [];
+            const level = levelMap[nodeId];
+            const currentNodeHeight = nodeHeights[nodeId];
+            if (children.length === 0) {
+                subtreeWidths[nodeId] = NODE_WIDTH;
+                subtreeHeights[nodeId] = currentNodeHeight;
+                return;
+            }
+            const hasMultipleChildren = children.length > 1;
+            if (level >= 1 && hasMultipleChildren) {
+                children.forEach((childId) => calcSubtreeDimensions(childId));
+                const maxChildWidth = Math.max(...children.map((cid) => subtreeWidths[cid]));
+                const totalHeight = children.reduce((sum, cid) => sum + subtreeHeights[cid], 0);
+                const spacing = (children.length - 1) * VERTICAL_STACK_SPACING;
+                subtreeWidths[nodeId] = NODE_WIDTH + HORIZONTAL_OFFSET + maxChildWidth;
+                subtreeHeights[nodeId] = Math.max(currentNodeHeight, totalHeight + spacing);
+            }
+            else {
+                children.forEach((childId) => calcSubtreeDimensions(childId));
+                const childrenTotalWidth = children.reduce((sum, cid) => sum + subtreeWidths[cid], 0);
+                const spacing = (children.length - 1) * HORIZONTAL_SPACING;
+                subtreeWidths[nodeId] = Math.max(NODE_WIDTH, childrenTotalWidth + spacing);
+                subtreeHeights[nodeId] = currentNodeHeight;
+            }
+        };
+        const getAllNodeIds = (node) => {
+            let ids = [node._id];
+            if (node.children) {
+                node.children.forEach((child) => {
+                    ids = ids.concat(getAllNodeIds(child));
+                });
+            }
+            return ids;
+        };
+        getAllNodeIds(jsonData).forEach((id) => calcSubtreeDimensions(id));
+        const positionNodes = () => {
+            positions[jsonData._id] = { x: 0, y: 0 };
+            const level1Children = childrenMap[jsonData._id] || [];
+            if (level1Children.length === 0)
+                return;
+            const totalWidth = level1Children.length * NODE_WIDTH;
+            const totalSpacing = (level1Children.length - 1) * HORIZONTAL_SPACING;
+            const fullWidth = totalWidth + totalSpacing;
+            let currentX = -fullWidth / 2;
+            const level1Y = nodeHeights[jsonData._id] + VERTICAL_SPACING;
+            level1Children.forEach((childId) => {
+                positions[childId] = {
+                    x: currentX + NODE_WIDTH / 2,
+                    y: level1Y,
+                };
+                currentX += NODE_WIDTH + HORIZONTAL_SPACING;
+            });
+            const positionSubtree = (parentId) => {
+                const children = childrenMap[parentId] || [];
+                if (children.length === 0)
+                    return;
+                const parentPos = positions[parentId];
+                const parentLevel = levelMap[parentId];
+                const hasMultipleChildren = children.length > 1;
+                if (parentLevel >= 1 && hasMultipleChildren) {
+                    let currentY = parentPos.y + nodeHeights[parentId] + VERTICAL_SPACING - 80;
+                    const childX = parentPos.x + HORIZONTAL_OFFSET;
+                    children.forEach((childId) => {
+                        positions[childId] = {
+                            x: childX,
+                            y: currentY,
+                        };
+                        currentY += nodeHeights[childId] + VERTICAL_STACK_SPACING;
+                        positionSubtree(childId);
+                    });
+                }
+                else {
+                    const childrenTotalWidth = children.reduce((sum, cid) => sum + subtreeWidths[cid], 0);
+                    const spacing = (children.length - 1) * HORIZONTAL_SPACING;
+                    const fullChildrenWidth = childrenTotalWidth + spacing;
+                    let childX = parentPos.x - fullChildrenWidth / 2;
+                    const childY = parentPos.y + nodeHeights[parentId] + VERTICAL_SPACING;
+                    children.forEach((childId) => {
+                        const childWidth = subtreeWidths[childId];
+                        positions[childId] = {
+                            x: childX + childWidth / 2,
+                            y: childY,
+                        };
+                        positionSubtree(childId);
+                        childX += childWidth + HORIZONTAL_SPACING;
+                    });
+                }
+            };
+            level1Children.forEach((childId) => positionSubtree(childId));
+        };
+        positionNodes();
+        const layoutNodes = inputNodes.map((n) => ({
+            ...n,
+            position: positions[n.id] || { x: 0, y: 0 },
+        }));
+        return { nodes: layoutNodes, edges: inputEdges };
+    };
+    // Event handlers for mobile accordion view
+    const handleChevronClick = (nodeId) => {
+        setExpandedNodes((prev) => ({
+            ...prev,
+            [nodeId]: !prev[nodeId],
+        }));
+    };
+    const handleIconClick = (nodeId, type, availableContentTypes) => {
+        const isSame = displayTypes[nodeId] === type;
+        setContentExpanded((prev) => ({
+            ...prev,
+            [nodeId]: isSame ? !prev[nodeId] : true,
+        }));
+        setDisplayTypes((prev) => ({
+            ...prev,
+            [nodeId]: type,
+        }));
+    };
+    const setCurrentVideoIdx = (nodeId, idx) => {
+        setVideoIndices((prev) => ({
+            ...prev,
+            [nodeId]: idx,
+        }));
+    };
+    return {
+        // State
+        expandedNodeId,
+        expandedNodeHeight,
+        activeExpandedNodeId,
+        isTransitioning,
+        expandedNodes,
+        contentExpanded,
+        displayTypes,
+        videoIndices,
+        colorMap,
+        // Methods
+        getNodeColors,
+        getNodeContent,
+        buildNodes,
+        buildEdges,
+        computeCustomLayout,
+        handleChevronClick,
+        handleIconClick,
+        setCurrentVideoIdx,
+    };
+};
+exports.useRecapGraphLogic = useRecapGraphLogic;
+//# sourceMappingURL=useRecapGraphLogic.js.map