diff --git a/ell-studio/src/components/depgraph/LMPCardTitle.js b/ell-studio/src/components/depgraph/LMPCardTitle.js index aabab0f2..8d97d7e9 100644 --- a/ell-studio/src/components/depgraph/LMPCardTitle.js +++ b/ell-studio/src/components/depgraph/LMPCardTitle.js @@ -12,6 +12,7 @@ export function LMPCardTitle({ clickable = true, shortVersion = false, paddingClassOverride = '', + nameOverride = null, ...rest }) { const paddingClass = paddingClassOverride ? paddingClassOverride : padding ? 'p-2' : ''; @@ -28,9 +29,9 @@ export function LMPCardTitle({ : } - - {lmp.name}() - + {nameOverride ? nameOverride : + {lmp.name}() + } {displayVersion && } ); diff --git a/ell-studio/src/components/source/LMPSourceView.js b/ell-studio/src/components/source/LMPSourceView.js index 7e9f830f..67452956 100644 --- a/ell-studio/src/components/source/LMPSourceView.js +++ b/ell-studio/src/components/source/LMPSourceView.js @@ -3,9 +3,12 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism'; import { FiChevronDown, FiChevronRight, FiMaximize2, FiMinimize2, FiCopy, FiRefreshCw } from 'react-icons/fi'; import '../../styles/SourceCodeView.css'; +import { Card } from "../Card"; +import { useNavigate } from 'react-router-dom'; import { CodeSection } from './CodeSection'; import { CodeHighlighter } from './CodeHighlighter'; +import { LMPCardTitle } from '../depgraph/LMPCardTitle'; const BoundedVariableWrapper = ({ children, selectedInvocation, content, initial_global_vars, initial_free_vars }) => { const var_name = content.split('=')[0].trim(); @@ -36,19 +39,74 @@ const BoundedVariableWrapper = ({ children, selectedInvocation, content, initial ); }; +const UsedLMPWrapper = ({ uses, children, selectedInvocation, content, }) => { + const navigate = useNavigate(); + const lmp_name = content.split('(')[0].split(' ')[1]; + const defContent = content.split(lmp_name)[0]; + const signatureContent = content.split(lmp_name)[1]; + const lmp = uses?.find(u => u.name === lmp_name); + console.log("lmp", lmp, lmp_name); + console.log("uses", uses); + if (!lmp) return <>{children}; + return ( +
+ { + navigate(`/lmp/${lmp.name}/${lmp.lmp_id}`); + }}> + } + displayVersion + fontSize="md" + /> + +
+ ); +} + const LMPSourceView = ({ lmp, showDependenciesInitial = false, selectedInvocation = null, previousVersion = null, viewMode }) => { - const { dependencies, source, uses, initial_global_vars, initial_free_vars } = lmp; + const { dependencies : unprocessedDependencies, source, uses, initial_global_vars, initial_free_vars } = lmp; const [showDependencies, setShowDependencies] = useState(showDependenciesInitial); const [showSource, setShowSource] = useState(true); + const dependencies = useMemo(() => { + // Add tags on every single line which begins with def where is the naem of an lmp in iuses + const procd_deps = unprocessedDependencies.split('\n').map(line => { + const match = line.match(/^def (\w+)/); + if (match) { + // ge tthe lmp name its the function name after the def but before the signature args etc + const lmp_name = match[1].split('(')[0]; + console.log(lmp_name); + if (uses.some(u => u.name === lmp_name)) { + return `#\n${line}\n#`; + } + } + return line; + }).join('\n'); + return procd_deps; + }, [uses, unprocessedDependencies]); + const trimmedDependencies = dependencies.trim(); const dependencyLines = trimmedDependencies ? trimmedDependencies.split('\n').length : 0; const sourceLines = source.split('\n').length; - const boundedVariableHooks = useMemo(() => { + const sourceCodeHooks = useMemo(() => { const mutableBVWrapper = ({ children, key, content }) => ( ', endTag: '#', wrapper: mutableBVWrapper + }, + { + name: 'usedLMP', + startTag: '#', + endTag: '#', + wrapper: ({children, selectedInvocation, content}) => { + return {children} + } } ]; - }, [selectedInvocation]); + }, [selectedInvocation, uses]); useEffect(() => { if (dependencyLines > 0 && dependencyLines < 6) { @@ -97,7 +163,7 @@ const LMPSourceView = ({ lmp, showDependenciesInitial = false, selectedInvocatio setShowCode={setShowDependencies} lines={dependencyLines} isDependent={true} - customHooks={boundedVariableHooks} + customHooks={sourceCodeHooks} isDiffView={viewMode === 'Diff'} previousCode={previousVersion?.dependencies} highlighterStyle={{