ani-hovhannisyan / kanji-visualization

Kanji words visualization graph draws relational graph for kanjis of particular words in Japanese. Aim is to understand the relational graph of one kanji within different words and it's relations to all possible words.

• 👋 Hi, I’m "Ani"
• 💞️ I’m looking to collaborate in any OSS...
• 📫 How to reach me ... send me a message through my profile website (draft) https://haprofile.wordpress.com/contact/

kanji-visualization's Issues

Create pre-commit hooks

• Create pre-commit hooks to run automatically linters and formatters before committing.

The "react-scripts: not found" error occures when running frontend react server

The following error occurs when trying to run frontend environment in local PC without docker (react server):
$ yarn start

yarn run v1.22.17
$ react-scripts start
/bin/sh: 1: react-scripts: not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Setup local environment on each pc

• Ani san
• Hirade san
• Ihara san
• Kayawari san

Create local environment

ToDo

• create local environment using docker
• write how to create local environment on README

Create a sample graph for the graph view.

This is the first step of the graph view implementation.

Clean up GraphView.tsx towards function integration

Clean up some code snippets in frontend/src/GraphView/GraphView.tsx that were temporarily added towards function integration

• Remove test data import.

import testData from "./testData.json";

• Change nodes and links to required properties.

interface GraphData {
  nodes?: ExtendedNodeObject[];
  links?: {
    source: string;
    target: string;
  }[];
}

• Change graphData to required property.

interface Props {
  graphData?: GraphData;
}

• Change testData to props.graphData.

  return (
    <ForceGraph2D
      ...
      graphData={testData}

[frontend] Create search form

Create search form using react-hooks-form.

Create InfoController test

Create InfoController test to check return value from jamdict.

[backend]Create GraphController APIs to interact with client side

• Implement API to interact with Search Controller
• Implement API to interact with GraphView

Define JSON format

Define JSON format that contains node, link and info.

Prepare nodes json format, pass to Search controller which will later response to frontend

Prepare sample of nodes json format which will be drawn in Graph View. The format is located in frontend/src/GraphView/.

Explore the kanji dictionary

Explore the kanji dictionary and think how to create the graphical view using it.

Create a sequence diagram

Create sample code for frontend testing

• Create sample code for frontend testing

create a milestone

Github dependabot finds vulnerabilities in the dependencies

@wowry Dependabot finds vulnerabilities in this repo (see pics), which is visible only for repository creator (me).
Do you have any ideas? Shall we avoid it or to replace the dependencies?
-->>>

-->>>

Push the usecase document and diagrams

Todo

• move diagrams from google docs to any file on github.
• push the file

Download Issue

this is the sample issue.

Implement InfoView Class in frontend side to represent Kanji information

Application error when kanji is not found

When the kanji is not found the error will be happend.

Create CI

Create Robustness Analysis Diagram

ToDo

• write Robustness Analysis on google docs

Match the format of the return value of read_kanji_visualize() in main.py to the JSON format

Since the format of the return value of read_kanji_visualize() in main.py now is still tentative, match it to the determined JSON format.

Implement InfoController in backend side to prepare Kanji information

GraphView

SearchController

Investigate how to call the api through search controller.

[backend]Implement GraphController class in backend

Implement the Graph Controller class in the server side.

• Create necessary empty interfaces between SearchController, InfoController, GraphView classes.

• Prepare nodes format to pass to GraphView (related to #37 )

KPT problem: Coding style

Discuss which to use for coding in Server side and client side.

Update Readme docs periodically for developers and app users

Please update the Readme or related docs about development environment and usage of apps.
This is ongoing task which can be passed from milestone to milestone.
Currently update required versions for dependencies, etc.

Reduce kana from drawing in kanji graph view.

As discussed in #59 PR, remove all words from nodes which contain other than kanji, e.g. okurigana containing words, as it's not the case from current domain diagram.
Use same method as SearchController does for checking one kanji input.

Modify the name of sequence and class diagrams

Create Use Case and Robustness diagrams

• Create detailed Use Case diagrams.
• Create Robustness diagrams.
• Push the diagrams into this repository.
  Note: Can use Astah or Plantuml.

Create a milestone

Explore the graph visualization library

• Search the graph visualization library

Add test for backend REST APIs

Add test which will test the get request to get kanji graph data. Follow this:
https://docs.google.com/document/d/1q9L0y9OQzgb0q9xUPpt3rnvNsbCtOJyu7gly8lK9lgk/edit# REST API in server side section. Implementation is in main.py
Currently, I test like this in command line:
Request: curl localhost:8000/kanji-visualize
Response: {"detail":[{"loc":["query","kanji"],"msg":"field required","type":"value_error.missing"}]}

Should have same json as in graph view testing, and compare both when the response comes.

Create CD

General design of tests.

Design Unit tests, function tests, API tests, UI tests, Use case tests.

Properly define and explain the detais of design pattern in backend python

Currently, I considered 3 controller classes (singleton mostly), but two of it have to process the data which is very close to each other, both Info and Graph represent kanji properties. If we later support the search history, it will be good to keep the track of all objects of kanjis in one class.
But I'm not sure which pattern is better in python when proceeding it for responding in API.
Will patterns like adapter or abstract work? which will mostly fit in here? Which are the best practices in python server side when responding some search results?
See the link https://refactoring.guru/design-patterns/python

Creating class diagrams

• Create class diagram
• Push them to Github

The "Html Webpack Plugin" errors occur when running frontend server.

Hi, I'm trying to setup locally wihtout docker, by following current readme steps. I avoid the #13 error via "--ignore-engines" and run frontend server.
However, it responds with following error in webpage:

Html Webpack Plugin:
  Error: Child compilation failed:
  Module.createRequire is not a function
  - child-compiler.js:169 childCompiler.runAsChild
    [frontend]/[html-webpack-plugin]/lib/child-compiler.js:169:18
  - Compiler.js:559 compile
    [frontend]/[webpack]/lib/Compiler.js:559:11
  - Compiler.js:1129 hooks.afterCompile.callAsync.err
    [frontend]/[webpack]/lib/Compiler.js:1129:17
  - next_tick.js:68 process._tickCallback
    internal/process/next_tick.js:68:7
  

And an error in webpage console is:

Uncaught Error: Target container is not a DOM element.
    at Object.render (bundle.js:33330)
    at Module../src/index.tsx (bundle.js:214)
    at Module.options.factory (bundle.js:42557)
    at __webpack_require__ (bundle.js:42007)
    at bundle.js:43196
    at bundle.js:43198
WebSocketClient.js:16 WebSocket connection to 'ws://localhost:3000/ws' failed:

It seems like there are react version problems, or maybe, as I use --ignore-engines option it didn't fully install necessary modules.

Deploy the application to aws

Create Info view in frontend

Create info controller view on frontend.

Refactoring task In searchController

Commit ani-san review on this branch.
I do it on new branch to clean the git history.
#53

Connect SearchField and GraphView

• Update type handling related to JSON Format in frontend (especially in SearchField)
  • For more information about JSON Format, see this link.
• Connect SearchField and GraphView and make it ready to connect to the backend.

[backend]Create Info controller

Create Info controller

Class Info controller
offer only get_kanji_info function
- Input: kanji (ex 山)
- Output: dictionary (ex { “onyomi”: san, “kunyomi”: yama})
- Additional you can: return english meaning also
- 

Create GraphController test

Create test which will check whether right format is created.

[backend] create backend post api for receive kanji.

create endpoint on rest api
and return sample response

Create CI/CD

create CI CD and build hosting server

Implement graph drawing logic

• Decide graph library

• Create a logic of preparing data to draw the graph nodes and edges

• Think of what information does contain node and edge in the graph.

Create sample code for backend testing

• Create sample code for backend testing