Discussion and Q&A of Outreachy + GSoC ideas 2022

[TildaDares]

Hi everyone, we've put together an ideas list for Outreachy and Google Summer of Code(GSOC) 2022 and we're sharing it here for discussion.

The Outreachy and GSOC projects have been accepted. The official ideas list can be found at https://publiclab.org/wiki/gsoc-ideas#2022+Ideas. We're using this medium to discuss or suggest possible refinements to the projects.

Also watch out for Welcome issues to go up in the coming days to ask folks to introduce themselves, and to otherwise offer support and info on the application and selection process.

Lastly, THANK YOU SO MUCH for your interest! We are so excited to have the chance to work with you! 🎉 🎉 🎉 🎉 🎉 🎉 🎉

---

2022 ideas

Note that these projects could fit in either a smaller or larger project timeline, depending on the applicant's experience, or the depth of detail the applicant wants to go into on each item. We're happy to discuss this with you!

Legacy code deprecation

Part of: https://github.com/publiclab/plots2

Description: (This project may be combined with another small project) Our codebase retains a variety of old database models, code segments, and removing them is a delicate task involving correcting tests, restructuring the database, and more. This project will:

• build on completed projects to continue the work of removing older legacy models and tables from our system
• adjust or remove tests along with code removal
• use Rails database migrations to remove unused tables
• produce archival exports of data which we are deleting if necessary
• merge and combine deprecated content types into standard ones; for example, Maps become Wiki pages
• test out migrations in development environments and on our cloned copy of the production server, to ensure smooth deployment
• increase code coverage as a result of reducing unused and untested code
• deprecation projects listing is available at https://github.com/publiclab/plots2/milestone/24
• read more at: Deprecate Drupal legacy database structures/naming #956

Outcomes: Reduction in codebase size and complexity, easier maintainability and higher code quality and consistency.

List: https://gitter.im/publiclab/publiclab, https://gitter.im/publiclab/publiclab

Prerequisites: JavaScript, Ruby on Rails

Difficulty Level: medium

Project size: 350h OR could be split into 2 175h projects

Potential mentors: Jeffrey Yoo Warren (jywarren), Cess, ADD YOUR NAME HERE

---

Refine User Interfaces across PublicLab.org

Part of: https://github.com/publiclab/plots2

Description: As teachers increasingly use PublicLab.org in the classroom, we are looking to improve a collection of User Interface/User Experience (UI/UX) and related features on the platform. Some are navigational, some are stylistic, and some introduce new interfaces or ways of browsing content. For any project involving a design change, we are interested in seeing mockups/designs first, discussing with community representatives, and then developing code. Projects would include the following:

This project will:

• Brainstorm better interlinked navigation between https://publiclab.org/wiki pages <> https://store.publiclab.org/ <> individual tag pages (like https://publiclab.org/tag/water-quality).
• Template for random “generator” that will bring up a random piece of content for a given topic, for use around the site to re-surface old content.
• It may need some tuning to ensure old content meets some threshold minimum # of views, comments, etc - to ensure it’s interesting enough!
• Better disambiguate “search for this term” vs. “Go to the page for this topic” in navbar search box UI. Pressing Enter for “water” goes to tag page /tag/water, but pressing escape then enter searches for the string “water” - let’s manage this better and use better textual hints using Bootstrap UI elements!
• Develop a category tree interactive feature at /topic-tree with nested topics in a tree view like: https://www.appropedia.org/Appropedia:Fundamental_category_tree using asynchronous calls to Rails and JavaScript code to insert nested https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details elements
• Add a date-picker to new timeframe selector for /tag/____ pages: Ability to set timeframe for /tag/____ pages #2439
• Change information hierarchy on Profile Pages to feature user-generated content, not group content, in topical “cards” shown in the main column, for example on https://publiclab.org/profile/sarasage each card shows posts by other users
• Streamline the process for teachers (https://publiclab.org/education) becoming moderators (https://publiclab.org/moderation) (this may be a refinement of the process)

Outcomes: An improved, more coherent UI on PublicLab.org for educators in particular.

List: https://gitter.im/publiclab/publiclab

Prerequisites: JavaScript, Ruby on Rails

Difficulty Level: medium

Project size: 350h OR could be split into 2 175h projects

Potential mentors: Jeffrey Yoo Warren (jywarren), Cess, Tilda

---

MapKnitter Local

Part of: https://github.com/publiclab/Leaflet.DistortableImage/, https://github.com/publiclab/mapknitter

Description: MapKnitter.org is a complex and powerful system that lets you upload your own aerial images, position them (rubber-sheet) in a web interface over existing map data, and share via web or composite and export for print. We are looking for ways this could be done without depending on a server in the long term, and want to try making use of the latest in JavaScript image processing to prototype full-resolution image processing and download in the browser. This project sets the groundwork for working locally/offline or from a static page using just the core browser-based library Leaflet.DistortableImage then goes on to attempt a completely in-browser map stitching exporting process.

This project will:

• Add a geocoding search box to the demo so upon creating a map users can navigate to a specific place

• Add a “drag image onto the page to add” feature to the Leaflet.DistortableImage demo so people can import multiple images into maps in the demo at https://publiclab.github.io/Leaflet.DistortableImage/examples/export.html

• Allow current map state to be exported to a downloadable “distortableGeoJSON.json” format (see https://github.com/publiclab/image-sequencer-app#usage for current JSON format and https://gis.stackexchange.com/q/298808 / https://geojson.org/ for official GeoJSON standard) Add local saving of maps, via localStorage (may be limited by filesize?) so you don’t lose your work when you refresh the page (using “distortableGeoJSON.json”)

• Allow map initialization from a “distortableGeoJSON.json” format which auto-places the images

• Could it detect missing images from the distortableGeoJSON.json file and prompt the user to drag them onto the page? This would take some UI work.

• The hard part: local full-res map exporting: 3 possible approaches:

  • switch to Ruby exporter in exporting demo: upstream Node-based cloud export service offline in export demo; switch to Ruby-based service for now Leaflet.DistortableImage#751 (maybe easiest, although it means you’d have to find how to send the local images to the remote exporter)

  • rework the JS exporter for local use: https://github.com/publiclab/image-sequencer-app (challenging to rework server-side multi-threaded Node code)

  • or use the existing WebGL-distort individual image export (https://github.com/publiclab/Leaflet.DistortableImage/#full-resolution-download) and stack them into one giant image using https://github.com/nodeca/pica (hard but relatively straightforward)

Stretch goals:

• Rework portions of MapKnitter.org code to:
• use DistortableGeoJSON to save map state
• Initialize map using DistortableGeoJSON

Outcomes: The ability to create and export maps from a static HTML/JS-based page, even offline.

List/chat: https://gitter.im/publiclab/publiclab

Prerequisites: JavaScript, Ruby on Rails

Difficulty Level: hard

Project size: 350h OR could be split into 2 175h projects

Potential mentors: Jeffrey Yoo Warren (jywarren), Cess, Tilda

---

Infragram.org full-screen UI and video upload

(There is a matching UI-focused Outreachy project idea below. If a fellow is selected, that will absorb much of the UI design portion of this project but collaboration and coordination will still be required for implementation.)

Part of: https://github.com/publiclab/infragram

Description: The Infragram project brings together a range of different efforts to make Do-It-Yourself plant health comparisons possible with infrared photography. Infragram.org enables people with Infragram-modified cameras to upload photos for analysis and conversion using techniques like NDVI (used in satellite imaging analysis). It also allows for live streaming from a modified webcam. This project will overhaul the UI of Infragram to be full-screen, accept multiple resolutions of video, output multiple resolutions, and will allow dragging in a recorded video instead of a still image for conversion.

This project will:

• Allow cross-browser drag-and-drop on the entire page instead of just selecting an image
• Design a new interface (using Bootstrap 4; the current version is Bootstrap 3) for Infragram.org which is full screen with a toolbar, solicit and incorporate input from the user community
• Move Q&A feature into a Help menu
• Add a popup “Welcome” modal box which guides your first few steps based on the tutorial at https://publiclab.org/n/15075 and more at https://publiclab.org/infragram#Activities
• Integrate new cross-platform WebRTC video library for Safari iOS support: Integrate latest camera selection API from getUserMedia infragram#39
• accept multiple resolutions of video (see Develop setting to increase capture image resolution above currently fixed 640px spectral-workbench#893 for an example of doing this!)
• Allow drag and drop of a video, which will play on loop and have controls to scroll through, pause, etc. Note that this won’t actually upload the video but will process it locally.
• Allow conversion of the whole video (this will be difficult) by recording from the canvas (see https://webrtc.github.io/samples/src/content/capture/canvas-record/ and https://medium.com/@amatewasu/how-to-record-a-canvas-element-d4d0826d3591)
• allow selecting multiple output resolutions as well
• Write UI tests for new Infragram UI, using Jest (https://jestjs.io/)

Stretch goals

• allow zooming/panning of video within canvas
• allow selecting an area of the screen and calculating an average color value (or average NDVI value from the scale)
• expand the colorize menu to describe each colormap and offer thumbnails (could use https://sequencer.publiclab.org/ to achieve this)

Outcomes: A better layout and UI for Infragram.org, and the ability to use it on uploaded videos.

List/chat: https://gitter.im/publiclab/publiclab

Prerequisites: JavaScript

Difficulty Level: medium

Project size: 350h, or 175h if the focus is on non-UI portions only

Potential mentors: Jeffrey Yoo Warren (jywarren), Cess, Tilda , Sudipto Ghosh

---

Outreachy Projects

Infragram.org full-screen UI design

This project is reserved for Outreachy applicants. There is a matching project for GSoC applicants above.

Part of: https://github.com/publiclab/infragram

Description: The Infragram project brings together a range of different efforts to make Do-It-Yourself plant health comparisons possible with infrared photography. Infragram.org enables people with Infragram-modified cameras to upload photos for analysis and conversion using techniques like NDVI (used in satellite imaging analysis). It also allows for live streaming from a modified webcam. This project will overhaul the UI of Infragram to be full-screen and create space for new features like multiple resolutions of video, dragging in a recorded video instead of a still image for conversion, and pop up panels with Q&A, tips, tutorials, and more, so that they can feature more helpful guidance text.

This project will:

• Design a new interface (using Bootstrap 4; the current version is Bootstrap 3) for Infragram.org which is full screen with a toolbar, solicit and incorporate input from user community
• Learn about and understand the existing UI first
• Understand the UI flow and goals, various different use cases
• Create a wireframe and solicit feedback
• Allow cross-browser drag-and-drop on the entire page instead of just selecting an image
• Suggestion: move Q&A feature into a Help menu
• Suggestion: add a popup “Welcome” modal box which guides your first few steps based on tutorial at https://publiclab.org/n/15075 and more at https://publiclab.org/infragram#Activities
• Try creating a working “mockup” interface with Bootstrap elements (that is not hooked up to JS yet)
• Iterate with user feedback
• Implement the new interface in HTML/JS (perhaps in cooperation with possible Google Summer of Code intern on corresponding project) - begin with an “index2.html” next to the original index.html
• Ensure each feature/function still works

Stretch goal: design a new colorize popup modal window to describe each colormap and offer thumbnails (could use https://sequencer.publiclab.org/ to achieve this)

Outcomes: A better layout and full-screen UI for Infragram.org.

List/chat: https://gitter.im/publiclab/publiclab

Prerequisites: JavaScript

Difficulty Level: medium

Potential mentors: Jeffrey Yoo Warren (jywarren), Cess, Tilda , Sudipto Ghosh

---

MapKnitter.org Spam Management system

Part of: https://github.com/publiclab/mapknitter

Description: We have a range of spam management tools and systems at PublicLab.org, but MapKnitter.org has persistent spam, even though users rely on PublicLab.org to log in. We have a range of ideas to improve the situation, ranging from integrating MapKnitter.org with PublicLab’s spam management system, creating a unified visual style between the systems, implementing user status restrictions for moderated users and maps, and more.

This project will:

• Create a view of all recent maps in a table with buttons for moderating each, very similar to https://publiclab.org/n/24349
• Display information about each map, such as the author’s status, how many images it has, whether images have been placed, whether the author is new
• Check via the Public Lab API whether the currently logged-in user is a moderator to determine if they can view the spam table
• Add a link/tab from publiclab.org/spam2 to the MapKnitter spam dashboard
• Display a list of any maps a banned PublicLab.org user has (if any) when they are banned
• Offer a button to spam all maps by that user in one click, like mapknitter.org/spam/user/
• Forbid login by users who’ve been banned on MapKnitter, by setting their status to 0
• Regularly check (hourly? daily?) (when running current_user function) if users have been banned from publiclab.org (via an API call)
• Build on early work by Gaurav Sachdeva in https://github.com/publiclab/mapknitter/labels/spam

List: https://gitter.im/publiclab/publiclab, https://gitter.im/publiclab/publiclab

Prerequisites: JavaScript, Ruby on Rails

Difficulty Level: medium

Potential mentors: Jeffrey Yoo Warren, Cess, ADD YOUR NAME HERE

[anirudhprabhakaran3]

Thank you @TildaDares ! I think I would be interested on working on the legacy code depreciation. Along with the issues mentioned there, I think we can add #10545 to the depreciation task as well. I've listed all the unused routes and actions. We can go through them methodically and eliminate the ones that we don't need, or refactor and rewrite the ones that we might need.

[yuktea]

Awesome @TildaDares ! The Infragram.org project sounds really cool.

[jywarren]

Hi everyone - after talking through it with
fellow coordinator/mentors @TildaDares and @cesswairimu I wrote up a detailed README of the Infragram project, detailing how it's designed and organized:

https://github.com/publiclab/infragram/blob/main/README.md

I'll keep adding but check it out!

[jywarren]

Update: I went through and expanded the Infragram README a LOT, and even added illustrations! 🖼️ 💅

https://github.com/publiclab/infragram

I know it's a ton of information but I hope it's helpful!