Modified preview to fit size of snippet content.

Author: kpinnipa

snippets/gdp_calculator.json

@@ -1 +1 @@
-{"name":"gdp_calculator","description":"Calculate total GDP, in trillions of dollars, by region, over time","language":"R","code":["gdp_regions <- nations %>%","  mutate(gdp = gdp_percap * population,","         gdp_tn = gdp/1000000000000) %>%","  group_by(region, year) %>%","  summarize(total_gdp_tn = sum(gdp_tn, na.rm = TRUE))",""],"id":11,"tags":["Countries Project"]}
+{"name":"gdp_calculator","description":"Calculate total GDP, in trillions of dollars, by region, over time","language":"R","code":["gdp_regions <- nations %>%","  mutate(gdp = gdp_percap * population,","         gdp_tn = gdp/1000000000000) %>%","  group_by(region, year) %>%","  summarize(total_gdp_tn = sum(gdp_tn, na.rm = TRUE))",""],"id":10,"tags":["Countries Project"]}

snippets/generate_hundred.json

@@ -1 +1 @@
-{"name":"generate_hundred","description":"Scala program to print numbers from 1 to 100  using for loop with until to determine loop range.","language":"Scala","code":["object ExampleForLoop2 {","   def main(args: Array[String]) {","      var counter: Int=0;","      ","      for(counter <- 1 until 101)","        print(counter + \" \");","    ","      // to print new line","      println();","   }","}"],"id":13,"tags":["math"]}
+{"name":"generate_hundred","description":"Scala program to print numbers from 1 to 100  using for loop with until to determine loop range.","language":"Scala","code":["object ExampleForLoop2 {","   def main(args: Array[String]) {","      var counter: Int=0;","      ","      for(counter <- 1 until 101)","        print(counter + \" \");","    ","      // to print new line","      println();","   }","}"],"id":12,"tags":["math"]}

snippets/life_exp_eur_asia.json

@@ -1 +1 @@
-{"name":"life_exp_eur_asia","description":"Find countries in North America or Europe and Central Asia with a life expectancy in 2016 of 75 to 80.","language":"R","code":["eur_na_75_80 <- longevity %>%","  filter(life_expect > 75 & life_expect < 80 & (region == \"Europe & Central Asia\" | region == \"North America\")) %>%","  arrange(desc(life_expect))"],"id":9,"tags":["Countries Project"]}
+{"name":"life_exp_eur_asia","description":"Find countries in North America or Europe and Central Asia with a life expectancy in 2016 of 75 to 80.","language":"R","code":["eur_na_75_80 <- longevity %>%","  filter(life_expect > 75 & life_expect < 80 & (region == \"Europe & Central Asia\" | region == \"North America\")) %>%","  arrange(desc(life_expect))"],"id":8,"tags":["Countries Project"]}

snippets/parallel_strings.json

@@ -1 +1 @@
-{"name":"parallel_strings","description":"A simple queue function to generate four random strings in parallel.","language":"Python","code":["import multiprocessing as mp","import random","import string","","random.seed(123)","","# Define an output queue","output = mp.Queue()","","# define a example function","def rand_string(length, output):","    \"\"\" Generates a random string of numbers, lower- and uppercase chars. \"\"\"","    rand_str = ''.join(random.choice(","                        string.ascii_lowercase ","                        + string.ascii_uppercase ","                        + string.digits)","                   for i in range(length))","    output.put(rand_str)","","# Setup a list of processes that we want to run","processes = [mp.Process(target=rand_string, args=(5, output)) for x in range(4)]","","# Run processes","for p in processes:","    p.start()","","# Exit the completed processes","for p in processes:","    p.join()","","# Get process results from the output queue","results = [output.get() for p in processes]","","print(results)"],"id":8,"tags":["multiprocessing"]}
+{"name":"parallel_strings","description":"A simple queue function to generate four random strings in parallel.","language":"Python","code":["import multiprocessing as mp","import random","import string","","random.seed(123)","","# Define an output queue","output = mp.Queue()","","# define a example function","def rand_string(length, output):","    \"\"\" Generates a random string of numbers, lower- and uppercase chars. \"\"\"","    rand_str = ''.join(random.choice(","                        string.ascii_lowercase ","                        + string.ascii_uppercase ","                        + string.digits)","                   for i in range(length))","    output.put(rand_str)","","# Setup a list of processes that we want to run","processes = [mp.Process(target=rand_string, args=(5, output)) for x in range(4)]","","# Run processes","for p in processes:","    p.start()","","# Exit the completed processes","for p in processes:","    p.join()","","# Get process results from the output queue","results = [output.get() for p in processes]","","print(results)"],"id":16,"tags":["multiprocessing"]}

snippets/progress_bar.json

@@ -1 +1 @@
-{"name":"progress_bar","description":"Create a progress bar.","language":"Python","code":["class ProgressBar():","    def __init__(self, width=50):","        self.pointer = 0","        self.width = width","","    def __call__(self,x):","         # x in percent","         self.pointer = int(self.width*(x/100.0))","         return \"|\" + \"#\"*self.pointer + \"-\"*(self.width-self.pointer)+\\","                \"|\\n %d percent done\" % int(x) "],"id":10,"tags":["Time"]}
+{"name":"progress_bar","description":"Create a progress bar.","language":"Python","code":["class ProgressBar():","    def __init__(self, width=50):","        self.pointer = 0","        self.width = width","","    def __call__(self,x):","         # x in percent","         self.pointer = int(self.width*(x/100.0))","         return \"|\" + \"#\"*self.pointer + \"-\"*(self.width-self.pointer)+\\","                \"|\\n %d percent done\" % int(x) "],"id":9,"tags":["Time"]}

snippets/sum_array.json

@@ -1 +1 @@
-{"name":"sum_array","description":"Scala program of array. Declare, print, and calculate sum of all elements.","language":"Scala","code":["object ExampleArray1 {","    ","   def main(args: Array[String]) {","       ","      var numbers = Array(10,20,30,40,50);","      var N:Int=0;","      ","      //print all array elements","      println(\"All array elements: \");","      for ( N <- numbers ) {","         println(N);","      }","      //calculating SUM of all elements","      var sum: Int=0;","      for ( N <- numbers ) {","         sum+=N;","      }      ","      println(\"Sum of all array elements: \"+sum);","","   }","}"],"id":12,"tags":["math"]}
+{"name":"sum_array","description":"Scala program of array. Declare, print, and calculate sum of all elements.","language":"Scala","code":["object ExampleArray1 {","    ","   def main(args: Array[String]) {","       ","      var numbers = Array(10,20,30,40,50);","      var N:Int=0;","      ","      //print all array elements","      println(\"All array elements: \");","      for ( N <- numbers ) {","         println(N);","      }","      //calculating SUM of all elements","      var sum: Int=0;","      for ( N <- numbers ) {","         sum+=N;","      }      ","      println(\"Sum of all array elements: \"+sum);","","   }","}"],"id":11,"tags":["math"]}

src/CodeSnippetDisplay.tsx

@@ -536,10 +536,10 @@ export class CodeSnippetDisplay extends React.Component<
     const intID = parseInt(id, 10);
     const realTarget = document.getElementsByClassName(TITLE_CLASS)[intID];
     // distDown is the number of pixels to shift the preview down
-    let distDown: number = realTarget.getBoundingClientRect().top - 43;
-    if (realTarget.getBoundingClientRect().top > window.screen.height / 2) {
-      distDown = distDown - 66;
-    }
+    const distDown: number = realTarget.getBoundingClientRect().top - 43; //this is bumping it up
+    // if (realTarget.getBoundingClientRect().top > window.screen.height / 2) {
+    //   distDown = distDown - 66; //this is bumping it up further if it's close to the end of the screen
+    // }
     const final = distDown.toString(10) + 'px';
     document.documentElement.style.setProperty('--preview-distance', final);
   }

style/index.css

@@ -178,9 +178,9 @@
   background: var(--jp-layout-color1);
   padding: 5px;
   width: 180px;
-  /*height: fit-content;
-  max-height: 150px;*/
-  height: 106px;
+  height: fit-content;
+  max-height: 75px;
+  /*height: 106px;*/
   box-sizing: border-box;
   box-shadow: var(--jp-elevation-z2);
   word-wrap: break-word;