Basic integration of Python Lab with CDO IDE #57935
Conversation
| }; | ||
|
|
||
| const defaultConfig: ConfigType = { | ||
| //showSideBar: true, |
There was a problem hiding this comment.
Did you leave these commented out as an indicator we'll want to change them?
There was a problem hiding this comment.
Mostly I copied this over from WebLab2View and kept the commented out pieces to indicate we haven't set them yet.
There was a problem hiding this comment.
I'll plan to clean these up as a follow-up
| const [currentProject, setCurrentProject] = useState<MultiFileSource>(); | ||
| const [config, setConfig] = useState<ConfigType>(defaultConfig); | ||
| const initialSources = useAppSelector(state => state.lab.initialSources); | ||
| const channelId = useAppSelector(state => state.lab.channel?.id); | ||
| const dispatch = useAppDispatch(); | ||
|
|
||
| // TODO: This is repeated in Weblab2View. Can we extract this out somewhere? | ||
| const setProject = (newProject: MultiFileSource) => { | ||
| setCurrentProject(newProject); | ||
| dispatch(setSource(newProject)); | ||
| if (Lab2Registry.getInstance().getProjectManager()) { | ||
| const projectSources = { | ||
| source: newProject, | ||
| }; | ||
| Lab2Registry.getInstance().getProjectManager()?.save(projectSources); | ||
| } | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| // We reset the project when the channelId changes, as this means we are on a new level. | ||
| setCurrentProject( | ||
| (initialSources?.source as MultiFileSource) || defaultProject | ||
| ); | ||
| }, [channelId, initialSources]); | ||
|
|
There was a problem hiding this comment.
Not for this PR (unless you want to), but I think yoinking it out into a hook that we can share with weblab sounds good.
Something like this:
// or whatever we call the hook
export const useIDEProject = () => {
const [currentProject, setCurrentProject] = useState<MultiFileSource>();
const initialSources = useAppSelector(state => state.lab.initialSources);
const channelId = useAppSelector(state => state.lab.channel?.id);
const dispatch = useAppDispatch();
// I think I memoized this correctly...
const setProject = useMemo(() => (newProject: MultiFileSource) => {
setCurrentProject(newProject);
dispatch(setSource(newProject));
if (Lab2Registry.getInstance().getProjectManager()) {
const projectSources = {
source: newProject,
};
Lab2Registry.getInstance().getProjectManager()?.save(projectSources);
}
}, [setCurrentProject, dispatch])
useEffect(() => {
// We reset the project when the channelId changes, as this means we are on a new level.
setCurrentProject(
(initialSources?.source as MultiFileSource) || defaultProject
);
}, [channelId, initialSources]);
return [currentProject, setProject]
}
I think that'll do it, but double check my work. Then in both components we can just do:
const [project, setProject] = useIDEProject()
and then it should handle all of the IO and updates for us and keep it nicely hidden.
It might be useful to have another wrapper component that automatically sets these project/setProject values on the IDE, but that's kinda feeling like a premature optimization atm. If there's a way to add it w/o another wrapper, let's go for it, but otherwise maybe wait a little.
There was a problem hiding this comment.
I made a follow up task to not lose this! https://codedotorg.atlassian.net/browse/CT-499
Warning!!
The AP CSP Create Performance Task is in progress. The most critical dates are from April 3 - April 30, 2024. Please consider any risk introduced by this PR that could affect our students taking AP CSP. Code.org students taking AP CSP primarily use App Lab for their Create Task, however a small percent use Game Lab. Carefully consider whether your change has any risk of alterering, changing, or breaking anything in these two labs. Even small changes, such as a different button color, are considered significant during this time period. Reach out to the Student Learning team or Curriculum team for more details.
Summary
V0 of integrating Python Lab with CDO IDE. Python Lab doesn't need the preview panel so it just uses the left and center panels. For now I put the console below both panels, but ideally it should just be below the editor, and be a part of CDO IDE. To keep this scoped that can be a follow-up (the console also is not well styled as of now).
Current UI
Any existing projects won't load correctly because I didn't set an active or open file in the previous configuration. It's probably only me that has any projects anyway, and the page still loads, you just have to delete the old files (via the UI) and create new ones.
As part of this I also refactored
Editor.tsxwhich was previously web lab 2 specific and moved it into the CDO IDE folder. It only had two references to html and css that could be easily turned into parameters.Links
Testing story
Tested locally. CDO IDE currently has a bug where when you switch levels the project for the previous level overwrites the next level. That is being fixed in #57928.
Follow-up work
Lots of styling updates and improvements still are in progress here and tracked via the Web Lab 2 workstream. From the python lab side, there are a few specific follow ups:
PR Checklist: