UI for Output Display After Document Matching

[loklokyx]

Feature:

Develop a UI to display the output after matching documents, organised with an aside for navigation and a main section for detailed views.

• Aside Navigation:

  • Display a list of all matched documents.
  • Allow users to click on a matched document to view it.

• Main Display:

  • Show the main document in detail.
  • Keep the main document view persistent while users interact with the aside.

• New Tab Functionality:

  • When a user clicks on a matched document in the aside, open the document in a new browser tab.
  • Ensure that the main tab remains intact, allowing the user to return without losing their place.

Implementation:

1. UI Layout:

   • Create an aside section to list all matched documents.
   • Develop the main display area to show the main document's content.

2. Interaction Design:

   • Implement clickable links in the aside for each matched document.
   • Ensure clicking a link opens the corresponding document in a new tab.

3. Functionality:

   • Use JavaScript to handle the new tab functionality.
   • Ensure the main document remains visible and unaffected when opening new tabs.

4. Testing:

   • Test the UI to ensure smooth navigation and that new tabs open correctly.
   • Verify that data persists in the main tab after interactions.

[github-actions[bot]]

Branch issue-42-UI_for_Output_Display_After_Document_Matching created!

[normit581]

looks like a good idea from todays meeting

[normit581]

Hey, do you have an idea of how we are going to display the content of the main document?

I can parse through the docx metadata and pass it to the frontend through a list with dictionaries inside, but I'm not sure if that's viable or not.

[loklokyx]

Hi @normit581, sorry for the delay, was busy with another 3 assessments due last week. I’ll focus on the content display this week. Thanks for providing the info. I think at the moment we can use meta like render_tempate("page.html", meta=meta) and follow the jsonify format like:

{
 "meta":[
  {
   "docA":{
     "meta_1":"some meta data",
     "meta_2":"some meta2 data",
     "meta_3":"some meta3 data"
   }
  },
  {
   "docB":{
     "meta_1":"some meta data"
   }
  }
 ]
}

[normit581]

I quickly made a function extracting metadata from the documents and this is the output. Would this be suitable for this task?

[loklokyx]

Yup, it can be useful as we need to preview the file name and paragraphs content in the front end. Metadata like createdBy is optional but can be displayed as well.